10 Chrome Devtool tips You (Probably) Don’t Know 2019

Mehmet Yener
Nov 2 · 3 min read

1- Filter Network Efficiently

Is it hard to find all resources which are larger than 100 KB? From now on, it is not.

Special keys : “status-code”, “larger-than”, “domain”, “priority”, “scheme”, “set-cookie-name”, “set-cookie-domain”, “set-cookie-value”, “has-response-header”, “is”, “mime-type”, “method”, “mixed-content”

Bonus: if you put (-) to your filter key, you can see not equal ones

2- Switch To Dark Theme

Do you have tired eyes when waking up? Did you work till midnight? It might be because of the light mode. Now switch to the Darkside

3- Screenshot for a single element

If you want to capture a screenshot for an element. This feature belongs to you.

Select your element from Elements Pane, open command menu and type Capture node screenshot.

4- Last Operation Value

Is it normal to be forgetful? So rather than remembering what is the last operation value, you can simply use this feature.

Open console, calculate 3 + 5 than type $_ and see the magic. $_ can be used as the last operation value.

5- Store as a global variable

If you want to access the DOM element or and a field from XHR response, right-click the target and select store as a global variable.

6- Find Your function

Did you forget what was your function name? Open your resource from source pane, open command, and type “@”. Now see the magic.

7- Find Your CSS Rule

As the above, did you forget what was your CSS selector? Open your resource from source pane, open command, and type “@”. Now see the magic.

8- Check Your Coverage

Do you have heavy bundle sizes? Don't know where to start? This feature records your actions shows you how much of your bundles getting used.

9- See All Your Changes

Did you do some much R&D on your web app? Don’t remember what did you change?. Now open the changes tab and see your changes.

10- Get Your Performance Metrics From Console

Are you lazy to open the lighthouse and run the performance test? Now with this code, you can see your basic performance results.

Bonus- Optional Chaining

Are you bored with the null checks? Your pain will end soon. Optional chaining is on Chrome Canary

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade