Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

Question

I use some themes for Google Developer Tools from this website: http://devthemez.com/themes/chrome-developer-tools

However, after the 32.0.1700.76 m update, all themes have stopped working.

What do I need to do to get them working again?

Answer 1

Support for Custom.css has been removed from Chrome in version 32.
This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32.

Both methods are Chrome extensions, to use the examples below, follow the following steps:

1. Create a directory and put the following files in it.
2. Go to chrome://extensions
3. Select "Developer mode"
4. Click on "Load unpacked extension"
5. Select the directory you just created.

True emulation of Custom.css

This section uses one of the two techniques described at How to inject javascript into Chrome DevTools itself. This extension can easily be generalized to fully emulate Custom.css, i.e. activate the style sheet on every page like Custom.css.
Note: If you're using Chrome 33+, then I strongly recommend the method in the next section over this one.

manifest.json

{    "content_scripts": [{       "js": [ "run_as_devtools.js" ],       "matches": [ "<all_urls>" ]    }],     "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",    "manifest_version": 2,    "name": "Emulate Custom.css",    "version": "1.0",    "web_accessible_resources": [ "Custom.css" ] } 

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {     'use strict';     var l = document.createElement('link');     l.rel = 'stylesheet';     l.href = chrome.runtime.getURL('Custom.css');     document.head.appendChild(l); })(); 

Custom.css

/* whatever you had in your Custom.css */ 

---

Official method (Chrome 33+ only)

If you want to customize your devtools style, chrome.devtools.panels.applyStyleSheet has to be used. This feature is currently hidden behind a flag (--enable-devtools-experiments, requires relaunch of Chrome) and a checkbox (after enabling the flag, open the devtools, click on the gears icon, go to Experiments and check "Allow UI themes").

manifest.json

{   "name": "<name> DevTools Theme",   "version": "1",   "devtools_page": "devtools.html",   "manifest_version": 2 } 

devtools.html

 <script src="devtools.js"></script> 

devtools.js

var x = new XMLHttpRequest(); x.open('GET', 'Custom.css'); x.onload = function() {     chrome.devtools.panels.applyStyleSheet(x.responseText); }; x.send(); 

Custom.css

/* whatever you had in your Custom.css */ 

For more info, see https://code.google.com/p/chromium/issues/detail?id=318566