List of cool Chrome DevTools tips and tricks

Chrome DevTools provides an amazing set of tools to help you develop on the web platform. Here are some tips you may not know

Take a lookOverview of Chrome DevToolsIf you are their novice

Drag and drop in the "Elements" panel

In the "Elements" panel, you can drag and drop any HTML element and change its position on the page

Drag and Drop in the Elements Panel

Refer to the currently selected element in the console

Select a node in the Elements panel and type$0Reference it in the console.

Reference elements in the Console

Tip: If you are using jQuery, you can enter$($0)Access the jQuery API on this element.

Use the value of the last operation in the console

use$_Reference to the return value of the last operation performed in the console

Use the last result

Add CSS and edit element state

In the "Elements" panel, there are 2 super useful buttons.

First, you can add a new CSS property, and any selector you want, but pre-populate the currently selected element:

Add a CSS rule

The second option allows you to trigger the state of the selected element, so you can see the style applied when it is active and hovering over the focus.

Element state

Find where the CSS properties are defined

cmd-click(ctrl-clickCSS properties on Windows, in the "Elements" panel, DevTools will point you to the location defined in the "Source" panel.

Find where a CSS property is defined

Save the modified CSS to a file

Click the name of the CSS file you edited. The inspector opens it into the "Source" pane, and you can then save it with your applied live edits.

This technique does not apply to new selectors added to the property using +, but only to existing selectors that have been modified.

Save to File the modified CSS

Take a screenshot of a single element

Select an element and presscmd-shift-p(orctrl-shift-pIn Windows) to open the "Command Menu" and selectCapture node screenshot

Screenshot a single element

Use CSS selectors to find elements

urgentcmd-f(ctrl-fIn Windows) Open the search box in the "Elements" panel.

You can type any string in it to match the source code, or you can use the CSS selector to let Chrome generate the image for you:

Find an element using CSS selectors

Press the Shift key in the console

To write a command that spans multiple lines in the console, pressshift-enter.

When you are ready, press Enter at the end of the script to execute it:

Shift-enter in the Console

Clear the console

you can use itClearThe button in the upper left corner of the console, or pressctrl-lorcmd-k.

go with…

In the Source panel:

  • cmd-o(ctrl-oIn Windows), display all the files loaded on your page.
  • cmd-shift-o(ctrl-shift-oIn Windows) displays the symbols (attributes, functions, classes) in the current file.
  • ctrl-gGo to a specific row.

Files list

Watch emoji

You don’t need to write a variable name or an expression over and over again in a debugging session, but add it toWatch emojiList.

Watch Expressions

XHR/Extract debugging

Open from the debuggerXHR/Get breakpointControl panel.

You can set it to interrupt at any timeXHR/Bring itThe call is sent, or only a specific call is sent:

XHR and Fetch debugging

Debug DOM modification

Right click on an element and enableInterrupt subtree modification: Whenever the script traverses the child elements of the element and modifies them, the debugger will automatically stop to let you check what is happening.

Debug on DOM modifications

More devtools tutorials: