Resources on developing JavaScript with the Chrome DevTools

Nov 13, 2013

I recently gave a talk on developing JavaScript with the Chrome DevTools and this is a list of the mentioned resources. These include several links to Googles own excellent DevTools documentation.

I plan to curate this list as time goes by, topics arise, change and new resources appear.


General resources

  • DevTools Snippets

    A collection of helpful snippets to use inside of browser devtools.

Screencasts and videos


Chrome DevTools Command Line API

The Command Line API is a collection of functions for performing common tasks with the Chrome Developer Tools. These include convenience functions for selecting and inspecting elements in the DOM, stopping and starting the profiler, and monitoring DOM events. This API complements the Console API, the Command Line API is only available from within the console itself.


Breakpoints

A breakpoint is an intentional stopping or pausing place in a script, put in place for debugging purposes.


Keyboard Shortcuts

The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow.


Debugging Events

The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow.


Exceptions

Exception handling is the process of responding to the occurrence of exceptions - exceptional situations that require special processing - often changing the normal flow of your JavaScript code’s execution.


Other Tips and tricks

There are many power tools at your disposal when using the DevTools, some of which are more obvious than others. In this guide, we will highlight some of those great tools, tips and tricks that are less well known.