Things you may not know about Chrome DevTools
Tags: webdev, javascript, devtools, chrome
Published: 2019-09-25 00:30:44


> 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'.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/gC1LZfdWhls6jTwa.png"><figcaption>Easily get a reference to any inspected element</figcaption>

### 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.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/CerDLLPnIBzH1ftn.png"><figcaption>Live expression in Chrome</figcaption>

### 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.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/VqBC1UUS9Scg8n1T.png"><figcaption>Test different internet speeds</figcaption>

### 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.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/JTslUQaFAm0y4KVP.png"><figcaption>Disable cache and Preserve logs</figcaption>

### 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'.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/RRweXfbwwRnulZEo.png"><figcaption>Take screenshots directly from the developer tools</figcaption>

### 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.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/Qq3qtCDFfPTvQas4.png"><figcaption>console.warn, console.error</figcaption>

> **console.table**

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

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/93nnpUj0LRAz8NJk.png"><figcaption>console.table(data)</figcaption>

There are several more such as `console.assert`, `console.group`, you can see the rest [here](https://developers.google.com/web/tools/chrome-devtools/console/log):

### 7: $_ returns the most recently evaluated expression

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

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/jtJL0I0AdDsv0GNj.png"><figcaption>$_</figcaption>

### 8: $ is a shortcut for document.querySelector

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

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/IAwgvtL7sWilM0ta.png"><figcaption></figcaption>



### 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.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/H1vM1tK7MPRsQEpB.png"><figcaption>Force certain element states</figcaption>

### 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.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/hcLoRKwIEL4uxlu4.png"><figcaption>Ctrl+click takes you to where the css rule was defined</figcaption>



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

<small>This post was originally published at <a href="https://loftie.com/post/things-you-may-not-know-about-chrome-devtools/">https://loftie.com/post/things-you-may-not-know-about-chrome-devtools/</a></small>