Atom/Electron 开发者工具主题化

Question

我最近从使用 netbeans IDE 迁移到 githubs atom。它没有我需要的一些功能，而且我找不到合适的包，所以我正在尝试自己做。这也让我深入了解了编辑器的工作原理。

不过，一个大问题是“开发者工具”窗口中的字体大小。它很小（我猜大约 11px）。谷歌告诉我，我需要安装一个 CSS 主题，那里有一些。甚至还有一个用于 atom 的“开发工具主题”包。但是我尝试过的任何东西似乎都没有应用。是的，已设置“允许自定义 UI 主题”。但是，相同的主题在 chrome 浏览器（60.0 版）中确实有效。

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

我如何知道正在使用哪个版本的铬/铬原子？谷歌的“操作方法”指南编写完成后，某些功能可能发生了变化。

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

Here is a related question 在浏览器中有效，但在 atom 中无效。

Answer 1

我不太喜欢回答自己的问题，但我会在此处发布此问题，以供其他有问题的人参考。

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

1. 通过运行electron --remote-debugging-port=9222 /usr/lib/atom 命令通过electron 启动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 窗口中检查“设置 -> 实验 -> 允许自定义 UI 主题”。还要确保禁用内置的深色主题。
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版本的问题，我还没有弄清楚。