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

Posted

技术标签:

【中文标题】谷歌浏览器自定义开发者工具主题/颜色架构【英文标题】：Google Chrome Customize Developer Tools Theme / Color Schema 【发布时间】：2014-01-13 16:10:23 【问题描述】：

如何在 Google Chrome 中的开发者工具、javascript 控制台上更改颜色模式？

像这样：

【问题讨论】：

【参考方案1】：
    安装 DevTools 主题，例如 Zero Dark Matrix 转到chrome://flags/#enable-devtools-experiments，并启用Developer Tools experiments。 选择页面底部的Relaunch Now。 F12 打开开发者工具，进入Settings，选择Experiments标签，勾选Allow custom UI themes。 F12，重新加载 DevTools。

【讨论】：

现在不需要其他主题了。【参考方案2】：

DevTools 现在原生支持深色主题：https://developers.google.com/web/updates/2016/02/devtools-digest-devtools-go-dark#a_dark_theme_for_devtools

【讨论】：

Chrome 版本 49.0.2623 可用于 Windows，该版本于 2016 年 3 月 2 日成为稳定版本。您是说 Chrome for Linux 的 v49.0.2623 中不提供它吗？【参考方案3】：

正如堆栈溢出答案中所述：https://***.com/a/21210882/933951，官方推荐的为 Google Chrome 开发者工具换肤的方法是使用chrome.devtools.panels.applyStyleSheet 创建一个扩展来覆盖应用的默认样式。

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

    从 Chrome 网上应用店安装 DevTools Author Chrome extension 在 chrome://flags/#enable-devtools-experiments 中启用开发者工具实验。重新启动 Chrome 以获取 标志生效。 打开 DevTools (cmd + opt + I);设置 > 实验 > 选中允许自定义 UI 主题。

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

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

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

Fork the GitHub repository，然后按照以下步骤操作。 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，然后在保存更改并 grunt 重新加载资产后打开后续的 DevTools 窗口（@98​​7654331@，而当前的 DevTools 窗口是焦点）。然后，您需要在进行更改后重新加载（关闭并重新打开）后续的 DevTools 窗口。
创建其他主题
    从app/styles/themes/templates/ 复制其中一个模板并将文件重命名为您的主题名称不带下划线，即。如果您的主题名为 aloha，在 app/styles/themes/ 内，复制 templates/_theme-template.scss 并将其重命名为 aloha.scss 根据 scss 文件中的代码语法高亮变量为调色板添加颜色值。 如果您希望主题定位比现成支持的更具体，您可以将这些样式添加到主题文件的末尾@include styles() 之后。 将您的调色板对象（名称和颜色数组）添加到app/scripts/ 中的themes.json 在 DevTools 的 作者设置 面板中选择您的主题调色板。 根据需要预览和调整颜色。请参阅开发 - 第 2 步。 提交您的更改并将其推送到您的存储库，然后在准备就绪后为您的新主题创建一个pull request！

【讨论】：

【参考方案4】：

和你的主题有关，请看这里： http://www.hongkiat.com/blog/chrome-devtools-theme/

【讨论】：

此答案过于依赖外部内容，无法成为一个很好的答案。您必须从答案中的链接中提供足够的信息才能使其独立。【参考方案5】：

    打开 chrome 浏览器 按 F12 键。现在开发者工具窗口出现在屏幕上 选择设置或按 F1 选择 -> 首选项 -> 外观 -> 主题。 选择深色或浅色

【讨论】：

【参考方案6】：

Click on settings => Theme => Dark

【讨论】：

以上是关于谷歌浏览器自定义开发者工具主题/颜色架构的主要内容，如果未能解决你的问题，请参考以下文章

求修改安卓全局字体颜色的教程(求详细)

Angular Material 主题系统-- 自定义主题

VS开发工具切换主题颜色

谷歌公布2021年最热门Chrome开发者工具

开发工具visual studio code切换主题颜色

谷歌浏览器中的用户脚本调试