DEV Community

loading...
Cover image for Features you may not know about Chrome Dev-Tools

Features you may not know about Chrome Dev-Tools

abhishekjain35 profile image Abhishek Jain ・2 min read

We all use chrome dev tools pretty much daily. But here are a few features I wish I knew earlier that could save me time.

1: Change colors with color picker

Did you know? Chrome has an inbuilt color picker

Color picker gif

To get this, open dev tools and click on the color you want to change - you will see the pen icon, click on it and move it then click on the color you want it to be changed with. You can also copy the color by clicking on it(right side of the pen icon).

2: Simulate Slow internet

You may or may not already know about it. So let me tell you. It can be very useful for testing purposes.

Slow internet

You can also add custom network speeds according to your needs in the custom tab.

3: Get Material colors

Searching for material color palettes? Don't! It's already available in the dev tools.

Material colors

You can also long-press right click to view more available shades.

4: Check CPU usage by a website

This feature is available in the performance monitor tab of dev tools. Open dev tools press esc and follow this -

performance

As you can see it tells real-time CPU usage. You can also check other features like js heap size etc.

5: Pretty print API data.

When working with lots of data with API, we have to log and view the data. That will yield JavaScript Object (JSON), which in the case of 2D arrays is going to be hard read and hard to find useful information in. But there's a simple fix for that:

console.table()
All it takes is to replace console.log with console.table. This function can easily display 1D and 2D arrays, but what makes this function extra useful is that it can also correctly displays column names and on top of that it also allows you to sort by each of these columns.

pretty print table

Bonus:

document.designMode = "on"

This is a fun one. You can do almost anything with this feature. Just type document.designMode = "on"
and see the magic.

designMode

Change dev tools theme:

We developers love dark themes, dev tools also got it. Just click on the settings icon in dev tools and the first option you'll see is the theme.

This was it for today. See you soon.

peace

Discussion (0)

pic
Editor guide