How To Change Chrome Development Console Theme


If you are in Chrome, press F12, or Ctrl+Shift+J or Ctrl+Shift+I, it will launch Chrome developer console. Some people call it developer tool,  and some call it the debugger. What you want to call it doesn’t matter, Chrome Developer Console is very powerful tool embedded right in Chrome. To a degree, it can replace your IDE or text editor. A while ago Google added the ability for Chrome Dev Tool to map the source code from any site to your local workspace directory. It enables developers to do live editing, saving and inspecting all right inside Chrome. This is the next generation of web development, you no longer require to switch between your IDE or text editor to Chrome. The only shortcoming perhaps is the lack of customization of how the development console would look like.

That said, Chrome is very extensible. Hate the default look of your development console? You can apply themes to change the default look.

First Go to chrome://flags, find the flag called “Enable Developer Tools experiments” make sure to enable this flag and relaunch chrome after you done.


Next go open Development Tool, and go to settings.


Under Experiments, make sure enable “Allow custom UI themes”.


Now, all we need is to find a theme of your liking. There are many choices around, you can search around “DevTool Theme” on Google to try out different themes or to head to this site that contains a very rich list of theme libraries for you to choose from.

An example of the theme below is called “Zero Dark Matrix



Once you find the theme, install it via Google Chrome store and relaunch the chrome dev tool.


Any new theme you have installed will override the previous theme. You can manage them under chrome://extensions

There you have it, now you can enjoy live editing your JavaScript, HTML, CSS all right inside Chrome. Give it a try, and you might find it useful, I sure did.



Please enter your comment!
Please enter your name here