debugging mobile web apps

for: 2012 Mobile JavaScript Summit
November 12 2012

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

what

This presentation will cover:

• tools that can be used to debug ...
• ... mobile web apps

what's a 'mobile web app'?

• web pages running in a mobile browser
• native app that uses a 'web control' (eg, Apache Cordova, Adobe PhoneGap, IBM Worklight, etc)

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

• works just like Chrome Dev Tools
• should just work on modern RIM devices since PlayBook

links

• [RIM docs]

iOS

Real remote Web Inspector like Safari 6 Web Inspector

• "like Safari 6 Web Inspector" not neccessarily a good thing, wrt UI
• only on iOS 6
• must use Safari 6 as the client
• must have the latest Xcode

links

• [Apple docs]

Android

Real remote Web Inspector like Chrome Dev Tools

• enabled for Chrome/Android only
• not enabled for WebView
• so won't work with Cordova :-(

links

• [Google docs]

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

• [Mozilla docs]

simulators

ripple

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

• supports using WebWorks and Cordova APIs
• supports JavaScript debugging

links

• [RIM docs]
• [Apache Incubator docs]

r2d2b2g

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

links

• [Mozilla intro docs]
• [Mozilla announcement of r2d2b2g becoming the Firefox OS Simulator]

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

• [JS Bin docs]
• [JS Bin and Cordova apps???]

aardwolf

From the web site:

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

• only cross-platform tool to debug JavaScript
• instruments your code before running it

links

• [Aardwolf docs]

jsfiddle

Popular HTML, CSS, JavaScript snippet testing environment

• includes "Run" option to debug with weinre via the busy, busy public weinre server at debug.phonegap.com

links

• [jsFiddle]
• [jsFiddle docs]

Adobe Edge Inspect

Preview and inspect web designs on mobile devices.

• besides lots of other goodies, embeds weinre functionality
• hosted service, part of Adobe Creative Cloud
• free for one concurrent connection, $$$ for more than one

links

• [Adobe docs]

rsprofiler

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

• can be used wherever you can use Safari 6 desktop or iOS 6 remote debug
• currently displays profile data as an interactive flame graph

links

• [static rsprofiler demo]
• [rsprofiler at github]

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

• for iOS 5 simulator only
• not everything works correctly
• JAVASCRIPT SOURCE DEBUGGING WORKS
• if you have Safari 6.0 installed (you probably do):
  • you'll need to install and use old version of Chromium for your debug client; see the iWebInspector help page for more info.

links

• [iWebInspector docs]

weinre

• UI and a lot of function from Web Inspector
• mainly for WebKit-based browsers, other platforms being tinkered with
• NO JAVASCRIPT SOURCE DEBUGGING
• run the weinre server on your desktop box
  • or find a weinre server on the internets
• install via sudo npm -g install weinre

links

• [weinre docs]

weinre tips and tricks

• use --verbose and --debug when things are b0rken
• did you use the --boundHost option?
• are your device and desktop on the same network?
• does the demo shipped with weinre work?

For issues with Cordova, PhoneGap, Worklight:

• switch order of the <script src=> entries for weinre.js and cordova.js
• did you add your weinre server to the white-list?

demo time!

weinre movies here:

• http://www.youtube.com/results?search_query=weinre

old rsprofiler movie here:

• http://www.youtube.com/watch?v=ZbpS9QYbGvw

contribute to weinre!

• report a bug
• request a new feature
• hack some stuff:
  • doc
  • code:
    • replace XHR transport with socket.io
    • help with Windows Phone 7 support
    • help with media query support
    • whatever!

questions?