View
15.689
Download
1
Category
Preview:
Citation preview
Debugging web apps on mobile devices
Dale Lane
http://dalelane.co.uk/blog
@dalelane
Who am I?
● Native mobile developer since 1999
● Palm OS
● Pocket PC
● BlackBerry
● Android
● Web developer for desktops since 1999
● jQuery
● Dojo
● Mobile web developer since 2011...
● jQuery Mobile
● Dojo Mobile
● Emerging Technologies Specialist for IBM
Who are you?
● You know web development● You haven't worked out all the tricks for
developing web apps for mobile, yet
● Right?
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, error, dir ...
Web debugging on the desktop
Web debugging on the desktop
● What do we use them for?
● Stepping through code● Console log, debug, info, error, dir …● Evaluating at the console
Web debugging on the desktop
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
Web debugging on the desktop
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...
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 elements
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 something– Disable CSS rules
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– Alerts that pop up on the phone– Edit the page using document access– Run a function on the page
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
– Console log, error, debug
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
– Inspect local and session storage– Edit storage items
weinre
● Demo time
● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage● Timing
weinre
weinre
● Demo time
● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage● Timing
– Show events from timer and replay– console.markTimeline
weinre
● Demo time
● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage● Timing
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 JavaScript
functions to send output to...
http://code.google.com/chrome/devtools/docs/remote-debugging.html
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● WebKit's Web Inspector
What is supported?
● Supported:● DOM and CSS inspector● localStorage and WebSQL inspector● Event timeline● console
● Not supported:
What is supported?
How to use it
<html>
</html>
<head>
</head>
<body>
</body>
<script src=”...”><script src=”http://yourhost:8080/target/target-script-min.js”></script>
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>
</html>
<head>
</head>
<body>
</body>
<script src=”...”><script src=”http://9.12.229.221:8080/target/target-script-min.js”></script>
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>
How to run it on a Mac
How to let someone else run it
How to inject it into a web page
Platform support
http://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 it
Patrick Mueller
Emerging Technologies Specialist, IBM
@pmuellr
http://muellerware.org/
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
Thanks – for introducing me to it
James Thomas
Emerging Technologies Specialist, IBM
@thomasj
http://vimeo.com/26258998
An alternative: jsconsole
http://www.jsconsole.com/remote-debugging.html
An alternative: Opera DragonFly
http://opera.com/dragonfly/documentation/remote/
An alternative: BlackBerry Playbook
http://devblog.blackberry.com/2011/06/debugging-blackberry-web-apps/
Any questions?
Dale Lane
@dalelane
Recommended