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

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.

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.

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.

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

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

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, console.group, 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.

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.

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

This post was originally published at https://loftie.com/post/things-you-may-not-know-about-chrome-devtools/