DEV Community

Cover image for Things you may not know about Chrome DevTools
Loftie Ellis
Loftie Ellis

Posted on • Originally published at

Simulate Slow Internet Chrome Things you may not know about Chrome DevTools

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 inspected element

You can get a reference to any inspected element from the console by right-clicking on the element in the 'elements' view, and choosing 'Store as global variable'.

Easily get a reference to any inspected element

2: Create live expressions pinned to your console

You can create a live expression that is constantly evaluated and pinned to the top of your console. This can be very useful to watch certain elements that you know should update on the page.

Live expression in Chrome

3: Simulate slow internet

You can simulate different internet speeds directly from the Network tab. Really useful to see how your code reacts when it can take several seconds to load.

Test different internet speeds

4: Disable Caching, and preserve logs

I have had many issues that turned out to be not errors at all, simply cached code that was wrongly loaded. To prevent this you can turn off all caching from the network tab. (Note that it will only disable cache when the DevTools window is open)

Preserve logs are another useful feature to keeps your logs/console output from clearing when you navigate through different pages.

Disable cache and Preserve logs

5: Take screenshots directly from the developer console

Chrome devtools has a built-in screenshot tool. To use it type the ctrl+shift+p (with the devtools window open), then type 'screenshot'.

Take screenshots directly from the developer tools

6: There is more to logging than console.log

We all use console.log for debug output, but you have a few more options:

console.warn, console.error

console.warn prints out a different coloured message, and you can filter the log levels.

console.warn, console.error


If you have a structed list of data console.table will print it in a pretty table format.


There are several more such as console.assert,, you can see the rest here:

7: $_ returns the most recently evaluated expression

Use $_ to reference the return value of the previous operation executed in the console.


8: $ is a shortcut for document.querySelector

You can use $ to quickly select elements from the console, without jquery.
Similarly $$ is a shortcut for document.querySelectorAll

9: Trigger hover or focus state in styles panel

Hover states can be tricky to inspect since you have to move your mouse over the element, but there is an easy way: Under Styles, you can force an element style.

Force certain element states

10: Ctrl+click to find where a CSS property is defined

Ever wondered exactly where a certain css rule was defined? That is easy to find out, you can simply ctrl+click (cmd+click on a Mac) on the rule.

Ctrl+click takes you to where the css rule was defined

Do you have any other DevTools tips? let me know in the comments :)

This post was originally published at

Discussion (40)

emnudge profile image

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.

worsnupd profile image
Daniel Worsnup

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

emnudge profile image

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

rafi993 profile image

Chrome dev tools has a dark mode :)

iamschulz profile image
I am Schulz

Chrome Dev Tools supports themes!

rafi993 profile image

I made little tweaks to it


lpellis profile image
Loftie Ellis Author

True, and it looks quite pleasing.

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

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.

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!

mburszley profile image
Maximilian Burszley

A convenient bookmarklet for toggling it:

lukegarrigan profile image
Luke Garrigan • Edited on

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 profile image

we never forget we never forgive...

how Chrome kill Firebug

youpiwaza profile image

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

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!

neoroma profile image
Роман Ш

copy(temp1) after storing as global variable 🥰

perpetuumstef profile image

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.

akashkava profile image
Akash Kava

Take screenshots directly from the developer console

Wow !!

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.

lpellis profile image
Loftie Ellis Author

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

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.

brasileiro profile image
Daniel Brasileiro

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

k_penguin_sato profile image
K-Sato • Edited on

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

weakish profile image
Jang Rush

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

lpellis profile image
Loftie Ellis Author

Feel free, please just credit the original post

weakish profile image
Jang Rush

Published Chinese translation today:

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

pasupuletics profile image
Chandrasekhar Pasupuleti

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

michaelnle profile image
Michael Le👨‍💻

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

sht5 profile image
Shahar Taite

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

bernardoow profile image
Bernardo Gomes


hgg profile image

Thanks Loftie

shiraf26 profile image
Shiraf Ziyard

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

dimarconicola profile image
Nicola Di Marco 🔥🙏

Number 10 is gonna save my life

gabmen1711 profile image


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?

surajkamdi profile image
Suraj Kamdi

This is really helpful... 👍🏻

seniru profile image
Seniru Pasan Indira

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

joeattardi profile image
Joe Attardi

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

murroughfoley profile image
Murrough Foley

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