debugging mobile web apps

for: 2012 Mobile JavaScript Summit
November 12 2012

by:   Patrick Mueller
@pmuellr
http://muellerware.org/

etc

canonical links to presentation http://muellerware.org/papers/mjs-2012-11/index.html
http://dl.dropbox.com/u/2192156/Papers/mjs-2012-11/index.html

slide template html5slides http://code.google.com/p/html5slides/

what

This presentation will cover:

what's a 'mobile web app'?

Basically, an app that uses modern HTML, CSS and JavaScript on a mobile device.

platforms

RIM

first mobile platform vendor to ship real remote Web Inspector implementation from WebKit

links

iOS

Real remote Web Inspector like Safari 6 Web Inspector

links

Android

Real remote Web Inspector like Chrome Dev Tools

links

Windows

???

Ongoing work to get weinre running on Windows Phone.

Boot to Gecko / Firefox OS

Runs applications implemented entirely in HTML, CSS and JavaScript. [link]

Also see the slide on r2d2b2g in this presentation.

links

simulators

ripple

Chrome extension allowing you to quickly see how your application looks and functions on multiple mobile devices and platforms.

links

r2d2b2g

Firefox extension to run the Boot to Gecko desktop and apps within Firefox.

links

tools

jsbin

From the web site:

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.

links

aardwolf

From the web site:

Aardwolf is a remote JavaScript debugger for iPhone / Android / WindowsPhone 7 / BlackBerry OS 6+. It is written in JavaScript.

links

jsfiddle

Popular HTML, CSS, JavaScript snippet testing environment

links

Adobe Edge Inspect

Preview and inspect web designs on mobile devices.

links

rsprofiler

proof-of-concept project for extracting and displaying dtrace-ishly precise JavaScript performance profiling

links

rsprofiler demo source

function run() {
    rsprofiler.start("jquery profile")
    runTests()
    rsprofiler.stop(function(err) { ... })
}

function runTests() {
    for (var i=0; i<40; i++) { runTestsDiv1(); runTestsSpan1() }
}

function runTestsDiv1() {
    for (var i=0; i<1000; i++) { $("#div-1").text() }
}

function runTestsSpan1() {
    for (var i=0; i<1000; i++) { $("#span-1").text($("#span-1").text()) }
}
                

rsprofiler demo flame graph

Hover over a box! Click a box!



            

iWebInspector

Debug using real remote Web Inspector for iOS 5 simulator

links

weinre

links

weinre tips and tricks

For issues with Cordova, PhoneGap, Worklight:

demo time!

weinre movies here:

old rsprofiler movie here:

contribute to weinre!

questions?