electron preload.js调试技巧ignore list:Content scripts injected by extensions

38 阅读1分钟

使用electron开发工具时,我使用到了vite,为了使用vue devserver加快开发速度,通常在dev环境,BrowserWindow会加载dev server的url,也就是这样子

let win = new BrowserWindow({});
win.loadURL("http://localhost:8065/");

但是我还想使用nodejs的特性,很明显在web页面不行,我不想写在主进程,因为需要ipc通讯,很麻烦。

看到可以通过preload.js来实现我的需求:

let win = new BrowserWindow({
    sandbox: false,
    contextIsolation: true,
    preload: join(__dirname, './preload.js'),
});
win.loadURL("http://localhost:8065/");

在preload.js里面注入一个全局变量给渲染界面使用,最重要的是直接可以在preload脚步里面写nodejs的逻辑了

contextBridge.exposeInMainWorld("gss", gss)

现在问题来了,我要调试这个preload.js,发现在devtools里面能看到preload.js的打印,也能够下断点,但是无法步进,如果我逐行调试,就导致每一行我都需要下断点,非常难受。

解决办法

查了很多资料,发现是chrome的ignore list的问题,因为preload.js属于注入的脚本,所以导致被忽略了

image.png

image.png

取消选中即可,现在可以逐行调试preload.js了,开发起来非常丝滑!