Atom/Electron开发人员工具主题

Question

我最近从使用netbeans IDE迁移到githubs​​。它没有我需要的一些功能，我找不到合适的软件包，所以我正在尝试自己做。这也让我对编辑的工作方式有了很好的了解。

但是，一个巨大的问题是'开发人员工具'窗口中的字体大小。这是微小的（我猜大约11px）。谷歌告诉我，我需要安装一个css主题，并有几个。甚至还有一个针对原子的“开发工具主题”包。但我没有尝试过似乎应用。是的，“允许自定义用户界面主题”已设置。但是，相同的主题可以在Chrome浏览器（ver 60.0）中运行。

我可以检查​​内的检查员吗，就像我在chrome中可以做的那样？ （拆开devtools窗口并再次打CTL SHIFT I）。这将帮助我发现我需要配置哪些类，以及它们是否已正确应用。

我该如何判断铬/铬原子的哪个版本正在使用？在Google的'如何撰写'指南之后，有些功能可能会发生变化。

如何手动将devtools主题安装到原子中？

Here is a related question它在浏览器中工作，但不在原子中。

Answer 1

我真的不喜欢回答我自己的问题，但我会在这里发布此问题给其他任何有问题的人。

检查原子中的devTools窗口涉及三个步骤。经由electron

1. 启动​​通过运行命令electron --remote-debugging-port=9222 /usr/lib/atom。该端口可以是任何有效的端口号，路径可能因操作系统而异。
2. 一旦​​打开，切换developer tools窗口并将其取消。
3. 打开一个单独的chrome（也可以与chromium一起使用）浏览器并导航到chrome://inspect。应该列出2或3个“远程目标”条目。点击inspect会将浏览器devTools窗口附加到​​。

要安装主题，请先找到chrome extension，然后在添加到原子之前在浏览器中对其进行测试。就我个人而言，我使用了Devtools Author，它有许多内置主题和简单的字体大小的滑块。

实际安装，请按照下列步骤操作：

1. 下载并提取/生成源代码。我把它们放在~/atom/devTools中，以保持一切。如果使用上述软件包，则需要安装npm依赖项并运行grunt。
2. 打开​​并切换到developer tools窗口。在devTools窗口中，勾选'设置 - >实验 - >允许自定义用户界面主题'。另外确保内置的黑暗主题是禁用的。
3. 在devTools窗口中单击“控制台”并输入命令require('remote').require('browser-window').addDevToolsExtension('/path/to/your/theme')。如果成功，则应打印主题的名称，如果出现问题，则输入undefined。
4. 重新启动devTools窗口以查看正在使用的主题。当主窗口关闭/打开并重启系统时，它将持续。

如果使用上述主题，它会向devTools添加一个'作者设置'选项卡，您可以从中选择主题和字体大小。

删除主题运行require('remote').require('browser-window').removeDevToolsExtension('theme name')。要查看运行require('remote').require('browser-window').getDevToolsExtensions()的主题名称。

至于我关于chrome版本被使用的问题，我还没弄明白。