Mobile Debugging

Mobile debugging is a bitch. Let's talk about that, and then fix it.

Transcript

1. Mobile Debugging Remy Sharp / @rem
2. Debugging is a... http://www.flickr.com/photos/grill/2655848033
3. ...and I ❤ debugging http://www.flickr.com/photos/grill/2655848033
4. Back in early 2000
5. Our first mobile webapp circa 1999 Amazingly actually still live!!!
6. XML parsing :( (but strict is strict)
8. http://www.flickr.com/photos/60119893@N00/2883012011/
9. Art of debugging methodically Replicate so that you can Isolate and ultimately Eliminate
10. Principles 1. Know thy enemy 2. Close the gap 3. Expect the unexpected
11. 1. Know thy enemy
12. ஌ݾ஌൴ɼඦፌෆຆɻ “If you know both yourself and your enemy, you can win a hundred battles without jeopardy.” http://www.flickr.com/photos/katieharbath/4856255673
13. Simulators mobilexweb.com/emulators
14. Get real devices http://www.flickr.com/photos/sidesh0w/6675107387 http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
15. Get FREE devices http://www.flickr.com/photos/sidesh0w/6675107387 http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
16. Share devices http://www.flickr.com/photos/sidesh0w/6675107387
17. http://jsconsole.com?this
18. Understand performance
19. WTF? Wikipedia has more JavaScript than Gmail? http://remysharp.com/mobile-battery-performance/
20. "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."
21. Network monitoring
22. Charles - $50 Fiddler - windows - free
23. http://code.google.com/p/pcaphar
24. Make test cases
25. 2. Close the gap http://www.flickr.com/photos/bowbrick/2093650123
26. Save Refresh
27. 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)
29. jsconsole :listen
30. weinre “Pronounced like the word ‘winery’. Or maybe like the word ‘weiner’. Who knows, really.” http://www.flickr.com/photos/booleansplit/6924192819/
31. Adobe Shadow
32. iWebInspector / Hooking Web Inspector iWebInspector
33. jsbin.com
35. Aardwolf http://www.flickr.com/photos/brostad/6294164371
36. Real debuggers http://www.flickr.com/photos/sidesh0w/6675107387
37. Chrome for Android
38. :1337 http://www.flickr.com/photos/blackberryimages/6932160681
39. :7001
40. :6000
41. iOS6
42. Build your own tools http://www.flickr.com/photos/jannem/3312946500 Test for events Performance metrics Emulate APIs & event types etc...
43. remote-tilt.com
44. jsbin 3 jsbin.com
45. 3. Expect the unexpected http://www.flickr.com/photos/jdhancock/3669455809
46. Once upon a time... Demoing mobile app Same code Same mobile device Same OS version But different result
47. Wifi != ISP network
48. msie=/*@cc_on!@*/0;
49. 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.
50. iPod Touch would crash upon render
51. Last resort debugging 50/50
52. Emulating slow connections http://www.flickr.com/photos/63885769@N00/4696519429
53. Network Link Conditioner (xcode + mac) Slowy.app (mac + $) ipfw (mac / *nix) sloppy http://www.dallaway.com/sloppy/ (java app) wipfw (windows)
54. Beware of red herrings console.log
55. “When you have eliminated the impossible, whatever remains, however improbable, must be the truth”
56. If all else fails, take a break.
57. We need to demand more
58. 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?
59. I think so, but it'll be a challenge.....
60. Otherwise: rock on. @rem leftlogic.com Hire us @