主进程断点不生效?需确保--inspect=9229在args中位于"."之前,runtimeExecutable指向本地Electron二进制,启用ELECTRON_ENABLE_LOGGING,TypeScript项目配准sourceMaps和outFiles,渲染进程调试须用pwa-chrome attach并正确设置webRoot和加载时机。

主进程断点不生效?先确认 --inspect 参数位置和 runtimeExecutable
Electron 12+ 默认关闭 V8 Inspector,electron . 启动根本不会暴露调试端口。VSCode 的 node 类型调试器只能 attach,不能自动注入协议——你得让 Electron 自己带上 --inspect=9229,且必须写在 . 前面。
-
args数组里写成["--inspect=9229", "."]才有效;[".", "--inspect=9229"]会被完全忽略 -
runtimeExecutable必须指向本地 Electron 二进制:${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"]
渲染进程连不上?webRoot、openDevTools() 和加载时机三者缺一不可
渲染进程本质是 Chromium 页面,不能用 node 类型调试,必须走 Chrome DevTools Protocol(CDP)。VSCode 要通过 pwa-chrome 类型 attach 到 --remote-debugging-port 暴露的端口,但前提是页面已就绪、路径映射正确。
- 代码里必须调用
win.webContents.openDevTools({ mode: 'detach' }),且放在'ready-to-show'事件之后,否则窗口未就绪会报错 -
launch.json中url推荐用http://localhost:3000(对应 vite dev server),而非file://;若坚持用file://,必须配webRoot: "${workspaceFolder}/src",否则断点找不到源文件 - 启动命令要同时带两个参数:
electron --inspect=9229 --remote-debugging-port=9222 .,主/渲染端口别设一样 - 访问
http://localhost:9222/json,能列出渲染页说明端口已就绪;返回空或 404 表示参数没生效或被占用
双进程一起调试?compounds 不是并发,而是严格分步触发
VSCode 不支持单条配置同时 attach 主进程和渲染进程。强行合并会导致端口冲突、子窗口无断点、调试器反复重连。必须定义两个独立配置,并靠 compounds 控制执行节奏——先拉起主进程,等它创建好 BrowserWindow,再附加到渲染端口。
- 主进程配置:
type: "node",request: "attach",port: 9229,protocol: "inspector" - 渲染进程配置:
type: "pwa-chrome",request: "attach",port: 9222,webRoot指向 HTML 所在目录 -
compounds里顺序不能颠倒:"configurations": ["Debug Main Process", "Debug Renderer Process"],VSCode 会等第一个完成后再触发第二个 - 不要在
main.js开头就调openDevTools(),放到'ready-to-show'后更稳;也别指望 compounds “一键全停”,它只管启动顺序,不接管生命周期
最常被忽略的路径映射问题:断点灰了,不是代码错,是 VSCode 找不到源文件
哪怕所有参数都对,断点仍灰色,大概率是路径映射失败。VSCode 靠 sourceMap 和 webRoot 把生成代码回溯到源码,一旦错位,就只能看到转译后的内容。
- 用
electron-vite或自定义构建时,outFiles必须精确匹配实际输出路径,比如"${workspaceFolder}/dist/main.js",不能写成"./dist/**" - 若渲染页用
loadFile('index.html'),webRoot得指向index.html所在目录,而不是项目根目录 - React/Vue 组件调试需额外安装对应 DevTools:
electron-devtools-installer,且installExtension必须在app.whenReady()之后调用 - 避免在调试时启用
--disable-features=OutOfBlinkCors等 flag,这类参数会让 DevTools 加载失败或网络面板空白


















