cmd + shift + p
brings up a menu where you can access lots of useful Chrome Dev tools features
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.
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;
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.
CSS & Styles
You can trigger
:active states of DOM elements within the Styles panel.
.cls allows you to add a new class to the selected element.
cmd + click
cmd + click on a CSS rule to find out exactly where that rule is defined.
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.
to disable caching while dev tools is open
to preserve the console while navigating to other pages
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
fetch() command too!
you can pretty print minified files
Press this button:
If you highlight a DOM element in the Elements tab, you can use
$0 in the console to quickly reference it.
This is very useful if you want to say get the value from an input like
$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
Gives you all of the event listeners attached to the passed in DOM node. Remember to use the new shortcut you just
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