1. 启用调试工具

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中选择对应的调试目标进行调试。

2. 禁用调试工具

在软件上线发布时，我们需要在生产环境完全禁用调试工具，此时只需要将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()
    }
});

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章