Customizing chrome dev tools as we customize our code editor

The Chrome Developer Tools, or DevTools for short, are powerful tools for web developers that allow you to inspect, debug, and modify the front end of your website or web application. While the DevTools are essential tools for any developer, they can also be customized to fit your personal style and preferences.
One way to customize the DevTools is by using Chrome theme extensions. These extensions allow you to change the look and feel of the DevTools by applying custom themes and styles. In this article, we'll show you how to make your DevTools look cool by using Chrome theme extensions.
Step 1: Install a Chrome theme extension
The first step to customizing your DevTools with a theme is to install a Chrome theme extension. There are many theme extensions available on the Chrome Web Store, so you'll have plenty of options to choose from. But I will prefer
“Material DevTools Theme Collection” because in this extension you will get plenty of themes in one place.
To install a theme extension, follow these steps:
Open the Chrome Web Store and search for "Material DevTools Theme Collection".
Click the "Add to Chrome" button to install the theme extension.
A pop-up window will appear, asking you to confirm the installation. Click "Add extension" to continue.
Step 2: Enable the theme in the DevTools
Once you've installed a theme extension, you'll need to enable it in the DevTools to apply the theme. Here's how to do it:
Open the DevTools by right-clicking on any page and selecting "Inspect" or by pressing F12 on your keyboard.
Click the "Settings" icon in the top-right corner of the DevTools window.
In the left-hand menu, click “preferences” and then click on "Themes", a dropdown will appear to you promptly.
In the "Theme" dropdown, select "Dark" because it is mandatory no matter which theme you use.
Step 3: Once you have finished all the steps now you just need to select your favorite theme. For that -
Click on the extension's icon in the Chrome toolbar and select the “Material DevTools Theme Collection” extension, and a nice pop-up will appear to you.
From the pop-up click on the “Selected theme” option and choose your favorite theme.
Lastly, reopen your browser to affect those changes to your browser.
Step 4: Enjoy your new, cool-looking DevTools!
That's it! Once you've installed and enabled a theme extension, and customized the theme to your liking, you can enjoy your new, cool-looking DevTools.
Conclusion
Customizing the DevTools with a theme extension is a quick and easy way to make them more visually appealing and personalize your workflow. Whether you prefer a dark theme, a light theme, or something in between, there's a theme extension for you. So give it a try and see how it can enhance your developer experience!