Custom.css已停止在32.0.1700.76米的Google Chrome更新中工作 [英] Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

问题描述

我通过此网站使用Google开发人员工具的一些主题： http://devthemez.com/themes/chrome-developer -tools

但是，在更新32.0.1700.76之后，所有主题已停止工作。

<

感谢在adv

解决方案

支持 Custom.css 已从版本32中的Chrome中删除。

此答案提供了两种方法，在开发工具中。建议使用第二种方法，但只适用于Chrome 33+，第一种方法也适用于Chrome 32。

这两种方法都是Chrome扩展程序，请按照以下步骤操作：

1. 创建目录并将以下文件放入其中。


2. 到 chrome：// extensions


3. 选择开发者模式


4. 未包装的扩展程序


5. 选择刚刚创建的目录。

$ c> Custom.css

本节使用如何注入JavaScript到Chrome DevTools本身。此扩展可以很容易地推广到完全模拟Custom.css，即每个页面上激活样式表如Custom.css。

注意：如果您使用Chrome 33+

manifest.json

content_scripts：[{
js：[run_as_devtools.js]，
matches：[ < all_urls> ] 
}]，
键：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 '）; 
 l.rel ='stylesheet'; 
 l.href = chrome.runtime.getURL（'Custom.css'）; 
 document.head.appendChild（l）; 
}）（）; 
  

Custom.css

  / *无论你在Custom.css中有什么* / 
  

---

官方方法（仅适用于Chrome 33+）

如果您要自定义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 
} 
  

< h2> 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

  / *无论您在Custom.css中有什么* / 
  

，请参阅 https://code.google.com/p/chromium/issues/detail?id= 318566

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?

Thanks in adv

解决方案

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

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