Your SlideShare is downloading. ×
0
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Debugging mobile websites and web apps

3,604

Published on

This session is about three different techniques for debugging mobile websites or web apps while running on devices.

This session is about three different techniques for debugging mobile websites or web apps while running on devices.

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,604
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • A new way to debug and test web applications and sites across mobile devices
  • https://chrome.google.com/webstore/detail/idknbmbdnapjicclomlijcgfpikmndhd/related
  • Install the weinre app or download the java executableConnect your mobile device and computer to the same WiFi networkEdit the weinre properties file to point to your machine IPStart the weinre app and copy from the server tab the script you need to include in your web pageNavigate to the page on your mobile device
  • We still have some time for questions. Anyone?
  • Transcript

    • 1. Debugging Mobile Websites and Web Apps Mihai Corlan | Web Developer Evangelist | Adobe© 2011 Adobe Systems Incorporated.
    • 2. About Me Mihai Corlan  Adobe Web Developer Evangelist  Blog: http://corlan.org  Twitter: mcorlan  Email: mcorlan@adobe.com 2© 2011 Adobe Systems Incorporated.
    • 3. Agenda  Google Chrome for Android  weinre  Adobe Shadow© 2011 Adobe Systems Incorporated.
    • 4. The Problem  When you create web apps or pages for mobile you have to test them on the devices  Navigating on a different number of devices is a tedious task. You waste lot of time with the tiny keyboards…  Web Inspector/Firebug tools are not available usually on mobile devices Is there a better way to debug and test mobile web sites/apps?© 2011 Adobe Systems Incorporated.
    • 5. Google Chrome for Android 4© 2011 Adobe Systems Incorporated.
    • 6. With Chrome beta for Android  You can start a remote web inspector session from your computer to the URL displayed on your mobile device  Send a page you are viewing on your desktop Chrome to your mobile Chrome browser© 2011 Adobe Systems Incorporated.
    • 7. Remote debugging with Chrome for Android http://code.google.com/chrome/mobile/docs/debugging.html  Install Android SDK on your machine – you need adb  Connect your mobile device via USB cable to your computer  Chrome for Android > Settings > Developer tools  Enable USB Web debugging  Execute in console this command:  adb forward tcp:9222 localabstract:chrome_devtools_remote  Navigate on your desktop Chrome to localhost:9222  On your device navigate to the page you want to debug  From your desktop Chrome choose the entry for that page > Web Inspector will start© 2011 Adobe Systems Incorporated.
    • 8. Issues with Chrome Beta for Android  Works only on ICS (Android 4.x)  The app is not available in all stores yet (you can find the APK file if you google for)© 2011 Adobe Systems Incorporated.
    • 9. weinre  http://phonegap.github.com/weinre/  Web Inspector Remote for WebKit-based browsers (works on iOS and Android)  It works for websites and PhoneGap apps  It doesn’t support all the Web Inspector features (JavaScript debugging doesn’t work)  You have to inject a JavaScript file in the web page you want to debug  Tutorial on weinre on my blog:  http://corlan.org/2012/01/10/debugging-web-pages-and-phonegap-apps-on- mobile-devices/© 2011 Adobe Systems Incorporated.
    • 10. Solution: Adobe Shadow  Adobe Shadow allows developers to connect their mobile devices to the computer/laptop and do “synchronized browsing”  Each connected mobile device will display the same URL as the computer browser and it will stay in synch as you change the URL on your computer Computer Mobile Devices URL© 2011 Adobe Systems Incorporated.
    • 11. Boring … is this all?  Adobe Shadow allows you to start a remote Web Inspector session with any connected mobile device  You can inspect the DOM, check the CSS properties, JavaScript Console,…© 2011 Adobe Systems Incorporated.
    • 12. How does Adobe Shadow work?  It uses under the hood the weinre project  You install Shadow app and Shadow Chrome extension on your computer  You install Shadow mobile app on your mobile devices  You connect all the devices to the same WiFi as your computer  Tutorial on Adobe Shadow on my blog:  http://corlan.org/2012/03/07/introducing-adobe-shadow-a-new-way-to-debug- mobile-web-sites-and-apps/© 2011 Adobe Systems Incorporated.
    • 13. Adobe Shadow supports  Windows and Mac OS  You have to use Chrome on your computer/laptop  iOS and Android devices© 2011 Adobe Systems Incorporated.
    • 14. Where can I get it and how much does it cost?  Adobe Shadow is in beta and it is free  You can download it from http://labs.adobe.com/technologies/shadow/© 2011 Adobe Systems Incorporated.
    • 15. Thank You! Question & Answers Time! http://corlan.org http://twitter.com/mcorlan http://github.com/mcorlan mcorlan@adobe.com© 2011 Adobe Systems Incorporated.
    • 16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    • 17. Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, the Adobe PDF logo, AIR, ColdFusion, ColdFusion Builder, Flash, Flash Builder, the Flash logo, Flex, LiveCycle, and R are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respec owners. © 2010 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 9102xxxx 3/10Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, ActionScript, AIR, Flash, Flash Builder, Flash Catalyst, the Flash logo, Flex, and LiveCycle are either registered trademarks ortrademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in theUnited States and/or other countries. Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks are the property oftheir respective owners.Printed in the USA. 91023957 3/10© 2011 Adobe Systems Incorporated.

    ×