Mobile Debugging

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)

7. None

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)
28. None

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

34. None

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 @