如何调试电子生产答案

【问题标题】：How to debug electron production如何调试电子生产
【发布时间】：2019-08-10 01:47:48
【问题描述】：

我无法在使用电子打包程序构建的电子应用程序中打开 chrome 开发工具。

我尝试过mainWindow.webContents.openDevTools()，但这没有用。

查看在线和其他 SO 答案，我发现注释掉了 rendererConfig.devtool = '' 和 webConfig.devtool = '' 但这也没有什么不同。

我也尝试添加一个快捷键来打开开发工具，但这没有任何效果。

我正在使用最新版本的电子。

提前感谢您的帮助。

【问题讨论】：

不知道为什么快捷键不适合你；它对我有用：stackoverflow.com/a/61281774/2604813

标签： electron

【解决方案1】：

我发现调试生产应用程序的一种方法是从带有参数--remote-debugging-port=8315 的终端运行.exe。这将允许通过在 chrome 中转到 http://localhost:8315/ 进行调试。

【讨论】：

谢谢。这对我帮助很大。

【解决方案2】：

在您的main注册一个快捷方式

const ret = globalShortcut.register('CommandOrControl+Shift+I', () => {
     mainWindow.webContents.toggleDevTools();
});

【讨论】：

您需要先确认您的电子版，例如：当前版本是 16，有些旧版本是 2.0.x，所以在这里查看 API：github.com/electron/electron/tree/v1.4.0

【解决方案3】：

vue-electron 使用的是 electron 2.0.x，你需要修改 src/main/index.js，同时使用openDevTools，例如：

import { app, BrowserWindow , globalShortcut} from 'electron'

  const ret = globalShortcut.register('F11', () => {
    mainWindow.webContents.openDevTools()
  })

运行生产应用，按F11，你会发现日志：

【讨论】：