谷歌浏览器自定义开发人员工具主题/配色方案

时间：2013-12-25 22:57:27

标签： javascript css google-chrome-extension google-chrome-devtools google-chrome-theme

如何更改Google Chrome中的开发人员工具，JavaScript控制台的配色方案？

像这样：

enter image description here

6 个答案:

答案 0 :(得分：35)

  1. 安装像Zero Dark Matrix
    2. 这样的DevTools主题
  2. 转到chrome://flags/#enable-devtools-experiments，然后启用Developer Tools experiments。
  3. 选择页面底部的Relaunch Now。
  4. F12 打开开发者工具，转到Settings，选择Experiments标签，然后选中Allow custom UI themes。
  5. F12 ，重新加载DevTools。

答案 1 :(得分：25)

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

enter image description here

答案 2 :(得分：6)

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

为此目的创建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主题。

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

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

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

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

    安装：

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

    开发：

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

答案 3 :(得分：5)

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

或

http://devthemez.com/

答案 4 :(得分：0)

enter image description here

  1. 打开Chrome浏览器
  2. 按F12键。现在开发人员工具窗口出现在屏幕上
  3. 选择位置或按F1
  4. 选择->首选项->外观->主题。
  5. 选择深色或浅色

答案 5 :(得分：0)

enter image description here Click on settings => Theme => Dark

[1]: https://i.stack.imgur.com/7hKIR.png

相关问题
最新问题