Debugging Web Apps on Real Mobile Devices

17,467 views

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
17,467
On SlideShare
0
From Embeds
0
Number of Embeds
10,853
Actions
Shares
0
Downloads
49
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

×