Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

31 lines (16 sloc) 1.714 kb

Devtools Themes

http://darcyclarke.me/design/skin-your-chrome-inspector/

“Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the 'theme' or 'brush' of my favorite IDE and my Web Inspector is no different. If you’ve ever done some snooping around Google Chrome’s Web Inspector you may have noticed that it’s made of straight HTML + CSS + JavaScript. My buddy Paul Irish was the one to show me how you can 'inspect' the Inspector (very Inception-esque).

“With this knowledge, I acquired the help of my good friend Wes Bos. Together we went looking for a way to customize our installs. Luckily enough, the Chromium team have set us up with a nice way of inserting our own CSS.”

This is awesome! How do I use this?

Pick any theme and drop it in one of these locations depending on your system:

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

Making changes...inspect the inspector!

Detach your devtools from the window with the button on the bottom left. With devtools still focused, open devtools again (⌥⌘I (Command + Option + I) or Control + Shift + I). Customize any styles on the fly then update your Custom.css file.

Tomorrow Night

Get Tomorrow Night

Jump to Line
Something went wrong with that request. Please try again.