javascript - 在没有源代码或构建过程的 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 和检查调试菜单/ View 。

这些似乎都没有什么不同。

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

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

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

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

Answer 1

在没有第三方代码的情况下执行此操作的方法确实是使用 --remote-debugging-port 标志。

以Signal为例，具体步骤如下:

1. 从 CLI 启动应用程序

signal-desktop --remote-debugging-port

1. 在 Google Chrome 浏览器中打开调试 URL(在本例中为 http://localhost:39733/)，这将打开一个页面，其中包含应用程序名称
   。
2. 点击 打开一个屏幕，您可以点击来使用该应用程序并在开发工具中查看输出
   

或者，您可以在 Google Chrome 浏览器中打开 chrome://inspect/#devices 并单击“检查”(在应用程序名称下方)以打开相同的窗口