Chrome DevTools Tips

Chrome’s Developer Tools are likely something that you use on a daily basis when debugging code. But how well do you really know them? Read on for some Chrome DevTools tips that you may not know about, but that are sure to make your developer life a whole lot easier.

Command Line API

The following commands are available from within the Console tab:

$0 – Returns a reference to the most recently inspected element or object. In fact, DevTools remembers the last 5 DOM elements or objects, from $0 to $4.
inspect($0) – Same as above except that it will also open the Elements or Profiles panel as appropriate.
$_ – Returns the value of the last expression the console evaluated. You can use this to get autocomplete for a jQuery element by first executing a jQuery command in console, for example $(‘div’), and then executing $_, which will have autocomplete functionality.
$_.parentNode – Gets the parent element of the last element that the console evaluated. You can call $_.parentNode repeatedly to move up the tree.
dir(obj) – Gets a Javascript object representation of an object.
copy(obj) – Copies a string-based representation of the object to the clipboard. You can use JSON.stringify(obj, null, ' '), where null is a transform used for filtering and ' ' is the level of indentation, to get a pretty print string version of an object, and then use copy($_) to copy it to an editor.

Console API

The following commands are also available from within the Console tab:

console.clear() – Clears the console.
console.warn() – Shows a warning icon together with the log entry.
console.trace() – Dumps a stack trace.
console.group('myGroup') – Creates a folding group or expandable tree structure.
console.groupEnd() – Closes the folding group.

Breakpoints

Breakpoints are managed from the Sources tab:

Watch Expressions – Watch a variable or an expression change as the code executes.
Conditional Breakpoints – To add a conditional breakpoint, right-click on an existing breakpoint and select Edit Breakpoint. Enter an expression that, once it evaluates to true, will halt script execution. Or you can enter a console.log statement instead. DevTools will not break on it, but will still execute it. This enables you to inject console.log statements without having to modify the original code.
XHR Breakpoints – Enter a regular expression that will be tested against a URL when making an XHR request. If a match is found, the code should break on the send function call. You can also leave this field blank to break on all XHR requests.
DOM Breakpoints – Right-click on an element and then select Break on… > Subtree Modifications to trigger a breakpoint when elements in the sub-tree are added or removed.

Additionally, while on a breakpoint, pressing and holding the Resume script execution button shows another button that, when selected, resumes execution but will not pause on any breakpoints for half a second.

Sources

Pretty Print – Reformats minified code so that it’s in a more human readable form.
Cmd + O – Search scripts, stylesheets and snippets by file name.
Cmd + Shift + O – Search for a Javascript function or CSS rule inside an open file.
Pause on exceptions – Click the Pause on exceptions button in the top right to pause on all exceptions, even if they’re caught. Check the Pause on Caught Exceptions checkbox to only break on caught exceptions.
Call stack – The call stack changes the context in the console depending on what part of the call stack is selected.

Command Line API

Console API

Breakpoints

Sources

Further Reading