Download - Ross Boucher - Quality Control: Testing and debugging your apps

Transcript
Page 1: Ross Boucher - Quality Control: Testing and debugging your apps

TESTING & DEBUGGING MOBILE WEB APPSWEB DIRECTIONS UNPLUGGEDSEATTLE, 2011

Page 2: Ross Boucher - Quality Control: Testing and debugging your apps
Page 3: Ross Boucher - Quality Control: Testing and debugging your apps
Page 4: Ross Boucher - Quality Control: Testing and debugging your apps
Page 5: Ross Boucher - Quality Control: Testing and debugging your apps
Page 6: Ross Boucher - Quality Control: Testing and debugging your apps
Page 7: Ross Boucher - Quality Control: Testing and debugging your apps

UNIFIED WORKFLOW

Page 8: Ross Boucher - Quality Control: Testing and debugging your apps

alert()

Page 9: Ross Boucher - Quality Control: Testing and debugging your apps

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

Page 10: Ross Boucher - Quality Control: Testing and debugging your apps

console.log()

Page 11: Ross Boucher - Quality Control: Testing and debugging your apps
Page 12: Ross Boucher - Quality Control: Testing and debugging your apps

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

•copy()

•inspect()

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

Page 13: Ross Boucher - Quality Control: Testing and debugging your apps

ELEMENT INSPECTOR

Page 14: Ross Boucher - Quality Control: Testing and debugging your apps

RESOURCE INSPECTOR

Page 15: Ross Boucher - Quality Control: Testing and debugging your apps

NETWORK INSPECTOR

Page 16: Ross Boucher - Quality Control: Testing and debugging your apps

JAVASCRIPT DEBUGGER

Page 17: Ross Boucher - Quality Control: Testing and debugging your apps

PAGETIMELINE

Page 18: Ross Boucher - Quality Control: Testing and debugging your apps

JAVASCRIPT PROFILER

Page 19: Ross Boucher - Quality Control: Testing and debugging your apps

aFunction

F1

F2

F01

9

1

8

78 7

1

1

Page 20: Ross Boucher - Quality Control: Testing and debugging your apps

aFunction

F1

F2

F01

9

1

8

78 7

1

1

Page 21: Ross Boucher - Quality Control: Testing and debugging your apps

1788

88

1

78 1

8

8

F1

F2

F0

aFunction

aFunction

Page 22: Ross Boucher - Quality Control: Testing and debugging your apps

1788

88

1

78 1

8

8

F1

aFunction

Page 23: Ross Boucher - Quality Control: Testing and debugging your apps

MEMORY PROFILER

Page 24: Ross Boucher - Quality Control: Testing and debugging your apps

PAGE AUDITS

Page 25: Ross Boucher - Quality Control: Testing and debugging your apps

STILL NOT A MOBILE DEVICE

Page 26: Ross Boucher - Quality Control: Testing and debugging your apps

USER AGENT FAKING

Page 27: Ross Boucher - Quality Control: Testing and debugging your apps
Page 28: Ross Boucher - Quality Control: Testing and debugging your apps

WINDOW RESIZING

Page 29: Ross Boucher - Quality Control: Testing and debugging your apps

TOUCH EVENT FAKING

Page 30: Ross Boucher - Quality Control: Testing and debugging your apps

TRANSFORM ON DEVICE

Page 31: Ross Boucher - Quality Control: Testing and debugging your apps

TRANSFORM ON DESKTOP

Page 32: Ross Boucher - Quality Control: Testing and debugging your apps

MULTI-TOUCH FAKING

Page 33: Ross Boucher - Quality Control: Testing and debugging your apps

STILL NOT A MOBILE DEVICE

Page 34: Ross Boucher - Quality Control: Testing and debugging your apps

MOBILE SIMULATORS

Page 35: Ross Boucher - Quality Control: Testing and debugging your apps

DASHCODE

Page 36: Ross Boucher - Quality Control: Testing and debugging your apps

STILL NOT A MOBILE DEVICE

Page 37: Ross Boucher - Quality Control: Testing and debugging your apps

OK, LET'S TRY ON A REAL

DEVICE

Page 38: Ross Boucher - Quality Control: Testing and debugging your apps

console.log()

Page 39: Ross Boucher - Quality Control: Testing and debugging your apps
Page 40: Ross Boucher - Quality Control: Testing and debugging your apps

WEINRE

Page 41: Ross Boucher - Quality Control: Testing and debugging your apps

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

Page 42: Ross Boucher - Quality Control: Testing and debugging your apps

CHARLES PROXY

Page 43: Ross Boucher - Quality Control: Testing and debugging your apps

AUTOMATED TESTING

Page 44: Ross Boucher - Quality Control: Testing and debugging your apps

CONTINUOUS INTEGRATION

Page 45: Ross Boucher - Quality Control: Testing and debugging your apps

TIERED APPROACH

Page 46: Ross Boucher - Quality Control: Testing and debugging your apps

1) LOGIC ONLY

Page 47: Ross Boucher - Quality Control: Testing and debugging your apps

2) SELENIUM (etc) + DESKTOP BROWSERS

Page 48: Ross Boucher - Quality Control: Testing and debugging your apps

3) SELENIUM (etc) + MOBILE SIMULATORS

Page 49: Ross Boucher - Quality Control: Testing and debugging your apps

4) SELENIUM (etc) + MOBILE DEVICES

Page 50: Ross Boucher - Quality Control: Testing and debugging your apps

ALL OF THE OTHER THINGS

Page 51: Ross Boucher - Quality Control: Testing and debugging your apps

Thanks.

@boucher • [email protected]