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

16,298

Published on

Published in: Technology, Design
1 Comment
8 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
16,298
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
45
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×