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

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/10
Adobe, 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 or
trademarks 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 the
United 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 of
their respective owners.
Printed in the USA. 91023957 3/10
© 2011 Adobe Systems Incorporated.