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 web apps on mobile devicesDale Lanehttp://dalelane.co.uk/blog@dalelane
Who am I?●   Emerging Technologies Specialist for IBM●   Native mobile developer                ●   Web developer for    s...
Who are you?●   You know web development●   You havent worked out all the tricks for    developing web apps for mobile, ye...
Web debugging on the desktop●   What tools are available?
Web debugging on the desktop●   Firebug
Web debugging on the desktop●   WebKit Web Inspector
Web debugging on the desktop●   IE Development Tools
Web debugging on the desktop●   What do we use them for?
Web debugging on the desktop●   What do we use them for?    ●   Stepping through code
Web debugging on the desktop
Web debugging on the desktop●   What do we use them for?    ●   Stepping through code    ●   Console log, debug, info, err...
Web debugging on the desktop
Web debugging on the desktop●   What do we use them for?    ●   Stepping through code    ●   Console log, debug, info, err...
Web debugging on the desktop
Web debugging on the desktop●   What do we use them for?    ●   Stepping through code    ●   Console log, debug, info, err...
Web debugging on the desktop
Web debugging on the desktop●   What do we use them for?    ●   Stepping through code    ●   Console log, err, dir …    ● ...
Web debugging on mobile●   alerts●   console on Mobile    Safari
weinre●   Web Inspector Remote
weinre●   Open source
weinre●   Demo time
weinre●   Demo time    ●   View the DOM
weinre
weinre●   Demo time    ●   View the DOM        –   Select parts of the page        –   View style properties of page eleme...
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM
weinre
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM        –   Edit text in the page        –   Edit style of some...
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console
weinre
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console        –   Tab complete        –   ...
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console    ●   Log and trace
weinre
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console    ●   Log and trace        –   Con...
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console    ●   Log and trace    ●   Storage
weinre
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console    ●   Log and trace    ●   Storage...
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console    ●   Log and trace    ●   Storage...
weinre
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console    ●   Log and trace    ●   Storage...
weinre●   Demo time    ●   View the DOM    ●   Edit the DOM    ●   Interactive console    ●   Log and trace    ●   Storage...
How does it work?●   Three parts:    ●   Debug target    ●   Server    ●   Client
How does it work – debug target?    ●   Your webpage + some weinre-specific JS        ●   Client-side hooks overriding Jav...
How does it work – server?●   A Java server built using Jetty
How does it work – client?
How does it work?●   Three parts:    ●   Debug target    ●   Server    ●   Client
How does it work?●   In the future...               http://code.google.com/chrome/devtools/docs/remote-debugging.html
What does it use?●   Apache CLI●   Jetty●   Apache Wink JSON4J●   WebKits Web Inspector
What is supported?●   Supported:    ●   DOM and CSS inspector    ●   localStorage and WebSQL inspector    ●   Event timeli...
What is supported?●   Not supported:
How to use it<html><head>                 <script   <script src=”...”>                 src=”http://yourhost:8080/target/ta...
How to run it on your own machine$ java -jar weinre.jar –-boundHost -all-
How to run it on your own machine
How to run it on your own machine<html><head>                 <script   <script src=”...”>                 src=”http://9.1...
How to run it on your own machine                           A tip for debugging on the Android emulator... <script src="ht...
How to run it on a Mac
How to let someone else run it
How to inject it into a web page
Platform supporthttp://mobilehtml5.org/
Where to go●   Discussion    ●   http://groups.google.com/group/weinre
Where to go●   Source and issues    ●   https://github.com/phonegap/weinre
Where to go●   Documentation    ●   http://phonegap.github.com/weinre/
Where to go●   Documentation    ●   http://code.google.com/chrome/devtools/docs/overview.html
Where to go   ●   Download       ●   http://phonegap.github.com/weinre/https://github.com/phonegap/weinre/archives/master
Thanks – for creating itPatrick MuellerEmerging TechnologiesSpecialist, IBM@pmuellrhttp://muellerware.org/
Thanks – for introducing me to it Making a web app for iPhone back in January – that kept crashing Mobile Safari...       ...
Thanks – for introducing me to it                                James Thomas                                Emerging Tech...
An alternative: jsconsolehttp://www.jsconsole.com/remote-debugging.html
An alternative: Opera DragonFlyhttp://opera.com/dragonfly/documentation/remote/
An alternative: BlackBerry Playbook     http://devblog.blackberry.com/2011/06/           debugging-blackberry-web-apps/
An alternative: socketbughttp://socketbug.com/
Any questions?Dale Lane@dalelane
Upcoming SlideShare
Loading in …5
×

Debugging Web Apps on Real Mobile Devices

18,018 views

Published on

Published in: Technology, Design
  • Here is another web based debugging tool that I'm working on : www.farjs.com It uses bookmarklet to inject the debugging code to a mobile device.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Debugging Web Apps on Real Mobile Devices

  1. 1. Debugging web apps on mobile devicesDale Lanehttp://dalelane.co.uk/blog@dalelane
  2. 2. Who am I?● Emerging Technologies Specialist for IBM● Native mobile developer ● Web developer for since 1999 desktops since 1999 ● Palm OS ● jQuery ● Pocket PC ● Dojo ● BlackBerry ● Android ● Mobile web developer since 2011... ● jQuery Mobile ● Dojo Mobile
  3. 3. Who are you?● You know web development● You havent worked out all the tricks for developing web apps for mobile, yet● Right?
  4. 4. Web debugging on the desktop● What tools are available?
  5. 5. Web debugging on the desktop● Firebug
  6. 6. Web debugging on the desktop● WebKit Web Inspector
  7. 7. Web debugging on the desktop● IE Development Tools
  8. 8. Web debugging on the desktop● What do we use them for?
  9. 9. Web debugging on the desktop● What do we use them for? ● Stepping through code
  10. 10. Web debugging on the desktop
  11. 11. Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, debug, info, error, dir ...
  12. 12. Web debugging on the desktop
  13. 13. Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, debug, info, error, dir … ● Evaluating at the console
  14. 14. Web debugging on the desktop
  15. 15. Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, debug, info, error, dir … ● Evaluating at the console ● Manipulating and querying the DOM
  16. 16. Web debugging on the desktop
  17. 17. Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, err, dir … ● Evaluating at the console ● Manipulating and querying the DOM ● etc...
  18. 18. Web debugging on mobile● alerts● console on Mobile Safari
  19. 19. weinre● Web Inspector Remote
  20. 20. weinre● Open source
  21. 21. weinre● Demo time
  22. 22. weinre● Demo time ● View the DOM
  23. 23. weinre
  24. 24. weinre● Demo time ● View the DOM – Select parts of the page – View style properties of page elements
  25. 25. weinre● Demo time ● View the DOM ● Edit the DOM
  26. 26. weinre
  27. 27. weinre● Demo time ● View the DOM ● Edit the DOM – Edit text in the page – Edit style of something – Disable CSS rules
  28. 28. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console
  29. 29. weinre
  30. 30. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console – Tab complete – Alerts that pop up on the phone – Edit the page using document access – Run a function on the page
  31. 31. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace
  32. 32. weinre
  33. 33. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace – Console log, error, debug
  34. 34. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage
  35. 35. weinre
  36. 36. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage – Inspect local and session storage – Edit storage items
  37. 37. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing
  38. 38. weinre
  39. 39. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing – Show events from timer and replay – console.markTimeline
  40. 40. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing
  41. 41. How does it work?● Three parts: ● Debug target ● Server ● Client
  42. 42. How does it work – debug target? ● Your webpage + some weinre-specific JS ● Client-side hooks overriding JavaScript functions to send output to...http://code.google.com/chrome/devtools/docs/remote-debugging.html
  43. 43. How does it work – server?● A Java server built using Jetty
  44. 44. How does it work – client?
  45. 45. How does it work?● Three parts: ● Debug target ● Server ● Client
  46. 46. How does it work?● In the future... http://code.google.com/chrome/devtools/docs/remote-debugging.html
  47. 47. What does it use?● Apache CLI● Jetty● Apache Wink JSON4J● WebKits Web Inspector
  48. 48. What is supported?● Supported: ● DOM and CSS inspector ● localStorage and WebSQL inspector ● Event timeline ● console
  49. 49. What is supported?● Not supported:
  50. 50. How to use it<html><head> <script <script src=”...”> src=”http://yourhost:8080/target/target</head> -script-min.js”></script><body></body></html>
  51. 51. How to run it on your own machine$ java -jar weinre.jar –-boundHost -all-
  52. 52. How to run it on your own machine
  53. 53. How to run it on your own machine<html><head> <script <script src=”...”> src=”http://9.12.229.221:8080/target/ta</head> rget-script-min.js”></script><body></body></html>
  54. 54. How to run it on your own machine A tip for debugging on the Android emulator... <script src="http://10.0.2.2:8080/target/target-script-min.js"></script>
  55. 55. How to run it on a Mac
  56. 56. How to let someone else run it
  57. 57. How to inject it into a web page
  58. 58. Platform supporthttp://mobilehtml5.org/
  59. 59. Where to go● Discussion ● http://groups.google.com/group/weinre
  60. 60. Where to go● Source and issues ● https://github.com/phonegap/weinre
  61. 61. Where to go● Documentation ● http://phonegap.github.com/weinre/
  62. 62. Where to go● Documentation ● http://code.google.com/chrome/devtools/docs/overview.html
  63. 63. Where to go ● Download ● http://phonegap.github.com/weinre/https://github.com/phonegap/weinre/archives/master
  64. 64. Thanks – for creating itPatrick MuellerEmerging TechnologiesSpecialist, IBM@pmuellrhttp://muellerware.org/
  65. 65. Thanks – for introducing me to it Making a web app for iPhone back in January – that kept crashing Mobile Safari... The app:http://dalelane.co.uk/blog/?p=1625 Investigating the crashes:http://dalelane.co.uk/blog/?p=1652
  66. 66. Thanks – for introducing me to it James Thomas Emerging Technologies Specialist, IBM @thomasj http://vimeo.com/26258998
  67. 67. An alternative: jsconsolehttp://www.jsconsole.com/remote-debugging.html
  68. 68. An alternative: Opera DragonFlyhttp://opera.com/dragonfly/documentation/remote/
  69. 69. An alternative: BlackBerry Playbook http://devblog.blackberry.com/2011/06/ debugging-blackberry-web-apps/
  70. 70. An alternative: socketbughttp://socketbug.com/
  71. 71. Any questions?Dale Lane@dalelane

×