Chrome DevTools provides an amazing set of tools to help you develop on the web platform. Here are some tips you may not know
- Drag and drop in the "Elements" panel
- Refer to the currently selected element in the console
- Use the value of the last operation in the console
- Add CSS and edit element state
- Find where the CSS properties are defined
- Save the modified CSS to a file
- Take a screenshot of a single element
- Use CSS selectors to find elements
- Press the Shift key in the console
- Clear the console
- go with…
- Watch emoji
- XHR/Extract debugging
- Debug DOM modification
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
Refer to the currently selected element in the console
Select a node in the Elements panel and type
$0Reference it 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
$_Reference to the return value of the last operation performed in the console
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:
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.
Find where the CSS properties are defined
ctrl-clickCSS properties on Windows, in the "Elements" panel, DevTools will point you to the location defined in the "Source" panel.
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 element.style property using +, but only to existing selectors that have been modified.
Take a screenshot of a single element
Select an element and press
ctrl-shift-pIn Windows) to open the "Command Menu" and selectCapture node screenshot
Use CSS selectors to find elements
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:
Press the Shift key in the console
To write a command that spans multiple lines in the console, press
When you are ready, press Enter at the end of the script to execute it:
Clear the console
you can use itClearThe button in the upper left corner of the console, or press
In the Source panel:
ctrl-oIn Windows), display all the files loaded on your page.
ctrl-shift-oIn Windows) displays the symbols (attributes, functions, classes) in the current file.
ctrl-gGo to a specific row.
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.
Open from the debuggerXHR/Get breakpointControl panel.
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.
More devtools tutorials:
- Yoman Introduction
- Bower, browser package manager
- Introduction to front-end testing
- Use node-webkit to create desktop applications
- VS Code: Use language-specific settings
- Introduction to Webpack
- A short and concise guide to the Tower of Babel
- Yarn introduction
- Overview of Browser DevTools
- Use Prettier to format code
- Use ESLint to keep your code clean
- List of cool Chrome DevTools tips and tricks
- How to use Visual Studio Code
- Introduction to Electronics
- Package, simpler Webpack
- Emmet's HTML reference
- Configure VS Code
- Configure macOS command line
- How to disable ESLint rules
- How to open VS Code from the command line
- How to set up hot reinstallation on Electron