Atom / Electron开发人员工具主题

Question

我最近从使用atom IDE迁移到githubs atom。它没有我需要的一些功能，我找不到合适的包，所以我试图自己做。这也让我对编辑器的工作方式有了深刻的了解。

然而，一个巨大的问题是“开发者工具”中的字体大小。窗口。它很小（我估计大约11px）。谷歌告诉我，我需要安装一个css主题，还有一些主题。甚至还有一个开发工具主题＆＃39;原子包装。但我尝试过的任何东西似乎都没有被应用。是的，＆＃34;允许自定义UI主题＆＃34;已设置。但是，相同的主题在Chrome浏览器中运行（版本60.0）。

我可以在chrome内检查检查员，就像我在{{1}}中可以做的那样吗？ （取消停靠devtools窗口并再次点击CTL SHIFT I）。这将帮助我准确发现我需要配置哪些类以及它们是否已正确应用。

如何判断使用哪种版本的铬/铬原子？谷歌之后可能会有一些功能发生变化＆＃39;如何＆＃39;指南是写的。

如何手动将devtools主题安装到atom？

Here is a related question在浏览器中有效但在原子中无效。

Answer 1

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

在atom中检查devTools窗口涉及三个步骤。

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

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

要实际安装，请按以下步骤操作：

1. 下载并提取/构建源代码。我把它们放在~/atom/devTools中以便将所有东西放在一起。如果使用上述软件包，则需要安装npm个依赖项并运行grunt。
2. 打开atom并切换developer tools窗口。在devTools窗口中，选中'设置 - ＆gt;实验 - ＆gt;允许自定义UI主题`。还要确保禁用内置的黑暗主题。
3. 在devTools窗口中，单击“console”并输入命令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版本的问题，我还没弄明白。