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

上文讲了桌面端|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)。


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

相关推荐
樊南2 天前
npm安装electron依赖时卡顿,下载不下来
前端·electron·npm
web前端进阶者2 天前
electron-vite_15打包报错proxyconnect
前端·javascript·electron
407指导员2 天前
electron 顶部的元素点不中,点击事件不生效
前端·javascript·electron
努力学前端Hang2 天前
electron-vite打包后图标不生效问题
前端·javascript·electron
朝阳392 天前
electron-vite【实战】自定义标题栏【组件封装】(含异形标题栏,指定区域拖拽,窗口置顶,窗口最小化,窗口最大化,取消最大化,隐藏窗口到托盘等)
electron
朝阳392 天前
electron-vite【实战】登录/注册页
electron
他在时间门外2 天前
使用Electron获取用户信息,监听程序打开,用户退出连接关闭程序【全代码,有图】
前端·javascript·electron
407指导员2 天前
electron opacity 百分比设置不生效 变成1% 问题
前端·javascript·electron
森叶2 天前
【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容
webpack·electron
乐容4 天前
electron窗口锁定、解锁、解决阴影问题
前端·javascript·electron