必须拆分主进程和渲染进程为两个独立调试配置并用compounds组合触发:主进程用node类型attach到9229端口(--inspect=9229需在args中置于.前),渲染进程用pwa-chrome类型attach到9222端口(需opendevtools()且webroot路径正确)。

主进程和渲染进程无法用同一个调试配置搞定,必须拆成两个独立配置并用 compounds 组合触发——否则断点全灰、变量 undefined、DevTools 打不开都是常态。
主进程断点不生效?检查 --inspect 是否被 Electron 忽略
Electron 12+ 默认关闭 V8 Inspector,electron . 启动时根本不会暴露调试端口。VSCode 的 node 调试器只能 attach,不能自动注入协议。
-
args数组中--inspect=9229必须写在.前面,例如["--inspect=9229", "."];写成[".", "--inspect=9229"]会被完全忽略 -
runtimeExecutable必须指向本地二进制:${workspaceFolder}/node_modules/.bin/electron(macOS/Linux)或${workspaceFolder}/node_modules/.bin/electron.cmd(Windows),不能用全局electron命令 - 加
"env": { "ELECTRON_ENABLE_LOGGING": "true" },终端立刻输出窗口创建、IPC 注册等日志,比等断点快得多 - TypeScript 或 electron-vite 项目需确认
sourceMaps: true,并配outFiles: ["${workspaceFolder}/dist/main.js"]
渲染进程连不上?openDevTools() 和 webRoot 缺一不可
渲染进程本质是 Chromium 页面,不是 Node.js 进程,不能用 node 类型调试,必须走 Chrome DevTools Protocol(CDP)。
- 代码里必须调用
win.webContents.openDevTools({ mode: 'detach' }),且放在'ready-to-show'事件之后,否则窗口未就绪会报错 -
launch.json中type设为pwa-chrome(VS Code 1.85+ 推荐),port对应启动参数里的--remote-debugging-port=9222 - 若用
file://加载页面(如loadFile('index.html')),必须配webRoot: "${workspaceFolder}/src",否则断点找不到源文件 - 推荐改用 HTTP 服务地址(如
http://localhost:3000),可绕过file://跨域限制和路径解析歧义
双进程一起调试?compounds 不是并发,而是顺序依赖
VSCode 不支持单条配置同时 attach 主进程和渲染进程。强行合并会导致端口冲突、子窗口无断点、调试器反复重连。
- 定义两个独立配置:一个
type: "node"(request: "attach",port: 9229),一个type: "pwa-chrome"(request: "attach",port: 9222) -
compounds是「先拉起主进程 → 等它创建好 BrowserWindow → 再附加到渲染端口」,不是并发启动 - 主进程配置里不要加
--remote-debugging-port参数,该参数应统一放在package.json启动命令中,由 Electron 统一处理 - 验证渲染端口是否就绪:访问
http://localhost:9222/json,返回含devtoolsFrontendUrl的数组才说明已就绪
最容易被忽略的是路径映射和加载时机——webRoot 错了,断点永远灰着;openDevTools() 调得太早,DevTools 根本打不开;--inspect 位置错了,主进程调试器连端口都看不到。











