Google Chrome Developer Tools – Part 1

In this post we will share show you how you can use some of the new Developers Tools that have been added recently to Google Chrome. Google Chrome Dev Tools is a set of powerful tools that help developers to build better webs.

CSS Overview

If you want to improve your CSS, you can use the CSS Overview panel to better understand your page’s CSS and identify potential improvements.

Font Editor

Using the Font Editor tool in Google Chrome, you can easily edit your website fonts in a very easy and visual way, instead of writing CSS rules manually.

Dark Mode

If you want tot test your website in Light or Dark mode, you can easily do it using the Dark Mode emulation available on Google Chrome, so you don’t need to change your computer theme.

Recorder Panel

In the Recorder Panel you can record, replay and measure user flows; so you can use it again and again to test your site whenever you do a change and see if everything works as it should and performance is not affected.

Where To Go From Here…

I hope you found the article insightful! In this first article, we have covered 4 of the new Dev Tools, if you want to learn more about all the tools offered by Google Chrome, you can check the following link:

https://developer.chrome.com/docs/devtools/

Or you can wait for our new article to learn about another set of tools. Stay tuned!