$30 off During Our Annual Pro Sale. View Details »

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. About Me •  Senior Computer Scientist at Adobe •  Web

    Platform & Authoring Team @zorder deceptiveweb.com
  2. Agenda •  The Right Tools •  Modern Debugging Techniques • 

    Browser Tools •  Debugging HTML5 Features •  Tips and Tricks
  3. The Right Tools •  Static code analyzers – JSLint, JSHint • 

    Browser and built-in tools – Firebug – Chrome Devtools – Web Inspector – Opera Dragonfly – IE Developer Tools DEMOS
  4. 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
  5. 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
  6. Object.observe •  Proposal •  Track when an object, or its

    properties, change •  Syntax Object.observe(obj, callback); DEMO
  7. Debugging Mobile Applications •  Remote Debugging – Chrome, Firefox – Weinre, Edge

    Inspect – Aardwolf •  jsconsole.com •  Overrides –  User Agent –  Device Metrics –  Geolocation –  Device Orientation –  Emulate Touch Events
  8. Console API •  Firebug, Chrome Devtools •  console. – log, warn,

    error – group, groupEnd – trace – assert – time, timeEnd DEMO
  9. Command Line API •  Firebug, Chrome Devtools •  $(selector), $$(selector),

    $x(xpath) •  profile, profileEnd •  inspect •  monitorEvents, unmonitorEvents DEMO
  10. 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
  11. 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
  12. Debugging HTML5 Features •  Canvas •  Web Workers •  WebSockets

    •  Offline Data –  LocalStorage –  SessionStorage –  IndexedDB –  Web SQL Database –  FileSystem
  13. jQuery •  Visual Event (bookmarklet) •  Browser extensions – Chrome • 

    jQuery Debugger •  Always Inject jQuery – Firefox •  FireQuery (Firebug extension) DEMO
  14. Miscellaneous •  $0 - $4 •  $_ •  debugger; • 

    Pretty-print •  Disable cache •  Versioning .js files •  console.log(JSON.stringify(…)) •  Initiating JS code for network requests DEMO
  15. 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
  16. 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
  17. 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/