如何调试电子制作二进制文件

Question

我无法在我的电子应用程序的内置版本中打开devtools。因此，我想找到另一种解决方案来记录只出现在生产版本中的任何错误。

有没有什么好方法可以从电子应用程序中获取一些console.logs，如果它已经构建好了？ 显然我可以通过打开chrome dev工具调试我的电子应用程序的“开发”版本（运行npm run dev）。但我找不到任何方法在我的生产应用程序中启用它们。 我使用的是最新版本的electron-vue

感谢您提前提供任何帮助。

Answer 1

在生产中启用Chrome devtools可以通过多种方式实现：

1. 环境变量：
   • E.g。在Windows set ELECTRON_ENV=development&& myapp.exe
   下
2. 将特殊参数传递给您的应用
   • E.g。 myapp.exe --debug
3. 通过用户设置调试模式（如果您有持久设置）
4. 打开devtools的菜单项
   • 可与1.-3组合使用。在调试模式下只有该菜单项

你可以检查是否1.-3。已设置，如果是，则只需通过mainWindow.webContents.openDevTools()

打开devtools

我个人使用1.，3和4的组合。我只是解锁一个开发人员菜单，允许我打开devtools或打开userdata文件夹给我。

如果您还想记录关键错误，那么electron-log看起来像电子的一个相当受欢迎的选项。

Answer 2

在 Chrome 80+ 中启动带有 --remote-debugging-port=8315 标志设置的 Electron 应用程序并导航到 chrome://inspect/#devices。然后点击 Configure... 并添加 localhost:8315 作为发现服务器。

然后，等待您的 Electron 实例出现在设备列表中，然后单击 inspect。

Answer 3

在Mac上，只需运行open /Applications/WhatsApp.app --args --remote-debugging-port=8315，然后打开https://localhost:8315

Answer 4

这样做的方法是使用 --remote-debugging-port 标志。

以Signal为例，步骤如下：

1. 从 CLI 启动应用程序

signal-desktop --remote-debugging-port

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

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

Answer 5

这是在Mac上对我有用的东西。

1. 在终端输入lldb path/to/build.app
2. 在打开的调试器中，键入run --remote-debugging-port=8315。它会打开您的应用程序窗口。
3. 在http://localhost:8315/上打开Chrome
4. 单击应用程序的名称。例如，Webpack App。
5. 如果在打开的标签中看不到任何内容，请专注于应用程序的窗口。

Answer 6

在app.on（'ready'）节末尾的main / index.js中，只需添加：

mainWindow.webContents.openDevTools（）;

仅用于调试，当电子打开一个空窗口，但开发版本运行良好时，这种方式对我很有帮助。

Answer 7

https://github.com/bytedance/debugtron

Debugtron是一个用于调试基于生产中的Electron的应用程序的应用程序。它也是用Electron构建的。

Answer 8

上面的答案对我没有帮助。 （那些带有 -remote-debugging-port 的）

将此代码放入您的 main.js 或类似文件中，它会在启动时自动打开开发工具。

mainWindow.webContents.openDevTools()