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
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
$_.parentNoderepeatedly to move up the tree.
copy(obj)– Copies a string-based representation of the object to the clipboard. You can use
JSON.stringify(obj, null, ' '), where
nullis 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.
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 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.logstatement instead. DevTools will not break on it, but will still execute it. This enables you to inject
console.logstatements 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
sendfunction 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.
- 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.
- 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.
What’s your favorite DevTools feature?