Inspect The Uninspected
54
Inspect The Uninspected Cory Gackenheimer
description
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.
Transcript of Inspect The Uninspected
- 1. Inspect The UninspectedCory 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. Whats 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 dockedleft 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. IEs 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 ToolsRemote Debug Pre-requisitesEnabled on iOS DeviceSettings > Safari > Advanced > WebInspector 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 46. WEINRE 47. A Promising Future 48. Remote Debugging Protocol Every Vendor has one A Unified one would be great We could then use 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 protocolgap 52. Fxdt-Adapters 53. The EndQuestions?@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
