Electron主进程调试需显式添加--inspect=9229且置于“.”之前,runtimeExecutable须指向本地electron二进制;渲染进程需--remote-debugging-port+openDevTools()+pwa-chrome配置;双进程须用compounds组合并严格区分端口。

主进程断点不生效?不是 VSCode 配错了,而是 Electron 根本没开调试通道——必须显式传 --inspect=9229,且位置不能错。
主进程调试:--inspect 必须在 . 之前,且 runtimeExecutable 指向本地二进制
Electron 12+ 默认禁用 V8 Inspector,electron . 启动后不会暴露调试端口。VSCode 的 node 类型调试器只能 attach,不能自动注入协议。
-
args数组中--inspect=9229必须写在.前面,例如["--inspect=9229", "."];写成[".", "--inspect=9229"]会被 Electron 完全忽略 -
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"]
渲染进程调试:pwa-chrome + --remote-debugging-port + openDevTools() 缺一不可
渲染进程本质是 Chromium 页面,不能用 node 类型调试,必须走 Chrome DevTools Protocol(CDP)。
- 启动命令必须同时带两个参数:
electron --inspect=9229 --remote-debugging-port=9222 .(主/渲染端口别设一样) - 代码里必须调用
win.webContents.openDevTools({ mode: 'detach' }),且放在'ready-to-show'事件之后,否则窗口未就绪会报错 -
launch.json中 type 设为pwa-chrome(VS Code 1.85+ 推荐),port对应--remote-debugging-port,url推荐用http://localhost:3000(vite dev server),而非file:// - 若坚持用
file://,必须配webRoot: "${workspaceFolder}/src",否则断点找不到源文件
双进程一起调试:靠 compounds 组合,但顺序和端口必须严格对齐
VSCode 不支持单条配置同时 attach 主进程和渲染进程。强行合并会导致端口冲突、子窗口无断点、调试器反复重连。
- 定义两个独立配置:一个
type: "node"(主进程,request: "attach",port: 9229),一个type: "pwa-chrome"(渲染进程,port: 9222) -
compounds是「先拉起主进程 → 等它创建好 BrowserWindow → 再附加到渲染端口」,不是并发启动 - 验证主进程是否就绪:Chrome 访问
chrome://inspect,看 Target 列表里有没有你的 Electron 主进程 - 验证渲染进程是否就绪:访问
http://localhost:9222/json,应返回含devtoolsFrontendUrl的数组;空或 404 表示端口未启用或被占
最容易被忽略的是:主进程的 --inspect 和渲染进程的 --remote-debugging-port 是两套完全独立的协议,不能混用、不能省略、不能靠“自动发现”——它们必须由你手动传入、手动配置、手动验证端口存活。


















