I use the Chrome Developer tools pretty much daily, but there are a few things I wish I knew earlier
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'.
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.
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.
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.
Chrome devtools has a built-in screenshot tool. To use it type the
ctrl+shift+p (with the devtools window open), then type 'screenshot'.
We all use console.log for debug output, but you have a few more options:
console.warn prints out a different coloured message, and you can filter the log levels.
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.group, you can see the rest here:
$_ to reference the return value of the previous operation executed in the console.
You can use
$ to quickly select elements from the console, without jquery.
$$ is a shortcut for
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.
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/