在 Electron 应用程序的生产版本中打开 Chromium DevTools，无需源代码或构建过程

Question

有没有办法在打包并分发给您的 Electron 生产版本上打开开发工具？

例如，我想研究一下 Slack 的应用程序。我知道它是用 Electron 构建的，我想打开 devtools 看看它的某些部分是如何构建的。

在 macOS 上我尝试过：

ELECTRON_ENV=development /Applications/Slack.app/Contents/MacOS/Slack --debug --auto-open-devtools-for-tabs

以及 Cmd+Option+I 的常用组合键和检查调试菜单/视图。

这些似乎都没有什么区别。

请注意，已经有一些解决方案建议您通过注入以编程方式执行此操作：

  remote.BrowserWindow.getFocusedWindow().webContents.openDevTools()

但是我不能这样做，因为我无权访问源代码或原始构建过程。有没有办法从外部触发开发工具？

到目前为止，我见过的最有希望的方法是，remote-debugging-port但我不确定它是否适用于生产版本。

Answer 1

无需第三方代码即可实现此目的的方法确实是使用该--remote-debugging-port标志。

以Signal为例，执行以下步骤：

1. 从 CLI 启动应用程序

signal-desktop --remote-debugging-port

2. 在 Google Chrome 浏览器中打开调试 URL（在本例中http://localhost:39733/），这将打开一个带有应用程序名称的页面
   。
3. 单击打开一个屏幕，您可以在其中单击以使用该应用程序并在开发工具中查看输出
   

或者，您可以chrome://inspect/#devices在 Google Chrome 浏览器中打开，然后单击“检查”（在应用程序名称下方）以打开同一窗口