Your SlideShare is downloading. ×
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Debugging Web Apps on Real Mobile Devices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Debugging Web Apps on Real Mobile Devices

15,850

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
15,850
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
45
Comments
1
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Debugging web apps on mobile devicesDale Lanehttp://dalelane.co.uk/blog@dalelane
  • 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. Who are you?● You know web development● You havent worked out all the tricks for developing web apps for mobile, yet● Right?
  • 4. Web debugging on the desktop● What tools are available?
  • 5. Web debugging on the desktop● Firebug
  • 6. Web debugging on the desktop● WebKit Web Inspector
  • 7. Web debugging on the desktop● IE Development Tools
  • 8. Web debugging on the desktop● What do we use them for?
  • 9. Web debugging on the desktop● What do we use them for? ● Stepping through code
  • 10. Web debugging on the desktop
  • 11. Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, debug, info, error, dir ...
  • 12. Web debugging on the desktop
  • 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. Web debugging on the desktop
  • 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. Web debugging on the desktop
  • 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. Web debugging on mobile● alerts● console on Mobile Safari
  • 19. weinre● Web Inspector Remote
  • 20. weinre● Open source
  • 21. weinre● Demo time
  • 22. weinre● Demo time ● View the DOM
  • 23. weinre
  • 24. weinre● Demo time ● View the DOM – Select parts of the page – View style properties of page elements
  • 25. weinre● Demo time ● View the DOM ● Edit the DOM
  • 26. weinre
  • 27. weinre● Demo time ● View the DOM ● Edit the DOM – Edit text in the page – Edit style of something – Disable CSS rules
  • 28. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console
  • 29. weinre
  • 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. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace
  • 32. weinre
  • 33. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace – Console log, error, debug
  • 34. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage
  • 35. weinre
  • 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. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing
  • 38. weinre
  • 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. weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing
  • 41. How does it work?● Three parts: ● Debug target ● Server ● Client
  • 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. How does it work – server?● A Java server built using Jetty
  • 44. How does it work – client?
  • 45. How does it work?● Three parts: ● Debug target ● Server ● Client
  • 46. How does it work?● In the future... http://code.google.com/chrome/devtools/docs/remote-debugging.html
  • 47. What does it use?● Apache CLI● Jetty● Apache Wink JSON4J● WebKits Web Inspector
  • 48. What is supported?● Supported: ● DOM and CSS inspector ● localStorage and WebSQL inspector ● Event timeline ● console
  • 49. What is supported?● Not supported:
  • 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. How to run it on your own machine$ java -jar weinre.jar –-boundHost -all-
  • 52. How to run it on your own machine
  • 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. 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. How to run it on a Mac
  • 56. How to let someone else run it
  • 57. How to inject it into a web page
  • 58. Platform supporthttp://mobilehtml5.org/
  • 59. Where to go● Discussion ● http://groups.google.com/group/weinre
  • 60. Where to go● Source and issues ● https://github.com/phonegap/weinre
  • 61. Where to go● Documentation ● http://phonegap.github.com/weinre/
  • 62. Where to go● Documentation ● http://code.google.com/chrome/devtools/docs/overview.html
  • 63. Where to go ● Download ● http://phonegap.github.com/weinre/https://github.com/phonegap/weinre/archives/master
  • 64. Thanks – for creating itPatrick MuellerEmerging TechnologiesSpecialist, IBM@pmuellrhttp://muellerware.org/
  • 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. Thanks – for introducing me to it James Thomas Emerging Technologies Specialist, IBM @thomasj http://vimeo.com/26258998
  • 67. An alternative: jsconsolehttp://www.jsconsole.com/remote-debugging.html
  • 68. An alternative: Opera DragonFlyhttp://opera.com/dragonfly/documentation/remote/
  • 69. An alternative: BlackBerry Playbook http://devblog.blackberry.com/2011/06/ debugging-blackberry-web-apps/
  • 70. An alternative: socketbughttp://socketbug.com/
  • 71. Any questions?Dale Lane@dalelane

×