上文讲了桌面端｜Electron BrowserView 多容器管理（内附 Demo），有同学在私信中问到如何开启 Tab 页内容调试窗口，这里刚好整理一篇笔者用的小技巧来应对，当然一个小技巧撑不起一篇文章，那就要多几个 $手动狗头$ 。

技巧一：视图调试

背景

在之前只有一个BrowserWindow调试页面时，默认会在开发时打开该页面的开发调试工具（chrome dev tools）。

但在使用多视图布局框架后，一个BrowserWindow会存在多个BrowserWindow，且一个 BrowserWindow会有多个 BrowserView 加载各个 URL 页面的情况：

如果是和以前一样，在开发时都打开，那满界面都是 devTools，类似下图：

一是多的乱七八糟，二是一旦关错了，那就只能重新启动来进行调试了。

如果默认都关闭，靠开发修改代码的方式打开，找到代码开启位置也是十分麻烦的，特别对打包给测试的包，想要调问题也很难。

虽然我们也有 cmd + shift + i 来打开调试窗口，但它只针对当前焦点的窗口，而不能打开其中 BrowserView 的调试窗口。

解决方案

默认都不开启 dev tools。

开启调试方式：

先选中你要 Debug 的视图

快速点击三下键盘左侧的 control 按键

相关代码

Typescript 复制代码

export function startDevToolsIfNeed(webContents: WebContents) {
    if (!app.isPackaged || ServiceManager.shared.backendEnvService.env !== 'prod') {
        let clicks = 0;
        let previousClickTime = 0;
        webContents.addListener('before-input-event', (_event, input) => {
            if (input.type === 'keyDown' && input.code === 'ControlLeft') {
                const now = +new Date();
                if (now - previousClickTime < 300) {
                    clicks++;
                } else {
                    clicks = 1;
                }
                previousClickTime = now;

                if (clicks >= 3) {
                    webContents.openDevTools({
                        mode: 'detach',
                        activate: true,
                    });
                    webContents.devToolsWebContents?.focus();
                    clicks = 0;
                }
            }
        });
    }
}

用法也很简单，把上面的方法注册给BrowserView容器或者BrowserWindow窗口即可。

（已经提交到 Demo 源码工程）

技巧二：主进程调试

官方其实有详细的说明：调试主进程

这里简单讲一下实现方式

步骤

1. 配置 inspect 端口打开

在 scripts/package.json 中，配置

electron --inspect=5858 .

运行 yarn start

2. 配置 chrome ，让其可以读取到 inspect 端口

a. 打开 chrome 浏览器

b. 输入chrome://inspect

c. 配置端口，增加 localhost:5858

d. 点击选择下方node进程进行调试，可增加断点，和 Web 一样调试。

技巧三：进程分析

背景

用了多视图方案后，尤其要关注进程和内存问题，这一点可能是很多前端同学所缺失的。因为一不留神，可能就把BrowserView容器持有了，进程销毁不掉，导致内存越用越多。

当然也不是嘲讽前端同学，笔者刚开始做 Electron 开发多容器时，也遇到很多进程没有释放的场景。

解决进程没有释放的前提是，先要能发现到进程没有释放的问题。

分析方式

Windows：任务管理器。

Mac：活动监视器。

以 Mac 为例：

Debug 模式下，查询进程名称为：Electron 的进程。

打包后，进程查询为你当前应用的名称。

这里可以看到多个进程，简单分析一一下：

窗口占用每个窗口会占用一个处理进程（Helper）和一个渲染进程（Renderer）。

容器占用每个容器只会占用一个渲染进程（Renderer）。

感谢阅读，如果对你有用请点个赞 ❤️

桌面端｜Electron 几个开发调试小技巧