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.

2015-11-22_1341

Next go open Development Tool, and go to settings.

2015-11-22_1412

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

2015-11-22_1412_001

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 http://devthemez.com/themes/chrome-developer-tools 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

2015-11-22_1413

2015-11-22_1419

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

2015-11-22_1411

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.

Jonathan Hu

Programming by day, Web Development, Canucks & Movies for spare time!
Co-founder of Next of Windows and a cool geek 🙂

Last updated: 11/22/2015

Posted in: How to , Tools
Discover more: , ,