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

Question

我在本网站上使用了Google Developer Tools的一些主题：http://devthemez.com/themes/chrome-developer-tools

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

我需要做些什么才能让它们重新开始工作？

Answer 1

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

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

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

Custom.css

的真实模拟

本节使用How to inject javascript into Chrome DevTools itself中描述的两种技术之一。这个扩展可以很容易地推广到完全模拟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

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 */

---

官方方法（仅限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
}

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 */

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

Answer 2

Chrome Store中现在有33 +的开发者主题

打开chrome：// flags并启用Developer Tools实验。 打开开发人员工具设置，选择“实验”选项卡，然后选中“允许自定义UI主题”。 安装任何主题，您都可以在Chrome网上应用店中搜索“devtools theme”。它还会让你保持最新状态。

ref

Answer 3

我无法理解Rob W的所有内容，但对我而言

的manifest.json

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

和同一文件夹中的css文件做了我想要的。如何加载此文件夹已经在这里得到解答。

Answer 4

在我的情况下，我并不在乎如何将devtools作为重写某些网站上的CSS（la greasemonkey）。 According to人自己（保罗爱尔兰语）推荐的替代品（至少用于该用例）是名为Control Freak的Chrome扩展程序。我尝试了它，它适用于每个站点的一次性JS / CSS覆盖。不确定主题本身，但它应该帮助人们只是想像我一样替换基本的Custom.css功能。

Answer 5

正如@Rob W的回答：https://stackoverflow.com/a/21210882/933951所述，官方推荐的Google Chrome开发人员工具换肤方法是使用{{创建一个扩展来覆盖应用的默认样式1}}。

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

1. 从Chrome网上应用店安装DevTools Author Chrome extension
2. 在chrome：// flags / #enable-devtools-experiments中启用Developer Tools实验。重启Chrome for 标志生效。
3. 打开DevTools（cmd + opt + I）;设置＆gt;实验＆gt;选中允许自定义UI主题。

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

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

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

Fork the GitHub repository然后按照以下步骤操作。 Devtools作者 Chrome扩展程序是使用NodeJS和GruntJS构建的。

安装：

chrome.devtools.panels.applyStyleSheet

开发：

$ git clone git@github.com:<username>/devtools-author.git
$ cd devtools-author
$ npm install

1. 运行grunt后，要在Chrome中安装开发扩展程序，请打开设置＆gt;更多工具＆gt;扩展程序，然后点击加载解压扩展程序... 按钮。 （如果您愿意，也可以在下面启用$ grunt serve ）。
   • （如果您从Chrome网上应用店安装了扩展程序，请停用DevTools作者。）
   • 确保启用了开发人员工具实验并允许自定义UI主题。
2. 重新启动DevTools。我发现看到更改生效的最快方法是在单独的窗口中取消停靠DevTools，然后在保存更改并且grunt重新加载资产后打开后续的DevTools窗口（Allow incognito，同时关注当前的DevTools窗口）。然后，您需要在进行更改后重新加载（关闭并重新打开）后续的DevTools窗口。
创建其他主题
1. 制作cmd + opt + I其中一个模板的副本，并将文件重命名为主题名称，不带下划线，即。如果您的主题在app/styles/themes/templates/内被称为 aloha ，请复制app/styles/themes/并将其重命名为templates/_theme-template.scss
2. 根据scss文件中的代码语法高亮显示器变量为调色板添加颜色值。
   • 如果您希望对主题进行更具体的定位，而不是开箱即用，则可以在aloha.scss之后将这些样式添加到主题文件的末尾。
3. 将调色板对象（名称和颜色数组）添加到@include styles()
中的themes.json
4. 在DevTools中，在作者设置面板中选择主题调色板。
5. 根据需要预览并调整颜色。请参阅开发 - 第2步。
6. 提交并推送您的更改到您的回购，然后在新主题准备就绪后为其创建pull request！

Answer 6

我使用了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

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

开发人员mauricecruz已成为制作自定义Chrome DevTools主题的绝佳工具。

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

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

Answer 8

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

您也可以按照here

的指示进行操作