Custom.css 已在 32.0.1700.76 m Google Chrome 更新中停止工作

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

提问by user3130064

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

我从这个网站使用了一些谷歌开发者工具的主题：http: //devthemez.com/themes/chrome-developer-tools

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

但是，32.0.1700.76 m 更新后，所有主题都停止工作。

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

我需要做什么才能让他们重新工作？

回答by Rob W

Support for Custom.csshas 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.

Custom.css版本 32 中的 Chrome 已删除对 的支持。
此答案提供了两种方法可以在开发人员工具中轻松激活样式表。推荐使用第二种方法，但仅适用于 Chrome 33+，第一种方法也适用于 Chrome 32。

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

两种方法都是Chrome扩展，使用下面的例子，请按照以下步骤操作：

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.

1. 创建一个目录并将以下文件放入其中。
2. 去 chrome://extensions
3. 选择“开发者模式”
4. 点击“加载解压后的扩展”
5. 选择刚刚创建的目录。

True emulation of Custom.css

真正的模拟 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 pagelike Custom.css.
Note: If you're using Chrome 33+, then I strongly recommend the method in the next section over this one.

本节使用如何将 javascript 注入 Chrome DevTools 本身中描述的两种技术之一。这个扩展可以很容易地推广到完全模拟 Custom.css，即像 Custom.css 一样激活每个页面上的样式表。
注意：如果你使用的是 Chrome 33+，那么我强烈推荐下一节中的方法而不是这个方法。

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

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

自定义.css

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

---

---

Official method (Chrome 33+ only)

官方方法（仅限 Chrome 33+）

If you want to customize your devtools style, chrome.devtools.panels.applyStyleSheethas 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").

如果你想自定义你的 devtools 风格，chrome.devtools.panels.applyStyleSheet必须使用。此功能目前隐藏在一个标志（--enable-devtools-experiments，需要重新启动 Chrome）和一个复选框（启用该标志后，打开 devtools，单击齿轮图标，转到实验并选中“允许 UI 主题”）。

manifest.json

清单文件

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

devtools.html

开发工具.html

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

devtools.js

开发工具.js

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

Custom.css

自定义.css

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

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

有关详细信息，请参阅https://code.google.com/p/chromium/issues/detail?id=318566

回答by Brian Ogden

There is now developer themes in Chrome Store for 33+

Chrome 商店中现在有 33 岁以上的开发者主题

Open chrome://flags and Enable Developer Tools experiments. Open developer tools settings, select Experiments tab, and check Allow Custom UI Themes. Install any theme, you can search for “devtools theme” on the Chrome Web Store. It'll also keep you up to date.

打开 chrome://flags 并启用开发人员工具实验。打开开发人员工具设置，选择实验选项卡，然后选中允许自定义 UI 主题。安装任何主题，您可以在 Chrome 网上应用店搜索“ devtools 主题”。它还会让您了解最新情况。

ref

参考

回答by Ravana

I couldn't really understand everything from Rob W but for me

除了我，我无法真正理解 Rob W 的所有内容

manifest.json

清单文件

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

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

和同一文件夹中的 css 文件做了我想要的。如何加载此文件夹已在此处回答。

回答by Brian Moeskau

In my case, I don't care so much about theming devtools as overriding CSS on certain sites (a la greasemonkey). According tothe Man Himself (Paul Irish) the recommended replacement (for that use case at least) is a Chrome extension called Control Freak. I tried it out and it works great for one-off JS/CSS overrides per site. Not sure about theming per se, but it should help people just looking to replace the basic Custom.cssfunctionality as I was.

就我而言，我不太关心主题化开发工具，而不是在某些站点上覆盖 CSS（a lagreamonkey）。 根据Man Himself (Paul Irish) 的说法，推荐的替代品（至少对于那个用例）是一个名为Control Freak的 Chrome 扩展。我试了一下，它非常适合每个站点的一次性 JS/CSS 覆盖。不确定主题本身，但它应该可以帮助那些只想像Custom.css我一样替换基本功能的人。

回答by micjamking

As noted in @Rob W's answer: https://stackoverflow.com/a/21210882/933951, the official recommended method of skinning the Google Chrome Developer tools is by creating an extension to override the default styles which are applied, using the chrome.devtools.panels.applyStyleSheet.

正如@Rob W 的回答中所指出的：https://stackoverflow.com/a/21210882/933951 ，官方推荐的 Google Chrome 开发者工具皮肤的推荐方法是创建一个扩展来覆盖应用的默认样式，使用chrome.devtools.panels.applyStyleSheet.

The process of creating a Chrome extension for this purpose can be a bit tedious to skin each component by hand from scratch, so I've created a small plugin which provides a collection of built-in themes and additional editor settings for Chrome Developer Tools. The extensions also provides developers the ability to create additional custom themes using a simple Sass templating system without writing your own extension.

为此目的创建 Chrome 扩展程序的过程可能有点乏味，从头开始手动为每个组件设置外观，因此我创建了一个小插件，它为 Chrome 开发人员工具提供了一组内置主题和其他编辑器设置。这些扩展还为开发人员提供了使用简单的 Sass 模板系统创建其他自定义主题的能力，而无需编写自己的扩展。

1. Install DevTools Author Chrome extensionfrom Chrome Web Store
2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for flags to take effect.
3. Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI themes.

1. 从 Chrome Web Store安装DevTools Author Chrome 扩展
2. 在 chrome://flags/#enable-devtools-experiments 中启用开发者工具实验。重新启动 Chrome 以使标志生效。
3. 打开开发者工具（cmd + opt + I）；设置 > 实验 > 选中允许自定义 UI 主题。

This will provide, out of the box the following features:

这将提供开箱即用的以下功能：

• The ability to choose from +25 custom editor themes
• Custom font support via enabled system fonts
• Incremental control of font size, from 10px - 22px

• 能够从 +25 个自定义编辑器主题中进行选择
• 通过启用的系统字体支持自定义字体
• 字体大小的增量控制，从 10px - 22px

If you would like to contribute additional themes, you can follow the below steps:

如果您想贡献其他主题，可以按照以下步骤操作：

Fork the GitHub repositoryand then follow the steps below. The Devtools AuthorChrome extension is built using NodeJSand GruntJS.

Fork GitHub 存储库，然后按照以下步骤操作。该Devtools作者的Chrome扩展程序是使用内置的NodeJS和GruntJS。

Installation:

安装：

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

Development:

发展：

$ grunt serve

1. Once grunt is running, to install development extension in Chrome, open Settings> More Tools > Extensions and click on the Load unpacked extension...button. (also enable Allow incognitobelow if you wish).
   • (Disable DevTools Author if you have the extension installed from the Chrome Web Store.)
   • Make sure Developer Tools experiments are enabled and custom UI themes are allowed.
2. Restart DevTools. I find the fastest way to see changes take affect is to undock DevTools in a separate window and then open a subsequent DevTools window (cmd + opt + Iwhile the current DevTools window is focused) after changes have been saved and grunt reloads the assets. You'll then need to reload (close and reopen) the subsequent DevTools window after you make changes.

1. 一旦 grunt 运行，要在 Chrome 中安装开发扩展，打开Settings> More Tools > Extensions 然后点击Load unpacked extension...按钮。（Allow incognito如果您愿意，也可以在下面启用）。
   • （如果您从 Chrome 网上应用店安装了扩展程序，请禁用 DevTools Author。）
   • 确保启用开发者工具实验并允许自定义 UI 主题。
2. 重新启动开发者工具。我发现查看更改生效的最快方法是在单独的窗口中取消停靠 DevTools，然后cmd + opt + I在保存更改并 grunt 重新加载资产后打开后续的 DevTools 窗口（同时聚焦当前的 DevTools 窗口）。然后，您需要在进行更改后重新加载（关闭并重新打开）后续的 DevTools 窗口。

创建其他主题

1. Make a copy of one of the templates from app/styles/themes/templates/and rename the file to your theme name without the underscore, ie. if your theme is called aloha, inside of app/styles/themes/, copy templates/_theme-template.scssand rename it to aloha.scss
2. Add color values for the palette based on the code syntax highlighter variables in your scss file.
   • If you desire more specific targeting for your theme than what is being supported out of the box, you can add those styles to the end of your theme file, after the @include styles().
3. Add your color palette object (name and colors array) to the themes.jsonin app/scripts/
4. In DevTools, select your theme palette in the Author Settingspanel.
5. Preview and adjust your colors as needed. See Development - Step 2.
6. Commit and push your changes to your repo, then create a pull requestfor your new theme once it is ready!

1. 复制其中一个模板app/styles/themes/templates/并将文件重命名为不带下划线的主题名称，即。如果您的主题名为aloha，则将其app/styles/themes/复制templates/_theme-template.scss并重命名为aloha.scss
2. 根据 scss 文件中的代码语法荧光笔变量为调色板添加颜色值。
   • 如果您希望为您的主题提供比现成支持的更具体的目标，您可以将这些样式添加到主题文件的末尾，在@include styles().
3. 将您的调色板对象（名称和颜色数组）添加到themes.jsoninapp/scripts/
4. 在 DevTools 中，在Author Settings面板中选择您的主题调色板。
5. 根据需要预览和调整颜色。请参阅开发 - 第 2 步。
6. 提交并将您的更改推送到您的存储库，然后在准备好后为您的新主题创建拉取请求！

回答by Alex Cory

1. open up devtools ? + option/alt + i
2. open up search tool ? + shift + p(make sure to click on the devtools before doing this keyboard shortcut)
3. search for darkand you will see an option to switch to dark theme

1. 打开开发工具 ? + option/alt + i
2. 打开搜索工具? + shift + p（确保在执行此键盘快捷键之前单击 devtools）
3. 搜索dark，您将看到切换到深色主题的选项

You can also follow the directions here

您也可以按照此处的说明进行操作

回答by GreenRaccoon23

Developer mauricecruzhas made a nice tool for making custom Chrome DevTools themes.

开发人员mauricecruz制作了一个很好的工具来制作自定义 Chrome DevTools 主题。

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

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

It's a lot easier than writing a CSS file (in my opinion).

这比编写 CSS 文件要容易得多（在我看来）。

回答by Jeffrey McFarland

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

我使用了 Chrome 32 的说明，但没有用。我的目标是反转开发人员工具的颜色。我创建了一个目录并在其中放置了三个文件，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" ]
}

run_as_devtools.js

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);
})();