Debugging mobile websites and web apps
Upcoming SlideShare
Loading in...5
×
 

Debugging mobile websites and web apps

on

  • 4,374 views

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.

Statistics

Views

Total Views
4,374
Views on SlideShare
4,374
Embed Views
0

Actions

Likes
5
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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?

Debugging mobile websites and web apps Debugging mobile websites and web apps Presentation Transcript

  • Debugging Mobile Websites and Web Apps Mihai Corlan | Web Developer Evangelist | Adobe© 2011 Adobe Systems Incorporated.
  • About Me Mihai Corlan  Adobe Web Developer Evangelist  Blog: http://corlan.org  Twitter: mcorlan  Email: mcorlan@adobe.com 2© 2011 Adobe Systems Incorporated.
  • Agenda  Google Chrome for Android  weinre  Adobe Shadow© 2011 Adobe Systems Incorporated. View slide
  • 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. View slide
  • Google Chrome for Android 4© 2011 Adobe Systems Incorporated.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • Adobe Shadow supports  Windows and Mac OS  You have to use Chrome on your computer/laptop  iOS and Android devices© 2011 Adobe Systems Incorporated.
  • 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.
  • Thank You! Question & Answers Time! http://corlan.org http://twitter.com/mcorlan http://github.com/mcorlan mcorlan@adobe.com© 2011 Adobe Systems Incorporated.
  • © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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.