Modern JavaScript Debugging

In this presentation, I discuss modern techniques for debugging JavaScript. These include Source Maps, MutationObservers, DOM Breakpoints, Event Listener Breakpoints, Object.observe and Remote Debugging. I also discuss the Console API, lesser-known features of Chrome DevTools and its command line API, browser tools to debug HTML5 features, as well as some tips and tricks for efficient debugging.

Demos and source code are available at: http://deceptiveweb.com/js-debug/

Transcript

1. Modern JavaScript Debugging Ashutosh Sharma Adobe
2. About Me •  Senior Computer Scientist at Adobe •  Web Platform & Authoring Team @zorder deceptiveweb.com
3. Agenda •  The Right Tools •  Modern Debugging Techniques •  Browser Tools •  Debugging HTML5 Features •  Tips and Tricks
4. The Right Tools •  Static code analyzers – JSLint, JSHint •  Browser and built-in tools – Firebug – Chrome Devtools – Web Inspector – Opera Dragonfly – IE Developer Tools DEMOS
5. Modern Debugging Techniques
6. Source Maps •  Debug minified JavaScript files •  Debug compiled-to-JavaScript languages •  Debug CSS pre-processor files •  Syntax //@ sourceMappingURL=library.min.js.map •  Generating a source map –  Closure compiler –  Grunt JSMin SourceMaps plugin –  UglifyJS –  Multi-level source maps (CoffeeScript/TypeScript) DEMO
7. DOM Breakpoints •  Break on DOM mutation & attribute changes DEMO
8. MutationObservers •  Vs DOM Mutation Events (deprecated) •  Syntax var addedNodes = []; var observer = new WebKitMutationObserver(function(mutations) { mutations.forEach(function(mutation) { for(var i = 0; i < mutation.addedNodes.length; i++) addedNodes.push(mutation.addedNodes[i]); }) }); observer.observe(document, { subtree: true, childList: true }); console.log(addedNodes); •  Mutation-Summary library DEMO
9. Object.observe •  Proposal •  Track when an object, or its properties, change •  Syntax Object.observe(obj, callback); DEMO
10. Event Listener Breakpoints •  e.g. load, click, scroll DEMO
11. Event Listener Inspection •  Event listeners on specific DOM nodes DEMO
12. Conditional Breakpoints •  console.log, console.assert, console.trace can be used in breakpoint conditions DEMO
13. Debugging Mobile Applications •  Remote Debugging – Chrome, Firefox – Weinre, Edge Inspect – Aardwolf •  jsconsole.com •  Overrides –  User Agent –  Device Metrics –  Geolocation –  Device Orientation –  Emulate Touch Events
14. Browser Tools
15. Console API •  Firebug, Chrome Devtools •  console. – log, warn, error – group, groupEnd – trace – assert – time, timeEnd DEMO
16. Command Line API •  Firebug, Chrome Devtools •  $(selector), $$(selector), $x(xpath) •  profile, profileEnd •  inspect •  monitorEvents, unmonitorEvents DEMO
17. Chrome Devtools •  Useful Keyboard Shortcuts – Esc Bring the console up – Cmd-O Search file names – Cmd-Shift-O Search for functions (.js) and CSS selectors (.css) – Cmd-Opt-F Search in all source files – Cmd-1-8 / Cmd-[ / Cmd-] Navigate between panels – Ctrl-, / Ctrl-. Previous/Next call frame – Shift-Enter Multiline JavaScript – Cmd-F (Resources Panel) Search in all resources DEMO
18. Firebug •  Log function calls •  Break on cookie changes
19. Edit and Continue (JS) •  Edit JavaScript without a page refresh – External scripts can be modified •  Existing function references are replaced •  Useful for modifying callbacks on-the-fly DEMO
20. Debugging HTML5 Features
21. Debugging HTML5 Features •  Canvas •  Web Workers •  WebSockets •  Offline Data –  LocalStorage –  SessionStorage –  IndexedDB –  Web SQL Database –  FileSystem
22. Canvas DEMO
23. Web Workers DEMO
24. WebSockets DEMO
25. Offline Data – Web Storage DEMO
26. Offline Data – IndexedDB, WebSQL DEMO
27. Offline Data - FileSystem DEMO
28. Tips and Tricks for Effective Debugging
29. jQuery •  Visual Event (bookmarklet) •  Browser extensions – Chrome •  jQuery Debugger •  Always Inject jQuery – Firefox •  FireQuery (Firebug extension) DEMO
30. Miscellaneous •  $0 - $4 •  $_ •  debugger; •  Pretty-print •  Disable cache •  Versioning .js files •  console.log(JSON.stringify(…)) •  Initiating JS code for network requests DEMO
31. Miscellaneous •  Bookmarklets to inject code into pages – DevTools Code Snippets •  DevTools workspaces and local files •  Firebug Lite for IE (compat mode in IE 10) •  Chrome record and playback modes –  open -a "Google Chrome" --args --record-mode –  open -a "Google Chrome" --args --playback-mode •  performance.now() DEMO
32. Demo and Source Code http://deceptiveweb.com/js-debug/
33. References •  JSLint, JSHint –  http://www.jslint.com/ –  http://jshint.com/ •  Mutation-Summary library –  https://code.google.com/p/mutation-summary/ •  Weinre –  http://people.apache.org/~pmuellr/weinre/ •  Adobe Edge Inspect –  http://html.adobe.com/edge/inspect/ •  Aardwolf –  https://github.com/lexandera/Aardwolf
34. References •  JSConsole.com –  http://jsconsole.com/ •  Visual Event 2 –  http://www.sprymedia.co.uk/article/Visual+Event+2 •  jQuery Debugger –  https://chrome.google.com/webstore/detail/jquery-debugger/ dbhhnnnpaeobfddmlalhnehgclcmjimi •  Always Inject jQuery –  https://chrome.google.com/webstore/detail/always-inject-jquery/ neappnndmnboecdfhflpbmfdhkanpaoa •  FireQuery –  https://addons.mozilla.org/en-us/firefox/addon/firequery/
35. Q & A