Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Debugging mobile websites and web apps


Published on

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

Published in: Technology, Business
  • Be the first to comment

Debugging mobile websites and web apps

  1. 1. Debugging Mobile Websites and Web Apps Mihai Corlan | Web Developer Evangelist | Adobe© 2011 Adobe Systems Incorporated.
  2. 2. About Me Mihai Corlan  Adobe Web Developer Evangelist  Blog:  Twitter: mcorlan  Email: 2© 2011 Adobe Systems Incorporated.
  3. 3. Agenda  Google Chrome for Android  weinre  Adobe Shadow© 2011 Adobe Systems Incorporated.
  4. 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. 5. Google Chrome for Android 4© 2011 Adobe Systems Incorporated.
  6. 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. 7. Remote debugging with Chrome for Android  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. 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. 9. 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:  mobile-devices/© 2011 Adobe Systems Incorporated.
  10. 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. 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. 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:  mobile-web-sites-and-apps/© 2011 Adobe Systems Incorporated.
  13. 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. 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© 2011 Adobe Systems Incorporated.
  15. 15. Thank You! Question & Answers Time!© 2011 Adobe Systems Incorporated.
  16. 16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  17. 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.