Change The Look Of Chrome Developer Tools – Skin It!
Here is some fun stuff for developers or anyone who uses Chrome Developer Tools
Skin it!
How to Change Colors In Chrome Developer Tools
The first step is to find the location of the custom css file of the web inspector.
Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
PC: C:Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css
Actually, that’s pretty much it. You can go ahead and open up the CSS file in your favorite text/code editor and start playing around. But there is more to this story.
Custom Themes for Chrome Developer Tools
Addy Osmani a Google engineer has collected some themes that you can download and apply to Chrome developer tools.
* MNML Theme: https://github.com/frontdevDE/mnml-devtools-theme
(pictured. also themes Elements panel, headers/bars, console and more.) by+Michael P. Pfeiffer
* Monokai Dark: https://gist.github.com/bc12d6bb85ffb96042e8 (also pictured)
* Tomorrow Theme: https://gist.github.com/1163300 (one of many by the awesome +Benjamin Truyman)
* IR_Black Theme: https://gist.github.com/1150520
(and with sidebar colors: https://gist.github.com/1245727)
* Solarized Dark https://gist.github.com/2174604 by +François Robichet
* Ruby Blue: https://github.com/chrisbateman/ChromeDevToolsTheme-RubyBlue/
* Expresso: https://gist.github.com/1207219
* Inversion: https://github.com/mohsen1/Chrome-Dev-tools-dark-theme
* Dark Theme: https://github.com/xajler/chrome-devtools-dark-theme
* Dark Dev: https://github.com/simonsmith/DarkDev
* WebLight Theme: https://gist.github.com/1325072
Inspect The Inspector To Skin It!
You can tweak your skin for the DevTools using the DevTools themselves by undocking them then hitting Ctrl-Alt-i or Cmd+alt+i on Mac. DevToolsCeption!
via Addy Osmani
One Response to “Change The Look Of Chrome Developer Tools – Skin It!”
Hey Dinsan,
two days ago I launched http://devthemez.com. Addy Osmani mentioned it in The Breakpoint Episode. Devthemez gives you the chance to browse themes for Chrome Developer Tools.
Feel free to feedback and have nice day
Pascal