debugging mobile web apps

for: GOTO Nights Chicago - January 22 2013

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

what

This presentation will cover:

• what is a mobile web app
• what tools are available for debugging them
• a demo of the weinre debugger
• how the weinre debugger works

what is a 'mobile web app'?

• web pages running in a mobile browser
  • aka "web pages" or "web site"
  • aka "browser app"
• native app that uses a 'web control'
  • aka "hybrid app"
  • primarily implemented in HTML / CSS / JS
  • eg, Adobe PhoneGap, IBM Worklight (both built on Apache Cordova)
  • see Fil Maj preso: "PhoneGap: Hybrid Application Framework"

debug tools by 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]

debugging tools for platform 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]

platform agnostic debugging 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!

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!

how weinre works

weinre is a web server

targets connect by:

• adding a <script> element pointing to the server
• using a bookmarklet to add the script

clients connect by:

• browsing to the server like any other site

server supports CORS so that target can XHR to a cross-origin host (the weinre server)

client and target use long-polling to enable messaging to/from the server

weinre connections

example messages sent

• from client to target: (command)
  • CSS.getStylesForNode()
  • callback will send result from target to client
• from target to client: (event)
  • DOMNotify.childNodeInserted()

Messages defined as functions described in WebIDL.

• ~20 interfaces from Web Inspector
• 6 more interfaces for weinre

example message interface

module weinre {

    interface WeinreTargetCommands {

        void registerTarget(int url, out string targetId);

        void sendClientCallback(string callbackId, Object args);

        void logDebug(   in string message );
        void logInfo(    in string message );
        void logWarning( in string message );
        void logError(   in string message );

    };

}
                

lots of messages sent quickly, sometimes

things replaced

window.clearInterval() window.clearTimeout() window.setInterval() window.setTimeout()

window.addEventListener() Node.addEventListener()

XMLHttpRequest.open() XMLHttpRequest.send() XMLHttpRequest.addEventListener()

window.openDatabase() window.console()

LocalStorage.setItem() LocalStorage.removeItem() LocalStorage.clear()

SessionStorage.setItem() SessionStorage.removeItem() SessionStorage.clear()

questions?