Custom.css已停止使用32.0.1700.76 Google Chrome浏览器更新

我使用本网站的一些Google开发者工具主题： http : //devthemez.com/themes/chrome-developer-tools

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

我需要做些什么来让他们再次工作？

谢谢

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

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

  1. 创build一个目录，并在其中放入以下文件。
  2. 转到chrome://extensions
  3. select“开发者模式”
  4. 点击“加载解压后的扩展名”
  5. select刚创build的目录。

真正模仿Custom.css

本节使用了如何将JavaScript注入Chrome开发工具本身的两种技术之一。 这个扩展可以很容易地推广到完全模拟Custom.css，也就是激活Custom.css等每个页面上的样式表。
注意：如果您使用的是Chrome 33+，那么我强烈build议您在下一节中讨论这个方法。

的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 。 此function目前隐藏在标志后面（ --enable-devtools-experiments ，需要重新启动Chrome）和一个checkbox（启用标志后，打开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

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

打开chrome：//标志并启用开发者工具实验。 打开开发人员工具设置，select实验标签，然后选中允许自定义用户界面主题。 安装任何主题，您可以在Chrome网上应用店中search“ devtools主题 ”。 它也会让你保持最新。

REF

就我而言，我并不在意在主题化的工具，而是在某些网站上重写CSS（la greasemonkey）。 据他自己（保罗·爱尔兰）推荐的替代品（至less该用例）是一个名为控制怪胎的Chrome扩展。 我试了一下，它对每个站点的一次性JS / CSS覆盖效果很好。 不知道主题本身，但它应该帮助人们只是Custom.css我一样replace基本的Custom.cssfunction。

我无法真正理解Rob W的一切，但是对我来说

的manifest.json 

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

和CSS文件在同一个文件夹做了我想要的。 如何加载这个文件夹已经在这里回答了。

我使用了Chrome 32的说明，但没有奏效。 我的目标是颠倒开发人员工具的颜色。 我创build了一个目录，并在其中放置了三个文件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); })();

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

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

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

正如@Rob W的回答所示： https ://stackoverflow.com/a/21210882/933951，谷歌Chrome开发人员工具的皮肤正式推荐的方法是创build一个扩展来覆盖应用的默认样式，使用chrome.devtools.panels.applyStyleSheet 。

为此目的创build一个Chrome扩展的过程可能会有点繁琐，因此我已经创build了一个小插件，它为Chrome开发人员工具提供了一组内置的主题和其他编辑器设置。 这些扩展还使开发人员能够使用简单的Sass模板系统创build更多的自定义主题， 而无需编写自己的扩展 。

  1. 从Chrome网上应用店安装DevTools Author Chrome扩展程序
  2. 在chrome：// flags /＃enable-devtools-experiments中启用开发者工具实验。 重新启动Chrome以使标志生效。
  3. 打开DevTools（cmd + opt + I）; 设置>实验>选中允许自定义用户界面主题。

这将提供以下function：

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

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

分叉GitHub存储库 ，然后按照下面的步骤。 Devtools作者 Chrome扩展使用NodeJS和GruntJS构build 。

安装： 

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

发展： 

 $ grunt serve
  1. 一旦运行grunt，要在Chrome中安装开发扩展，打开设置 >更多工具>扩展，然后单击加载解压扩展…button。 （如果您愿意，也启用Allow incognito ）。
    • （如果您从Chrome网上应用店安装了扩展程序，请禁用DevTools作者。）
    • 确保开发者工具实验已启用，并允许自定义用户界面主题。
  2. 重新启动DevTools。 我发现查看更改生效的最快方法是在单独的窗口中取消DevTools，然后在保存更改并重新加载资源后打开后续的DevTools窗口（当前DevTools窗口关注时， cmd + opt + I ）。 您需要在更改后重新加载（closures并重新打开）后续的DevTools窗口。

创build更多的主题

  1. 从app/styles/themes/templates/制作一个模板的副本，然后将文件重命名为不带下划线的主题名称。 如果你的主题被称为aloha ，在app/styles/themes/ ，复制templates/_theme-template.scss并且把它重命名为aloha.scss
  2. 根据scss文件中代码语法高亮度variables添加调色板的颜色值。
    • 如果您希望针对主题进行更具体的定位而不是开箱即用，则可以在@include styles()之后将这些样式添加到主题文件的末尾。
  3. 将你的调色板对象（名字和颜色数组）添加到app/scripts/
  4. 在DevTools中，在“ 作者设置”面板中select您的主题调色板。
  5. 根据需要预览和调整颜色。 见开发 – 步骤2 。
  6. 提交并将更改推送到您的回购库，然后在准备就绪后为您的新主题创build拉取请求 ！
    Interesting Posts

    是否有可能在浏览器中模拟方向？

    IE 11开发者工具问题 – window.onload中的exception

    Chrome Profiler中的“未优化”警告是什么意思？

    Google开发者工具“networking”标签在redirect后清除