debugging mobile web apps

for: IBM internal Tech Talk - January 10 2013

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

etc

canonical links to presentation

slide template

html5slides - http://code.google.com/p/html5slides/

last modified

what

This presentation will cover:

what is a mobile web app
what tools are available for debugging them
weinre war stories

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"

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]

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

r2d2b2g

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

links

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

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

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

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?

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!

long term goal

the purpose of the PhoneGap project is for PhoneGap to cease to exist

Brian LeRoux

long term goal

same for weinre:

"cease to exist"
platforms will provide the real thing someday

short term goals:

explore the additional work-flow involved in remote debugging on mobile devices
embarass WebKit Web Inspector developers to finish and release remote debugger for mobile

pick a good name

There are only two hard things in Computer Science: cache invalidation and naming things.

Phil Karlton

pick a good name

more from Phil Karlton: YAILWAD (Yet another interpreted language without a debugger)

pick a good name

original name, remwi - REMote Web Inspector

tips:

google's well
pronounceable

Example: Apache Callback lasted a few weeks, renamed to Apache Cordova.

pick a good name

weinre is WEb INspector REmote. Pronounced like the word 'winery'. Or maybe like the word 'weiner'. Who knows, really.

weinre tag line

language usage

server:

first implemented in Python
then ported to Java (using Jetty)
then ported to CoffeeScript on node.js

client/target:

first implemented in JavaScript
then ported to scoop
then ported to CoffeeScript

language usage

why change languages?

ported from Python to Java for enterprisey-ness
ported from Java to node.js to pick up more contributors
ported from JS to scoop to eliminate OO boilerplate
ported from scoop to CoffeeScript to pick up more contributors

port from scoop to CoffeeScript was automated with js2coffee

language usage: JavaScript

//---------------------------------------------------------
function Animal(name) {
    this.init(name)
}

Animal.prototype.init = function(name) {
    this.name = name
}

Animal.prototype.answer = function(string) {
    console.log(this.constructor.name + " " + this.name + ": " + string)
}

Animal.prototype.talk = function() {
    this.answer("I can't talk")
}

//---------------------------------------------------------
function Fish(name) {
    Animal.call(this, name)
}

Fish.prototype.__proto__ = Animal.prototype

//---------------------------------------------------------
function Cat(name) {
    Animal.call(this, name)
}

Cat.prototype.talk = function() {
    this.answer("meow")
}

Cat.prototype.__proto__ = Animal.prototype

language usage: scoop

//---------------------------------------------------------
class Animal(name)
    this.init(name)

method init(name)
    this.name = name

method answer(string)
    console.log(this.constructor.name + " " + this.name + ": " + string)

method talk()
    this.answer("I can't talk")

//---------------------------------------------------------
class Fish(name) << Animal
    super(name)

//---------------------------------------------------------
class Cat(name) << Animal
    super(name)

method talk()
    this.answer("meow")

language usage: CoffeeScript

#---------------------------------------------------------
class Animal
    constructor: (aName) ->
        @init(aName)

    init: (aName) ->
        @name = aName

    answer: (string) ->
        console.log "#{@constructor.name} #{@name}: #{string}"

    talk: ->
        @answer "I can't talk"

#---------------------------------------------------------
class Fish extends Animal
    constructor: (aName) ->
        super

#---------------------------------------------------------
class Cat extends Animal
    constructor: (aName) ->
        super

    talk: ->
        @answer "meow"

pick a good home

internal IBM repo
github.com/pmuellr/weinre
github.com/phonegap/weinre
github.com/callback/weinre
github.com/cordova/weinre
apache.org/incubator-cordova-weinre.git
apache.org/cordova-weinre.git

I'm still fixing links

make it easy to install and run

$ sudo npm -g install weinre

...

$ weinre

weinre: starting server ...

...

great artists steal

Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different.

- T.S. Eliot 1921, from "Philip Massinger" in "The Sacred Wood".

great artists steal

source code:

2000 KB of Web Inspector
- 1900 KB of JS
- 152 KB of CSS
302 KB of weinre
- 84 KB of server code
- 218 KB of browser code
(1900 KB of node modules)

security

weinre is:

a web server
that can support many simultaneous target devices and debug clients
people host it "in the clouds"

So, what's the security story?

security smecurity

"About security for weinre: there is none."

online weinre doc - Security

security smecurity

One significant question regarding weinre security on the mailing list
No bug reports, feature requests, or pull requests
NO PROBLEM

Biggest potential problem, leaving your weinre injection script in your HTML, in your product, on the public web. I have seen it.

<script src="http://localhost:8080/target/target-script.js"></script>

security smecurity

what to do about it:

use Bookmarkets instead of literal script elements
use your server's middleware to add the script element, eg rack-weinre
Rather than use some other public weinre server, run your own weinre server on the public internets for free.

security smecurity

biggest "security" pain in the ass:

"use strict"

waiting for someone to care enough to send a pull request:

Jira CB-604 - weinre doesn't work in strict mode

"good news everyone":

bootstrap 2.2.2 ships with "use strict" on

debugging mobile web apps

etc

what

what is a 'mobile web app'?

debug tools by platforms

RIM

iOS

Android

Windows

Boot to Gecko / Firefox OS

debugging tools for platform simulators

ripple

r2d2b2g

platform agnostic debugging tools

jsbin

aardwolf

jsfiddle

Adobe Edge Inspect

rsprofiler

rsprofiler demo source

rsprofiler demo flame graph

weinre

weinre tips and tricks

demo time!

contribute to weinre!

weinre war stories

long term goal

long term goal

pick a good name

pick a good name

pick a good name

pick a good name

language usage

language usage

language usage: JavaScript

language usage: scoop

language usage: CoffeeScript

pick a good home

make it easy to install and run

great artists steal

great artists steal

security

security smecurity

security smecurity

security smecurity

security smecurity

questions?