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. In this talk I will 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.

original file with videos: https://www.dropbox.com/s/vtq8ur080it789z/InspectTheUninspected.pptx?dl=0

Transcript

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. webpagetest.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/AppleApp lications/Conceptual/Safari_Developer_Guide/Introduction/Introduct ion.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