ross boucher - quality control: testing and debugging your apps

51
TESTING & DEBUGGING MOBILE WEB APPS WEB DIRECTIONS UNPLUGGED SEATTLE, 2011

Upload: web-directions

Post on 08-May-2015

1.196 views

Category:

Technology


1 download

DESCRIPTION

Developers have long been able to use an array of debugging, profiling and other testing tools to ensure application quality and performance. More recently, web developers have started to rely on increasingly sophisticated tools to help test their web sites and applications. But particularly in the mobile space, when developing sophisticated applications with web technologies, testing presents significant challenges. Ross Boucher, one of the developers of Objective-J, the Cappuccino web application framework, the visual development tool Atlas, and 280 slides knows a thing or two about testing sophisticated applications developed using web technologies. In this session, he’ll share some of those secretes, and help you better test and debug your applications.

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]