- Drag and Drop in the Elements panel
- Reference the currently selected element in the Console
- Use the value of the last operation in the Console
- Add CSS and edit the element state
- Find where a CSS property is defined
- Save to file the modified CSS
- Screenshot a single element
- Find an element using CSS selectors
- Shift-enter in the Console
- Clear the Console
- Go to…
- Watch Expression
- XHR/Fetch debugging
- Debug on DOM modifications
Check out the overview of Chrome DevTools if you’re new to them
Drag and Drop in the Elements panel
In the Elements panel you can drag and drop any HTML element and change its position across the page
Reference the currently selected element in the Console
Select a node in the Elements panel, and type
$0 in the console to reference it.
Tip: if you’re using jQuery, you can enter
$($0)to access the jQuery API on this element.
Use the value of the last operation in the Console
$_ to reference the return value of the previous operation executed in the Console
Add CSS and edit the element state
In the Elements panel there are 2 super useful buttons.
The first lets you add a new CSS property, with any selector you want but pre-filling the currently selected element:
The second one lets you trigger a state for the selected element, so you can see the styles applied when it’s active, hovered, on focus.
Find where a CSS property is defined
ctrl-click on Windows) a CSS property in the Elements panel, the DevTools will point you to the place where that is defined, in the Source panel
Save to file the modified CSS
Click the name of the CSS file that you edited. The inspector opens it into the Sources pane and from there you can save it with the live edits you applied.
This trick does not work for new selectors added using +, or into the element.style properties, but only for modified, existing ones.
Screenshot a single element
Select an element and press
ctrl-shift-p in Windows) to open the Command Menu, and select Capture node screenshot
Find an element using CSS selectors
ctrl-f in Windows) opens the search box in the Elements panel.
You can type any string in there to match the source code, or you can also use CSS selectors to have Chrome generate an image for you:
Shift-enter in the Console
To write commands that span over multiple lines in the Console, press
Once you’re ready, press enter at the end of the script to execute it:
Clear the Console
You can clear the console using the Clear button on the top-left of the console, or by pressing
In the Sources panel:
ctrl-oin Windows), shows all the files loaded by your page.
ctrl-shift-oin Windows) shows the symbols (properties, functions, classes) in the current file.
ctrl-ggoes to a specific line.
Instead of writing again and again a variable name or an expression you are going to check a lot during a debug session, add it to the Watch Expression list.
From the debugger open the XHR/Fetch Breakpoints panel.
Debug on DOM modifications
Right-click an element and enable Break on Subtree Modifications: whenever a script traverses that element children and modifies them, the debugger stops automatically to let you inspect what’s happening.
One more thing! ⚠️ ✋
It's a 10-weeks long cohort online course where I will guide you to becoming a Web Developer.
It's not "just a course". It's a big event I organize once a year.
At the end of the first 10 weeks you'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.
Because once you got the fundamentals, you only learn by working on real, exciting projects.
To find out more, visit bootcamp.dev