Resources on developing JavaScript with the Chrome DevTools
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
- Chrome DevTools Command Line API
- Breakpoints
- Keyboard Shortcuts
- Debugging Events
- Exceptions
- Other Tips and tricks
General resources
-
A collection of helpful snippets to use inside of browser devtools.
Screencasts and videos
-
My workflow with DevTools – Remy Sharp - YouTube
A quick walk through of how I’m using DevTools during development to edit, test and save my projects.
-
The Breakpoint Ep. 1: Chrome DevTools with Addy Osmani and Paul Lewis - YouTube
A new show dedicated to developer tools and time-saving techniques.
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.
-
Chrome Web Store - Visual Event
Know what event is bound on each dom element
-
Breakpoints on DOM Mutation Events – Debugging JavaScript - Chrome DevTools — Google Developers
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.
- Exceptions – Debugging JavaScript - Chrome DevTools — Google Developers
-
GlobalEventHandlers.onerror – Web API interfaces – MDN
An event handler for runtime script errors.
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.