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.
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).
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.
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.
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.
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.
This is a fun one. You can do almost anything with this feature. Just type
document.designMode = "on"
and see the magic.
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.