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

问题描述

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

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

然而，在 32.0.1700.76 m 更新后，所有主题都停止工作.

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?

推荐答案

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

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.

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

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

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

真正模拟Custom.css

本部分使用 如何将 javascript 注入 Chrome DevTools 本身.这个扩展可以很容易地推广到完全模拟 Custom.css，即像 Custom.css 一样激活每个页面上的样式表.
注意:如果您使用的是 Chrome 33+，那么我强烈建议您使用下一节中的方法.

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.

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

自定义.css

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

官方方法(仅限 Chrome 33+)

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

---

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").

{
  "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();

自定义.css

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

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

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

这篇关于Custom.css 已在 32.0.1700.76 m Google Chrome 更新中停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！