在没有源代码或构建过程的电子应用的生产版本中打开Chromium DevTools

Question

是否有办法在打包并分发给您的Electron生产版本上打开devtool？

例如，我想看看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()

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

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

Answer 1

找到了一个名为debugtron的开源项目来完成此任务。

Answer 2

无需第三方代码即可完成此操作的方法确实是使用 --remote-debugging-port 标志。

以Signal为例，步骤如下：

1. 从 CLI 启动应用程序

signal-desktop --remote-debugging-port

2. 在 Google Chrome 浏览器中打开调试网址（在本例中为 http://localhost:39733/），这将打开一个包含应用名称的页面
   。
3. 点击打开一个屏幕，您可以点击左右使用应用程序并查看 devtools 中的输出
   

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