Elements tab

cmd + shift + p

brings up a menu where you can access lots of useful Chrome Dev tools features

dev tools shortcut menu

A useful feature in this menu is Show Coverage. It opens up a new tab, in the console, and displays how much CSS & JS is in use on the specific page.

coverage menu
coverage


h

Pressing the h key hides the selected dom node in the Elements tab. It is a very convenient way or quickly hiding an element instead of having to add the CSS display: none. In the screenshot below you can see that chrome adds a class that makes the visibility: hidden !important;

h key shortcut


drag & drop

You can drag & drop dom elements in the Elements tab to change the order of the dom. This is useful for quickly prototyping or testing how something looks if it is in a different location.


cmd + f

This shortcut allows you to find any element in the dom via a CSS selector.

element search


CSS & Styles

:hov

You can trigger :hover, :focus, :active states of DOM elements within the Styles panel.

css hover


.cls

Clicking on .cls allows you to add a new class to the selected element.

add a class with cls


cmd + click

cmd + click on a CSS rule to find out exactly where that rule is defined.


+

Clicking the + aka New Style Rule allows you to add a new CSS rule, which is pre-populated automatically. Which is useful for copying and pasting into a CSS file after making modifications in dev tools.

new style rule


Network tab

disable cache

to disable caching while dev tools is open

disable cache


preserve log

to preserve the console while navigating to other pages

preserve log


XHR

Right-clicking on an XHR request allows you to copy useful information about that request, including headers, user
agent, cookies, etc. You can copy as a curl or fetch() command too!


Sources tab

you can pretty print minified files

Before:
minified css

Press this button:
pretty print button

After:
pretty print


Console

$0

If you highlight a DOM element in the Elements tab, you can use $0 in the console to quickly reference it.

$0

This is very useful if you want to say get the value from an input like $0.value

$0 through $4 - can be used to reference the previously selected DOM nodes.

$_

Can be used to reference the return value of the previous operation executed in the console.

$()

$() - is a shorcut for document.querySelector() - use it just like jQuery.

$()

$$()

$$() - is a shorcut for document.querySelectorAll()

$$()

getEventListeners(node)

Gives you all of the event listeners attached to the passed in DOM node. Remember to use the new shortcut you just
learned 😏

getEventListeners($0);

copy()

Copies whatever is passed into it to your clipboard. Which is very handy for copying a large JSON object, from an API for example, if you want to then paste and format in your text editor for easier reading, syntax highlighting, etc.

document.designMode = 'on'

Puts the browser in design mode and allow you to edit any text on the screen. This one is by far my favorite 🎉

More Console methods

I wrote an article about various helpful methods on the console object called How to console log better in JavaScript.