Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern JavaScript Debugging

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/

toshsharma

May 15, 2013
Tweet

More Decks by toshsharma

Other Decks in Technology

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