Modern JavaScript Debugging Ashutosh Sharma Adobe

About Me •  Senior Computer Scientist at Adobe •  Web Platform & Authoring Team @zorder deceptiveweb.com

Agenda •  The Right Tools •  Modern Debugging Techniques •  Browser Tools •  Debugging HTML5 Features •  Tips and Tricks

The Right Tools •  Static code analyzers – JSLint, JSHint •  Browser and built-in tools – Firebug – Chrome Devtools – Web Inspector – Opera Dragonfly – IE Developer Tools DEMOS

Modern Debugging Techniques

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

DOM Breakpoints •  Break on DOM mutation & attribute changes DEMO

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

Object.observe •  Proposal •  Track when an object, or its properties, change •  Syntax Object.observe(obj, callback); DEMO

Event Listener Breakpoints •  e.g. load, click, scroll DEMO

Event Listener Inspection •  Event listeners on specific DOM nodes DEMO

Conditional Breakpoints •  console.log, console.assert, console.trace can be used in breakpoint conditions DEMO

Debugging Mobile Applications •  Remote Debugging – Chrome, Firefox – Weinre, Edge Inspect – Aardwolf •  jsconsole.com •  Overrides –  User Agent –  Device Metrics –  Geolocation –  Device Orientation –  Emulate Touch Events

Browser Tools

Console API •  Firebug, Chrome Devtools •  console. – log, warn, error – group, groupEnd – trace – assert – time, timeEnd DEMO

Command Line API •  Firebug, Chrome Devtools •  $(selector), $$(selector), $x(xpath) •  profile, profileEnd •  inspect •  monitorEvents, unmonitorEvents DEMO

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

Firebug •  Log function calls •  Break on cookie changes

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

Debugging HTML5 Features

Debugging HTML5 Features •  Canvas •  Web Workers •  WebSockets •  Offline Data –  LocalStorage –  SessionStorage –  IndexedDB –  Web SQL Database –  FileSystem

Canvas DEMO

Web Workers DEMO

WebSockets DEMO

Offline Data – Web Storage DEMO

Offline Data – IndexedDB, WebSQL DEMO

Offline Data - FileSystem DEMO

Tips and Tricks for Effective Debugging

jQuery •  Visual Event (bookmarklet) •  Browser extensions – Chrome •  jQuery Debugger •  Always Inject jQuery – Firefox •  FireQuery (Firebug extension) DEMO

Miscellaneous •  $0 - $4 •  $_ •  debugger; •  Pretty-print •  Disable cache •  Versioning .js files •  console.log(JSON.stringify(…)) •  Initiating JS code for network requests DEMO

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

Demo and Source Code http://deceptiveweb.com/js-debug/

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

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/

Q & A