javascript - 谷歌浏览器自定义开发者工具主题/颜色架构

Question

如何在 Google Chrome 的开发人员工具、JavaScript 控制台上更改颜色模式？

像这样：

在此处输入图像描述

score 42 · Accepted Answer

安装 DevTools 主题，如零暗矩阵
转到chrome://flags/#enable-devtools-experiments，并启用Developer Tools experiments。
Relaunch Now在页面底部选择。
F12打开开发人员工具，转到Settings，选择Experiments选项卡，然后检查Allow custom UI themes。
F12, 重新加载 DevTools。

score 32 · Accepted Answer

score 11 · Accepted Answer

正如这个堆栈溢出答案中所述：https ://stackoverflow.com/a/21210882/933951 ，官方推荐的皮肤谷歌浏览器开发工具的方法是创建一个扩展来覆盖应用的默认样式，使用chrome.devtools.panels.applyStyleSheet.

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

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

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

Fork GitHub 存储库，然后按照以下步骤操作。Devtools Author Chrome 扩展是使用NodeJS和GruntJS 构建的。

$ git clone git@github.com:micjamking/devtools-author.git
$ cd devtools-author
$ npm install

$ grunt serve

运行 grunt 后，要在 Chrome 中安装开发扩展，请打开设置> 更多工具 > 扩展，然后单击加载解压的扩展...按钮。（Allow incognito如果您愿意，也可以在下面启用）。
- （如果您从 Chrome Web Store 安装了扩展程序，请禁用 DevTools Author。）
- 确保已启用开发者工具实验并允许自定义 UI 主题。
重新启动开发工具。我发现查看更改生效的最快方法是在单独的窗口中取消停靠 DevTools，然后cmd + opt + I在保存更改并 grunt 重新加载资产后打开后续的 DevTools 窗口（此时当前的 DevTools 窗口是焦点）。然后，您需要在进行更改后重新加载（关闭并重新打开）后续的 DevTools 窗口。

创建其他主题

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