Chrome DevTools – 10 Tips and Tricks

If you’ve ever worked on a web application then I’m more than sure that you are familiar with Chrome DevTools but do you know all its secrets? In my case, most of the time I used it in limited way using only well-known functions, omitting the innovations introduced in next versions. It’s easy to get used to one way of working but when you’ve mastered basics it’s worth to take a look at advanced functions that can improve your work. After all we should work wisely, not hard. Let’s check what we can do with chrome dev tools!

1. File search

If you always expand source tree when looking for files, then this command is for you! By using Ctrl + P and entering the name you can quickly get to the file you are interested in.

2. Pretty print

Sometimes we have to check code from production, but it’s already minified or at least should be. To change it to a more readable version you can use pretty print.

3. Multiple cursors

To save time on entering the same value multiple times we can set cursor in many places. This way we can replace for example all colors in css at once. To do this press Ctrl key and click on lines which you want to change.

4. Workspaces

We can connect our local filesystem to code from browser. When we do this, all saved changes will be immediately entered in our files and we’ll see them after refreshing the page.

5. Capture screenshots

This tip is especially useful for testers who want to check how the page looks when loading. We can see stages of page loading and check if everything looks good.

6. Console $ commands

In the console we have some useful commands using $. We can have access to the last command result with $_, get instance of selected DOM element with $0 and find DOM element with $(selector).

7. Preserve and group logs

If we want to keep the logs even after refreshing page, we can use preserve logs, and if there are too many of them, we can group them together and filter out.

8. Blackbox scripts

We often use libraries or frameworks such as jQuery or angular, but when debugging, we’re usually not interested in debugging their implementations. These scripts can be blackboxed, in this way we inform debugger that we want to omit them.

9. Snippets

If during debugging you often use the same piece of code or create presentation and you want show code without any unexpected errors then you can prepare snippet and call at the right time. You can even share your snippet with others!

10. Command menu

The last tip allows you to display list of options available in chrome, such as show timestamp in console, frames per second, switch to dark theme and more! You can display options list by pressing Ctrl + Shift + P.

I showed you only 10 most important tips but there is much more. We omitted color picker, condition breakpoint, css coverage or profiling, but I encourage you to check these options. Some of these tips may seem unnecessary but I propose to try everyone, they may turn out to be more useful than it seems. Improving ability to use tools is very important and allows us to save time on unnecessary work, so it’s worth to work on it.

Do you know any tips that were missing here? Let me know in the comment!