Customize Chrome Developer Tools With DevTools Author

By . in Toolkit. Updated on .

If you’re a frontend developer then you should already know about Google Chrome’s DevTools panel. This comes bundled with every version of Chrome offering tools for editing raw HTML/CSS along with a JS console and the ability to manipulate the DOM in real time.

A new free Chrome plugin called DevTools Author lets you customize the DevTools panel with extra syntax color schemes, unique fonts and custom font sizes.

devtools author extension

The setup is pretty straightforward. You just install the extension from the Chrome Webstore and then visit this link in your browser: chrome://flags/#enable-devtools-experiments

You’ll find yourself in the Chrome Flags panel where you should enable DevTools experiments. Once that’s enabled you should restart Chrome, open the DevTools settings panel and find the "experiments" tab.

Then you just check "allow custom UI themes" and you’re good to go!

devtools ui window settings

You can choose from over 25 different syntax color schemes that make Chrome’s editor a lot easier to use. And you can change font sizes from 10px-22px or even update the console fonts to any pre-installed fonts on your operating system.

This plugin doesn’t add any core features onto DevTools, but rather lets you change the style and look of your DevTools window. It’s surprisingly easy to configure and it can make your DevTools experience feel much more personalized.

If you have any trouble during setup then check out this guided intro video.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail