71
Debugging web apps on mobile devices Dale Lane http://dalelane.co.uk/blog @dalelane

Debugging Web Apps on Real Mobile Devices

Embed Size (px)

Citation preview

Page 1: Debugging Web Apps on Real Mobile Devices

Debugging web apps on mobile devices

Dale Lane

http://dalelane.co.uk/blog

@dalelane

Page 2: Debugging Web Apps on Real Mobile Devices

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

Page 3: Debugging Web Apps on Real Mobile Devices

Who are you?

● You know web development● You haven't worked out all the tricks for

developing web apps for mobile, yet

● Right?

Page 4: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● What tools are available?

Page 5: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● Firebug

Page 6: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● WebKit Web Inspector

Page 7: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● IE Development Tools

Page 8: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● What do we use them for?

Page 9: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● What do we use them for?

● Stepping through code

Page 10: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

Page 11: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● What do we use them for?

● Stepping through code● Console log, debug, info, error, dir ...

Page 12: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

Page 13: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

● What do we use them for?

● Stepping through code● Console log, debug, info, error, dir …● Evaluating at the console

Page 14: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

Page 15: Debugging Web Apps on Real Mobile Devices

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

Page 16: Debugging Web Apps on Real Mobile Devices

Web debugging on the desktop

Page 17: Debugging Web Apps on Real Mobile Devices

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...

Page 18: Debugging Web Apps on Real Mobile Devices

Web debugging on mobile

● alerts

● console on Mobile Safari

Page 19: Debugging Web Apps on Real Mobile Devices

weinre

● Web Inspector Remote

Page 20: Debugging Web Apps on Real Mobile Devices

weinre

● Open source

Page 21: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

Page 22: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM

Page 23: Debugging Web Apps on Real Mobile Devices

weinre

Page 24: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM– Select parts of the page– View style properties of page elements

Page 25: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM

Page 26: Debugging Web Apps on Real Mobile Devices

weinre

Page 27: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM

– Edit text in the page– Edit style of something– Disable CSS rules

Page 28: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console

Page 29: Debugging Web Apps on Real Mobile Devices

weinre

Page 30: Debugging Web Apps on Real Mobile Devices

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

Page 31: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console● Log and trace

Page 32: Debugging Web Apps on Real Mobile Devices

weinre

Page 33: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console● Log and trace

– Console log, error, debug

Page 34: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage

Page 35: Debugging Web Apps on Real Mobile Devices

weinre

Page 36: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage

– Inspect local and session storage– Edit storage items

Page 37: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage● Timing

Page 38: Debugging Web Apps on Real Mobile Devices

weinre

Page 39: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage● Timing

– Show events from timer and replay– console.markTimeline

Page 40: Debugging Web Apps on Real Mobile Devices

weinre

● Demo time

● View the DOM● Edit the DOM● Interactive console● Log and trace● Storage● Timing

Page 41: Debugging Web Apps on Real Mobile Devices

How does it work?

● Three parts:

● Debug target● Server● Client

Page 42: Debugging Web Apps on Real Mobile Devices

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

Page 43: Debugging Web Apps on Real Mobile Devices

How does it work – server?

● A Java server built using Jetty

Page 44: Debugging Web Apps on Real Mobile Devices

How does it work – client?

Page 45: Debugging Web Apps on Real Mobile Devices

How does it work?

● Three parts:

● Debug target● Server● Client

Page 46: Debugging Web Apps on Real Mobile Devices

How does it work?

● In the future...

http://code.google.com/chrome/devtools/docs/remote-debugging.html

Page 47: Debugging Web Apps on Real Mobile Devices

What does it use?

● Apache CLI● Jetty● Apache Wink JSON4J● WebKit's Web Inspector

Page 48: Debugging Web Apps on Real Mobile Devices

What is supported?

● Supported:● DOM and CSS inspector● localStorage and WebSQL inspector● Event timeline● console

Page 49: Debugging Web Apps on Real Mobile Devices

● Not supported:

What is supported?

Page 50: Debugging Web Apps on Real Mobile Devices

How to use it

<html>

</html>

<head>

</head>

<body>

</body>

<script src=”...”><script src=”http://yourhost:8080/target/target-script-min.js”></script>

Page 51: Debugging Web Apps on Real Mobile Devices

How to run it on your own machine

$ java -jar weinre.jar –-boundHost -all-

Page 52: Debugging Web Apps on Real Mobile Devices

How to run it on your own machine

Page 53: Debugging Web Apps on Real Mobile Devices

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>

Page 54: Debugging Web Apps on Real Mobile Devices

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>

Page 55: Debugging Web Apps on Real Mobile Devices

How to run it on a Mac

Page 56: Debugging Web Apps on Real Mobile Devices

How to let someone else run it

Page 57: Debugging Web Apps on Real Mobile Devices

How to inject it into a web page

Page 58: Debugging Web Apps on Real Mobile Devices

Platform support

http://mobilehtml5.org/

Page 59: Debugging Web Apps on Real Mobile Devices

Where to go

● Discussion

● http://groups.google.com/group/weinre

Page 60: Debugging Web Apps on Real Mobile Devices

Where to go

● Source and issues

● https://github.com/phonegap/weinre

Page 61: Debugging Web Apps on Real Mobile Devices

Where to go

● Documentation

● http://phonegap.github.com/weinre/

Page 62: Debugging Web Apps on Real Mobile Devices

Where to go

● Documentation● http://code.google.com/chrome/devtools/docs/overview.html

Page 63: Debugging Web Apps on Real Mobile Devices

Where to go

● Download

● http://phonegap.github.com/weinre/

https://github.com/phonegap/weinre/archives/master

Page 64: Debugging Web Apps on Real Mobile Devices

Thanks – for creating it

Patrick Mueller

Emerging Technologies Specialist, IBM

@pmuellr

http://muellerware.org/

Page 65: Debugging Web Apps on Real Mobile Devices

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

Page 66: Debugging Web Apps on Real Mobile Devices

Thanks – for introducing me to it

James Thomas

Emerging Technologies Specialist, IBM

@thomasj

http://vimeo.com/26258998

Page 67: Debugging Web Apps on Real Mobile Devices

An alternative: jsconsole

http://www.jsconsole.com/remote-debugging.html

Page 68: Debugging Web Apps on Real Mobile Devices

An alternative: Opera DragonFly

http://opera.com/dragonfly/documentation/remote/

Page 69: Debugging Web Apps on Real Mobile Devices

An alternative: BlackBerry Playbook

http://devblog.blackberry.com/2011/06/debugging-blackberry-web-apps/

Page 70: Debugging Web Apps on Real Mobile Devices

An alternative: socketbug

http://socketbug.com/

Page 71: Debugging Web Apps on Real Mobile Devices

Any questions?

Dale Lane

@dalelane