Inspect The Uninspected

Web sites and web applications provide a special flavor of debugging for developers. The techniques used can range from archaic and brute force alert() debugging, to simply altering the code and refreshing your browser until it seems to work. Ideally you will utilize some more advanced developer tooling but many are left confused when it comes to debugging a mobile site because the mobile debugging landscape changes so fast. These slides highlight some common mobile debugging techniques from in-browser emulation to remote debugging solutions from weinre to browser developer tools that allow for remote debugging.

1. Inspect The Uninspected Cory Gackenheimer

2. About Me Job @Healthx Open Source Contributor jQuery Mobile Mozilla Author Node.js Recipes available @ apress.com Screencast available soon @ safaribooksonline.com Debugging Mobile Web Applications http://leanpub.com/DebuggingMobile

3. What’s Covered First Steps Using Desktop Browsers for mobile development Life outside of browser vendors’ Silos The Promising Future

4. First Steps

5. ☢ alert(); Debugging ☢

6. w ebpagetest.org

7. webpagetest.org

8. http://www.browserstack.com/responsive

9. Modern Browser Tools

10. Firebug Features Console HTML view CSS Panel Script Panel Net DOM Cookies! Special Mobile Features? No Firefox only

11. Firebug Dock Right or Left Resize panel for responsive breakpoint testing Tip: use the option “Vertical Panels” to limit UI noise when docked left or right.

12. Firebug

13. Firebug lite Limited Firebug features as a bookmarklet Can be used in nearly any browser No real-time editing features but does include: Console HTML Inspector CSS Panel Script Panel (view only) DOM Panel No special mobile features

14. IE’s F12 Tools Features DOM Explorer Console Debugger Networking UI Responsiveness Profiler Memory Mobile Special Features Emulation (also emulate old IE here)

15. F12 Tools

16. Safari Developer Tools Features Resources Timelines Debugger Console Inspect Node Layers Special Mobile Features Remote Debugging

17. Safari Developer Tools

18. Safari Developer Tools Remote Debug Pre- requisites Enabled on iOS Device Settings > Safari > Advanced > Web Inspector

19. Safari Developer Tools

20. Chrome Developer Tools Features Elements panel Network panel Sources Timeline Profiles Resources Audits Console

21. Chrome Developer Tools Mobile features Devices Emulation Network Throttling Remote Debugging

22. Chrome Developer Tools

23. Chrome Developer Tools

24. Chrome Developer Tools

25. Opera Developer Tools Features Elements Network Sources Timeline Profiles Resources Audits Console Task manager Mobile features Devices Emulation Remote Debugging

26. Opera Developer Tools Emulation Touch Events User Agents Device Metrics Geolocation Orientation CSS Media

27. Opera Developer Tools

28. Opera Developer Tools

29. Firefox Developer Tools Features Inspector Console Debugger Style Editor Performance Network Shader Editor Canvas Web Audio Editor Developer Toolbar

30. Firefox Developer Tools Mobile Features Remote Debugging Responsive Design Tool Web IDE

31. Firefox Developer Tools

32. Firefox Responsive Design Tool

33. Firefox Developer Tools

34. Firefox Developer Tools

35. Firefox Developer Tools

36. Outside The Browser Silos

37. jsconsole.com Browser Based Tool Can add a script to a remote page for console access I use it for quick access while developing and accessing old Android

38. jsconsole.com

39. jsconsole.com

40. jsconsole.com

41. jsconsole.com

42. jsconsole.com

43. WEINRE WEb INspector REmote

44. WEINRE

45. WEINRE Add target script to your source < script src ="http://a.b.c:8080/target/ target-script- min.js#target " ></script>

46. WEINRE

47. A Promising Future

48. Remote Debugging Protocol Every Vendor has one A Unified one would be great We could then use <insert favorite tools> to debug anything

49. Remote Debugging Protocol A first glimpse of unification https://github.com/campd/fxdt-adapters / Use Firefox Developer Tools to debug Firefox Firefox for Android FirefoxOS Chrome Chrome for Android iOS Safari

50. Remote Debugging Protocol

51. Fxdt -adapters Still Early Experiments Lots of manual configuration Manual port forwarding Run > node proxy.js ios_webkit -debug-bridge for safari Basically an Add-on for Firefox that bridges the debugging protocol gap

52. Fxdt -Adapters

53. The End Questions? @cgack

54. Resources http://people.apache.org/~pmuellr/weinre-docs/latest / http:// jsconsole.com/remote-debugging.html https:// getfirebug.com/wiki/index.php/Main_Page https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html http://msdn.microsoft.com/library/ie/bg182326(v=vs.85) https :// developer.chrome.com/devtools https://dev.opera.com / https:// developer.mozilla.org/en-US/docs/Tools