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
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.
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.
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 -
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.
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.
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.
Top comments (0)