谷歌浏览器自定义开发人员工具主题/颜色模式

DevTools现在支持黑暗主题:https://developers.google.com/web/updates/2016/02/devtools-digest-devtools-go-dark#a_dark_theme_for_devtools

正如此堆栈溢出答案中所述:https://stackoverflow.com/a/21210882/933951,官方推荐的为Google Chrome开发人员工具设置外观的方法是创建一个扩展来覆盖应用的默认样式,使用chrome.devtools.panels.applyStyleSheet.

创建一个Chrome扩展用于此目的的过程可能会有点乏味的皮肤从无到有手中的每个组成部分,所以我创建了一个小插件,提供集合内置的Chrome开发者工具的主题和额外的编辑器设置.这些扩展还使开发人员能够使用简单的Sass模板系统创建其他自定义主题,而无需编写自己的扩展.

从Chrome网上应用店安装DevTools Author Chrome扩展程序

在chrome:// flags/#enable-devtools-experiments中启用Developer Tools实验.重启Chrome以使标志生效.

打开DevTools(cmd + opt + I); 设置>实验>选中允许自定义UI主题.

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

能够从+25个自定义编辑器主题中进行选择

通过启用的系统字体支持自定义字体

增量控制字体大小,从10px - 22px

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

分叉GitHub存储库,然后按照以下步骤操作.该Devtools作者的Chrome扩展程序是使用内置的NodeJS和GruntJS.

安装:

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

发展:

$ grunt serve

运行grunt后,要在Chrome中安装开发扩展程序,请打开"设置" >"更多工具">"扩展程序",然后单击" 加载解压缩的扩展程序..."按钮.(Allow incognito如果您愿意,也可在下面启用).

(如果您从Chrome网上应用店安装了扩展程序,请禁用DevTools作者.)

确保启用了Developer Tools实验并允许自定义UI主题.

重启DevTools.我发现看到更改生效的最快方法是在单独的窗口中取消停靠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.json中app/scripts/

在DevTools中,在" 作者设置"面板中选择主题选项板.

根据需要预览和调整颜色.请参阅开发 - 步骤2.

提交并将更改推送到您的仓库,然后在新主题准备就绪后为其创建拉取请求!

这与你的主题有关,请看一下:http: //www.hongkiat.com/blog/chrome-devtools-theme/

要么

http://devthemez.com/

安装像Zero Dark Matrix这样的DevTools主题

转到chrome://flags/#enable-devtools-experiments,然后启用Developer Tools experiments.

选择 Relaunch Now页面底部.

F12要打开开发人员工具,请转到Settings,选择Experiments选项卡,然后选中Allow custom UI themes.

F12,重新加载DevTools.