ross boucher - quality control: testing and debugging your apps

TESTING & DEBUGGING MOBILE WEB APPSWEB DIRECTIONS UNPLUGGEDSEATTLE, 2011

UNIFIED WORKFLOW

alert()

I suspect that most JavaScript developers out there are a lot like me... We want to be able to pause our scripts, look at the call stack, and step through them one line at a time, but it's easier to just use "alert debugging" than to fire up a big clunky debugger.

- JOE HEWITT, 2006

console.log()

•console.•log()•warn()•error()

•copy()

•inspect()

•$0, $1, $2, $3

ELEMENT INSPECTOR

RESOURCE INSPECTOR

NETWORK INSPECTOR

JAVASCRIPT DEBUGGER

PAGETIMELINE

JAVASCRIPT PROFILER

aFunction

F1

F2

F01

9

1

8

78 7

1

1

aFunction

F1

F2

F01

9

1

8

78 7

1

1

1788

88

1

78 1

8

8

F1

F2

F0

aFunction

aFunction

1788

88

1

78 1

8

8

F1

aFunction

MEMORY PROFILER

PAGE AUDITS

STILL NOT A MOBILE DEVICE

USER AGENT FAKING

WINDOW RESIZING

TOUCH EVENT FAKING

TRANSFORM ON DEVICE

TRANSFORM ON DESKTOP

MULTI-TOUCH FAKING

STILL NOT A MOBILE DEVICE

MOBILE SIMULATORS

DASHCODE

STILL NOT A MOBILE DEVICE

OK, LET'S TRY ON A REAL

DEVICE

console.log()

WEINRE

http://github.com/senchalabs/android-tools

CHARLES PROXY

AUTOMATED TESTING

CONTINUOUS INTEGRATION

TIERED APPROACH

1) LOGIC ONLY

2) SELENIUM (etc) + DESKTOP BROWSERS

3) SELENIUM (etc) + MOBILE SIMULATORS

4) SELENIUM (etc) + MOBILE DEVICES

ALL OF THE OTHER THINGS

Thanks.

@boucher • rboucher@gmail.com