DEV Community

Things you may not know about Chrome DevTools

Loftie Ellis on September 25, 2019

I use the Chrome Developer tools pretty much daily, but there are a few things I wish I knew earlier 1: Easily get a reference to any i...

Read full post

EmNudge • Sep 25 '19

These are nice tips! To add to a few more:
$0 is the currently selected element in the elements viewer tab
$$() is shorthand for document.querySelectorAll()
You can use the color picker to get a color on any page by clicking on a color box in the css. You can change the color format with the arrows to the right.

Daniel Worsnup • Sep 25 '19

To add to this: $1 is the previously selected element, $2 the one before that, etc, etc.

EmNudge • Sep 25 '19

Wow, it seems so obvious, but I never even knew that.

Rafi • Sep 25 '19

Chrome dev tools has a dark mode :)

Daniel Schulz • Sep 25 '19

Chrome Dev Tools supports themes!
chrome.google.com/webstore/detail/...

Rafi • Sep 25 '19

I made little tweaks to it

github.com/mauricecruz/zero-base-t...

Loftie Ellis • Sep 25 '19

True, and it looks quite pleasing.

Arpit Vasani • Sep 26 '19

👍 Nice article.

Don't forget the styling in console.log 😄

and the dark theme

Bryan George • Sep 25 '19

Does anyone know if Chrome has any support for better flex/grid debugging like Firefox has? I know you can hover on a div that has a grid and it shows an outline. But I have not see really anything for flex.

This is what is holding me back from using Chrome full time. Really love those features from Firefox.

Tiago Pina • Oct 1 '19

In the console, if you do document.designMode = "on" you can then edit the page in your browser as WYSIWYG.

Great to mock-up screenshots!

Maximilian Burszley • Oct 2 '19

A convenient bookmarklet for toggling it:

javascript:(function(){document.designMode=document.designMode==="on"?"off":"on";})();

Luke Garrigan • Sep 25 '19 • Edited

Thank you for the Blog,

The live expressions thing is an absolute gamechanger, I feel like such an idiot as it is literally right there and I've never bothered to find out what it did.

ut4utc • Sep 26 '19

we never forget we never forgive...

how Chrome kill Firebug

max • Sep 25 '19

You can access localStorage & sessionStorage from Application

You can use both Network & Performance to improve website loading time.

Elements > CSS > Computed > To see what is currently used by your element.

Great article :)

Chris Achard • Sep 25 '19

These are all great! It always amazes me what the tools I'm already using can do that I don't know about yet :) Thanks!

Роман Ш • Sep 26 '19

copy(temp1) after storing as global variable 🥰

Daniel Brasileiro • Sep 30 '19

OMG the first 2 ones are 100% new to me! They are awesome! Thanks!

Mazen Khiami • Oct 2 '19

All were great. Add ‘Control + P’ shortcut pressed anywhere in the devtools to search for any file in thr current project for a quick and easy access. Useful if you r working in Angular with lots of components and files in the tree view.

Michael Le👨‍💻 • Oct 1 '19

You can add -method: OPTIONS to remove all option calls in the network tab.

Akash Kava • Sep 25 '19

Take screenshots directly from the developer console

Wow !!

K-Sato • Sep 25 '19 • Edited

Thanks for the great post! Didn't know many of them!

Johannes Millan • Sep 30 '19

What I also use from time to time is the F8 shortcut. It's nice if you want to freeze the page e.g. for debugging dynamic hover styles which are not triggered by hover, but by some js logic.

Loftie Ellis • Sep 30 '19

Right forgot about that! It is super useful, sometimes its hard to get to an element that is only triggered by some unknown code.

perpetuumstef • Sep 25 '19

Thanks for the article, great tips! I actually had a couple of "a-ha" moments, especially the console.table statement which will be super useful for me going forward.