启用调试工具

Electron 中打开调试窗口的方法有多种，但前提都需要在创建 Browser Window 时启用 devTools 特性，如：

1
2
3
4
5
6
7
8

const win = new BrowserWindow({
  width: 1080,
  height: 768,
  title: "test window",
  webPreferences: {
    devTools: true,
  },
});

启用 devTools 特性后，可以通过下面几种方式打开调试窗口：

方式 1

在代码中使用BrowserWindow.webContents.openDevTools()打开调试窗口。

方式 2

通过快捷键Ctrl+Shift+I打开调试窗口。

方式 3

在程序的启动命令行中添加--remote-debugging-port=8888参数，然后使用浏览器打开调试页面http://127.0.0.1:8888即可进行调试。

这种方式默认调试的是渲染进程，如需调试主进程则需要使用--inspect=8888参数。

另外，如果打开调试页面时提示WebSockets request was expected而无法显示调试工具，需要使用访问chrome://inspect/打开 inspect 页面，配置对应的发现 ip 和端口，如localhost:8888：

配置完成后，刷新 inspect 页面后在Remote Target中选择对应的调试目标进行调试。

禁用调试工具

在软件上线发布时，我们需要在生产环境完全禁用调试工具，此时只需要将devTools属性设置为 false 即可，如：

1
2
3
4
5
6
7
8

const win = new BrowserWindow({
  width: 1080,
  height: 768,
  title: "test window",
  webPreferences: {
    devTools: false,
  },
});

上面的代码虽然可以禁用调试工具，但在开发环境中，我们往往需要打开调试工具，因此在每次“开发->发布版本”时都需要来回修改 devTools，容易出现漏改的情况。

可以使用Electron判断程序运行环境介绍的方法来判断当前是否为生产环境，启用/禁用 devTools 的代码可以优化为：

1
2
3
4
5
6
7
8

const win = new BrowserWindow({
  width: 1080,
  height: 768,
  title: "test window",
  webPreferences: {
    devTools: !isProduction(),
  },
});