DEV Community

Cover image for Things you may not know about Chrome DevTools

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...
Collapse
 
emnudge profile image
EmNudge

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.

Collapse
 
worsnupd profile image
Daniel Worsnup

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

Collapse
 
emnudge profile image
EmNudge

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

Collapse
 
rafi993 profile image
Rafi

Chrome dev tools has a dark mode :)

Collapse
 
iamschulz profile image
Daniel Schulz

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

Collapse
 
rafi993 profile image
Rafi

I made little tweaks to it

dark-red

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

Collapse
 
lpellis profile image
Loftie Ellis

True, and it looks quite pleasing.

Collapse
 
arpitvasani profile image
Arpit Vasani

👍 Nice article.

Don't forget the styling in console.log 😄

styling in console

and the dark theme
Welcome to dark side

Collapse
 
bgdesigns profile image
Bryan George

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.

Collapse
 
tpina profile image
Tiago Pina

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!

Collapse
 
mburszley profile image
Maximilian Burszley

A convenient bookmarklet for toggling it:

javascript:(function(){document.designMode=document.designMode==="on"?"off":"on";})();
Collapse
 
lukegarrigan profile image
Luke Garrigan • 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.

Collapse
 
ut4utc profile image
ut4utc

we never forget we never forgive...

how Chrome kill Firebug

Collapse
 
youpiwaza profile image
max

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 :)

Collapse
 
chrisachard profile image
Chris Achard

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!

Collapse
 
neoroma profile image
Роман Ш

copy(temp1) after storing as global variable 🥰

Collapse
 
brasileiro profile image
Daniel Brasileiro

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

Collapse
 
sgaawc profile image
Mazen Khiami

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.

Collapse
 
michaelnle profile image
Michael Le👨‍💻

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

Collapse
 
akashkava profile image
Akash Kava

Take screenshots directly from the developer console

Wow !!

Collapse
 
k_penguin_sato profile image
K-Sato • Edited

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

Collapse
 
johannesjo profile image
Johannes Millan

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.

Collapse
 
lpellis profile image
Loftie Ellis

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

Collapse
 
perpetuumstef profile image
perpetuumstef

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.

Collapse
 
weakish profile image
Jang Rush

Hello, I'd like to translate these awesome tips to Chinese. The translation will be published at nextfe.com Can you give me the permission?

Collapse
 
lpellis profile image
Loftie Ellis

Feel free, please just credit the original post

Collapse
 
weakish profile image
Jang Rush

Published Chinese translation today: nextfe.com/chrome-dev-tools/

This original post is credited and back-linked at the beginning of the translation.

Collapse
 
pasupuletics profile image
Chandrasekhar Pasupuleti

you can also add console.dir it actually prints objects raw structure.

Collapse
 
sht5 profile image
Shahar Taite

The file override is a great tool for testing code and style changes

Collapse
 
bernardoow profile image
Bernardo Gomes

Awesome!!!!!

Collapse
 
hgg profile image
HGG

Thanks Loftie

Collapse
 
shiraf26 profile image
Shiraf Ziyard

Eye opener, didn't know many of them! Thanks!

Collapse
 
dimarconicola profile image
Nicola Di Marco 🔥🙏

Number 10 is gonna save my life

Collapse
 
gabmen1711 profile image
gabmen1711

Awesome!

Collapse
 
suckup_de profile image
Lars Moelleken

Does someone knows if I can disable the auto-correction of html in the DevTools? Or at least show a warning that this is not the current code?

Collapse
 
surajkamdi profile image
Suraj Kamdi

This is really helpful... 👍🏻

Collapse
 
seniru profile image
Seniru Pasan Indira

Wwow! Really helpful. I never knew we can do these things with Chrome DEV tools

Collapse
 
joeattardi profile image
Joe Attardi

Wow, did not know about the live expressions! That is awesome!

Collapse
 
murroughfoley profile image
Murrough Foley

Disabling caching. That will definitely go in my back pocket.