Custom.css stops working at 32.0.1700.76 m Google Chrome update

Question

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

However, after updating 32.0.1700.76 m, all topics stopped working.

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

Answer 1

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

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

• Create a directory and put the following files in it.
• Go to chrome://extensions
• Select "Developer Mode"
• Click Download Unpacked Extension
• Select the directory you just created.

True emulation Custom.css

This section uses one of the two methods described in How to embed javascript in Chrome DevTools itself . This extension can be easily generalized to fully emulate Custom.css, i.e. Activate a stylesheet on each page, for example Custom.css.
Note. If you use Chrome 33+, I highly recommend this method in the next section.

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" ] } / WXdqC2YgMA25J5PRiSubu / nHFf12Ubp3OZyNqB3j45ZscQ + tH1bwcV + cqdvv / Ik6VQaS6 / qLmenLdFPKOCg / g1L1iKZu6Jjny6GlovpBj + 7gjWQZBIoGBd70HQIDAQAB", { "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 */ 

---

The official method (Chrome 33+ only)

If you want to customize the devtools style, you need to use chrome.devtools.panels.applyStyleSheet . This function is currently hidden behind the flag ( --enable-devtools-experiments , Chrome restart required) and the checkbox (after turning on the flag, open devtools, click the gear icon, go to Experiments and check the box "Allow user interface 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 information, see https://code.google.com/p/chromium/issues/detail?id=318566

Answer 2

The Chrome Store has developer themes for 33+

Open chrome: // flags and enable experimentation with developer tools. Open developer tool options, select the Experiments tab, and select the Allow custom user interface themes check box. Install any theme, you can search for devtools ' themes in the Chrome Web Store. Itll also keep you up to date.

ref

Answer 3

In my case, I don't care about how to use devtools as a CSS override on some sites (a la greasemonkey). According to the person himself (Paul Irish), the recommended replacement (at least for this use case) is a Chrome extension called Control Freak . I tried this and it is great for one-time JS / CSS overrides to the site. Not sure of himself, but it should help people just search for the basic functionality of Custom.css , just like me.

Answer 4

I couldn’t understand everything from Rob, but for me

manifest.json

 { "name": "__something__", "version": "1", "content_scripts": [ { "matches": ["__link_filter__"], "css": ["__filename__.css"] } ], "manifest_version": 2 } 

and the css file in the same folder did what I wanted. How to download this folder is already here.

Answer 5

As pointed out by @Rob W's answer: https://stackoverflow.com/a/166268/2128298/ , the official recommended method for skinning Google Chrome Developer tools is to create an extension to override the default styles that are used using chrome.devtools.panels.applyStyleSheet .

The process of creating a Chrome extension for this purpose can be a bit tedious for each component manually from scratch, so I created a small plugin that provides a collection of built-in themes and additional editor settings for Chrome Developer Tools. Extensions also provide developers with the ability to create additional custom themes using a simple Sass template system without writing their own extension .

• Install DevTools Author Chrome Extension from the Chrome Web Store.
• Enable experimenting with developer tools in chrome: // flags / # enable-devtools-experiment. Restart Chrome for flags to take effect.
• Open DevTools (cmd + opt + I); Settings> Experiments> check the box Allow custom user interface themes.

This will provide the following functions out of the box:

• Ability to choose from +25 custom themes
• Support for custom fonts using allowed system fonts
• Incremental font size control, from 10px to 22px

If you want to add additional topics, you can follow these steps:

Scroll through the GitHub repository , and then do the following: The DevTools Author Chrome extension is built using NodeJS and GruntJS .

Installation:

 $ git clone [e-mail]:<username>/devtools-author.git $ cd devtools-author $ npm install 

Development:

 $ grunt serve 

• After running grunt, to install the development extension in Chrome, go to Settings> Advanced Tools> Extensions and click the Download Unpacked Extensions ... button. (also include Allow incognito below if you want).
  • (Disable DevTools Author if you have an extension installed in the Chrome Web Store.)
  • Make sure experimentation with developer tools is enabled and customizable user interface themes are enabled.
• Restart DevTools. I believe that the fastest way to see the changes that affect this is to unlock DevTools in a separate window, and then open the subsequent DevTools window ( cmd + opt + I , while the current DevTools window is focused) after the changes saved and grunts, reloads assets. Then you will need to reload (close and reopen) the subsequent DevTools window after making the changes.

Create additional topics

• Make a copy of one of the templates from app/styles/themes/templates/ and rename the file to the theme name without underlining , i.e. if your theme is called aloha, inside app/styles/themes/ , copy templates/_theme-template.scss and rename it to aloha.scss
• Add color values ​​for the palette based on code syntax syntax variables in your scss file.
  • If you need more specific targeting for your theme than the one that is supported out of the box, you can add these styles to the end of the theme file after @include styles() .
• Add a color palette object (an array of names and colors) to themes.json in app/scripts/
• In DevTools, select your theme palette in the author’s settings panel.
• Preview and adjust colors as needed. See Development - Step 2 .
• Commit and push your changes to your repo, then create a transfer request for your new theme as soon as it is ready!

Answer 6

I used the instructions for Chrome 32, but that didn't work. My goal was to invert the colors of the developer tools. I created a directory and placed three files in it: Custom.css, Manifest.json, run_as_devtools.js.

Custon.css

 #-webkit-web-inspector { -webkit-filter: invert(1); font-weight: bold !important; } 

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" ] } / WXdqC2YgMA25J5PRiSubu / nHFf12Ubp3OZyNqB3j45ZscQ + tH1bwcV + cqdvv / Ik6VQaS6 / qLmenLdFPKOCg / g1L1iKZu6Jjny6GlovpBj + 7gjWQZBIoGBd70HQIDAQAB", { "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); })(); 

Answer 7

Developer mauricecruz made a good tool for creating custom Chrome DevTools themes.

https://github.com/mauricecruz/zero-base-themes

This is much easier than writing a CSS file (in my opinion).