Sep 012014
 
 September 1, 2014  Posted by at 12:43 pm Debugging, Dev Environment, HTML & CSS, JS & TS, Random  Add comments

Let’s be clear, I don’t do much front end (in an effort to keep myself sane) but last Friday and this Monday I have been pairing with Dave debugging some bugs we had found. One of them was related to iOS8 safari in private mode (we do test everything!), and the second one was related to some UX around validation. As we were debugging I realized how much I dislike the white theme of not only Visual Studio, but also all consoles- including Dev Tools in Chrome. I suggested we simply change the theme.

Before and after

Styling Chrome Dev Tools2

In v 32 custom.css was removed from Chrome. This post describes to set up a custom theme with an existing theme extension. Basically, in contrast to before in terms of styling the Dev Tools area the only options we have now all rely on extensions. The ‘old’ way provided a local css file that you could mess with, or add your own. It’s not that much fuss though the way you do it in –v 33 and up. This post covers existing extensions, the next one your own.

The easiest way if you just want a nice dark background (I prefer dark over light themes) is to install this extension (or similar). If you don’t like it, do a search, there are plenty of extensions. Here is one:

Styling Chrome Dev Tools

DevTools Theme: Zero Dark Matrix

Got to

chrome://flags/#enable-devtools-experiments

And enable

Enable Developer Tools Experience

Styling Chrome Dev Tools3

Close chrome, and open again

Open Dev tools (F12, or Settings-Dev Tools) and select Settings

You should see an Experiments tab there, enable Allow Custom User Themes

Styling Chrome Dev Tools5

Reload Dev Tools and you should now have the extension theme enabled.

Styling Chrome Dev Tools6

I’m sure you would like to create your own custom theme, and that you can still do. However you need to create an extension, and I’m saving that for a different post (hoping to get it written tomorrow).

You could of course also just change the installed extension stylesheet, but you might want to check the licensing for what you are allowed to do and not allowed to.

Extensions are usually found here on a Windows computer:

C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\Extensions

  2 Responses to “Styling Chrome Dev Tools”

  1. This has made my day 🙂

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 3 + 4 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)