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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  5. Modern Debugging Techniques

    View full-size slide

  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

    View full-size slide

  7. DOM Breakpoints
    •  Break on DOM mutation & attribute changes
    DEMO

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Event Listener Inspection
    •  Event listeners on specific DOM nodes
    DEMO

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  14. Browser Tools

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  18. Firebug
    •  Log function calls
    •  Break on cookie changes

    View full-size slide

  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

    View full-size slide

  20. Debugging HTML5 Features

    View full-size slide

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

    View full-size slide

  22. Web Workers
    DEMO

    View full-size slide

  23. WebSockets
    DEMO

    View full-size slide

  24. Offline Data – Web Storage
    DEMO

    View full-size slide

  25. Offline Data – IndexedDB, WebSQL
    DEMO

    View full-size slide

  26. Offline Data - FileSystem
    DEMO

    View full-size slide

  27. Tips and Tricks
    for
    Effective Debugging

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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

    View full-size slide

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

    View full-size slide

  32. 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

    View full-size slide

  33. 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/

    View full-size slide