1. Debugging web apps on mobile devices
Dale Lane
http://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 haven't 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
● WebKit's 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 support
http://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 it
Patrick Mueller
Emerging Technologies
Specialist, IBM
@pmuellr
http://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: jsconsole
http://www.jsconsole.com/remote-debugging.html

68. An alternative: Opera DragonFly
http://opera.com/dragonfly/documentation/remote/

69. An alternative: BlackBerry Playbook
http://devblog.blackberry.com/2011/06/
debugging-blackberry-web-apps/

70. An alternative: socketbug
http://socketbug.com/

71. Any questions?
Dale Lane
@dalelane