Slide 1

Slide 1 text

Mobile Debugging Remy Sharp / @rem

Slide 2

Slide 2 text

Debugging is a... http://www.flickr.com/photos/grill/2655848033

Slide 3

Slide 3 text

...and I ❤ debugging http://www.flickr.com/photos/grill/2655848033

Slide 4

Slide 4 text

Back in early 2000

Slide 5

Slide 5 text

Our first mobile webapp circa 1999 Amazingly actually still live!!!

Slide 6

Slide 6 text

XML parsing :( (but strict is strict)

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

http://www.flickr.com/photos/60119893@N00/2883012011/

Slide 9

Slide 9 text

Art of debugging methodically Replicate so that you can Isolate and ultimately Eliminate

Slide 10

Slide 10 text

Principles 1. Know thy enemy 2. Close the gap 3. Expect the unexpected

Slide 11

Slide 11 text

1. Know thy enemy

Slide 12

Slide 12 text

஌ݾ஌൴ɼඦፌෆຆɻ “If you know both yourself and your enemy, you can win a hundred battles without jeopardy.” http://www.flickr.com/photos/katieharbath/4856255673

Slide 13

Slide 13 text

Simulators mobilexweb.com/emulators

Slide 14

Slide 14 text

Get real devices http://www.flickr.com/photos/sidesh0w/6675107387 http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Slide 15

Slide 15 text

Get FREE devices http://www.flickr.com/photos/sidesh0w/6675107387 http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Slide 16

Slide 16 text

Share devices http://www.flickr.com/photos/sidesh0w/6675107387

Slide 17

Slide 17 text

http://jsconsole.com?this

Slide 18

Slide 18 text

Understand performance

Slide 19

Slide 19 text

WTF? Wikipedia has more JavaScript than Gmail? http://remysharp.com/mobile-battery-performance/

Slide 20

Slide 20 text

"200k of JavaScript held within a block comment adds 240ms during page load, whereas 200k of JavaScript that is parsed during page load added 2600 ms."

Slide 21

Slide 21 text

Network monitoring

Slide 22

Slide 22 text

Charles - $50 Fiddler - windows - free

Slide 23

Slide 23 text

http://code.google.com/p/pcaphar

Slide 24

Slide 24 text

Make test cases

Slide 25

Slide 25 text

2. Close the gap http://www.flickr.com/photos/bowbrick/2093650123

Slide 26

Slide 26 text

Save Refresh

Slide 27

Slide 27 text

Host locally •Network Utility (mac) ifconfig en0 inet / ifconfig eth0 ipconfig (look for ip4v) •Point mobile to that IP •localtunnel (to get out of VMs)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

jsconsole :listen

Slide 30

Slide 30 text

weinre “Pronounced like the word ‘winery’. Or maybe like the word ‘weiner’. Who knows, really.” http://www.flickr.com/photos/booleansplit/6924192819/

Slide 31

Slide 31 text

Adobe Shadow

Slide 32

Slide 32 text

iWebInspector / Hooking Web Inspector iWebInspector

Slide 33

Slide 33 text

jsbin.com

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Aardwolf http://www.flickr.com/photos/brostad/6294164371

Slide 36

Slide 36 text

Real debuggers http://www.flickr.com/photos/sidesh0w/6675107387

Slide 37

Slide 37 text

Chrome for Android

Slide 38

Slide 38 text

:1337 http://www.flickr.com/photos/blackberryimages/6932160681

Slide 39

Slide 39 text

:7001

Slide 40

Slide 40 text

:6000

Slide 41

Slide 41 text

iOS6

Slide 42

Slide 42 text

Build your own tools http://www.flickr.com/photos/jannem/3312946500 Test for events Performance metrics Emulate APIs & event types etc...

Slide 43

Slide 43 text

remote-tilt.com

Slide 44

Slide 44 text

jsbin 3 jsbin.com

Slide 45

Slide 45 text

3. Expect the unexpected http://www.flickr.com/photos/jdhancock/3669455809

Slide 46

Slide 46 text

Once upon a time... Demoing mobile app Same code Same mobile device Same OS version But different result

Slide 47

Slide 47 text

Wifi != ISP network

Slide 48

Slide 48 text

msie=/*@cc_on!@*/0;

Slide 49

Slide 49 text

Tether and check via desktop O2 you can change username to "bypass" to confirm bugs, not to solve them. Also will need to check with providers to be sure.

Slide 50

Slide 50 text

iPod Touch would crash upon render

Slide 51

Slide 51 text

Last resort debugging 50/50

Slide 52

Slide 52 text

Emulating slow connections http://www.flickr.com/photos/63885769@N00/4696519429

Slide 53

Slide 53 text

Network Link Conditioner (xcode + mac) Slowy.app (mac + $) ipfw (mac / *nix) sloppy http://www.dallaway.com/sloppy/ (java app) wipfw (windows)

Slide 54

Slide 54 text

Beware of red herrings console.log

Slide 55

Slide 55 text

“When you have eliminated the impossible, whatever remains, however improbable, must be the truth”

Slide 56

Slide 56 text

If all else fails, take a break.

Slide 57

Slide 57 text

We need to demand more

Slide 58

Slide 58 text

My dream: Single Debugging Tool 1. Can we build this ourselves? 2. Can we hook in and normalise all the remote protocols? 3. Can we do step debugging?

Slide 59

Slide 59 text

I think so, but it'll be a challenge.....

Slide 60

Slide 60 text

Otherwise: rock on. @rem leftlogic.com Hire us @