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'.
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.
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 prints out a different coloured message, and you can filter the log levels.
If you have a structured 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:
7: $_ returns the most recently evaluated expression
$_ 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.
$$ is a shortcut for
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.