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 learned 😏
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