时间戳

首页 > 解决方案 > 在没有源代码或构建过程的 Electron 应用程序的生产构建中打开 Chromium DevTools

javascript - 在没有源代码或构建过程的 Electron 应用程序的生产构建中打开 Chromium DevTools

问题描述

有没有办法在打包并分发给您的 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，但我不确定它是否适用于生产版本。

标签： javascriptelectron

解决方案

在没有第三方代码的情况下做到这一点的方法确实是使用--remote-debugging-port标志。

以 Signal 为例，采取以下步骤：

  1. 从 CLI 启动应用程序
signal-desktop --remote-debugging-port
  1. 在 Google Chrome 浏览器中打开调试 URL（在本例中http://localhost:39733/），这将打开一个带有应用名称的页面
    。
  2. 单击以打开一个屏幕，您可以单击以使用该应用程序并在 devtools 中查看输出
    项目清单

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

推荐阅读