Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Debugging Web Apps on Real Mobile Devices
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?
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
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
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...
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
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
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
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-
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>
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
