Electron调试需分主进程和渲染进程配置：主进程启动加--inspect=9229并用node类型attach；渲染进程需openDevTools()且用chrome类型调试；双进程需先后启动，注意路径映射、sourceMap和进程复用问题。
主进程调试：启动时必须加 --inspect 参数
Electron 主进程默认不开启 V8 调试协议，VSCode 无法自动连接。直接按 F5 启动只会跑起来，但断点全灰、不生效。
实操上，你得改 package.json 的 start 脚本，加上 --inspect=9229（端口可换，但别被占用）：
"scripts": {
"start": "electron --inspect=9229 ."
}
然后在 VSCode 中配置 .vscode/launch.json，用 attach 模式连本地 Node.js 进程：
-
type必须是node，不是chrome -
request设为attach -
port和启动参数一致（如9229） -
address默认localhost，不用改 - 确保
protocol是inspector（Electron 7+ 默认支持）
渲染进程调试：靠 devTools + chrome 类型配置
渲染进程本质是 Chromium 页面，不能用 node 类型 attach。VSCode 需通过 Chrome Debug Protocol 连接，所以 type 得设成 chrome。
常见错误是：主进程启了 --inspect，但渲染进程没开 DevTools，或 launch.json 里 url 指向错误路径（比如写成 file:// 协议却没加 webRoot）。
- 代码里必须显式调用
win.webContents.openDevTools()（开发时） -
launch.json中url推荐用http://localhost:3000这类服务地址，避免file://跨域和路径解析问题 - 若用
file://，务必配webRoot指向源码根目录（如"${workspaceFolder}/src"） - 确保 Electron 启动时没加
--disable-features=OutOfBlinkCors等干扰调试的 flag
双进程同时调试：两个 launch 配置 + 启动顺序有依赖
VSCode 不支持单个配置同时 debug 主+渲染进程。你得建两个独立的 launch.json 条目，并手动控制启动节奏。
典型失败场景：先点渲染进程调试，但主进程还没起来，页面加载失败；或者主进程 attach 上了，但渲染进程的 openDevTools() 被执行太早，Chrome 实例尚未就绪。
- 推荐顺序：先运行主进程 debug（F5），等控制台输出 “App ready” 或窗口弹出后，再运行渲染进程 debug
- 两个配置的
name要区分清楚，比如"Debug Main Process"和"Debug Renderer Process" - 主进程配置里加
"console": "integratedTerminal"，方便观察日志触发时机 - 避免在
main.js开头就openDevTools()，放到ready-to-show事件后更稳
常见断点失效原因：路径映射错、代码未 sourcemap、进程复用
最常被忽略的是路径问题 —— VSCode 找不到你写的源码文件，哪怕断点打了也灰着。这通常因为打包、编译或 Electron 加载机制导致实际运行路径和编辑器里看到的不一致。
比如用 TypeScript 写主进程，tsc 输出到 dist/，但 launch.json 里没设 outFiles，VSCode 就不知道 dist/main.js 对应的是 src/main.ts。
- TS 项目必配
outFiles（如["${workspaceFolder}/dist/**/*.js"]） - 启用
sourceMaps且确保生成了.map文件（tsconfig.json里"sourceMap": true） - Electron 6+ 默认复用窗口，第二次启动可能沿用旧渲染进程，导致新断点不触发 —— 加
--force-renderer-process或关掉旧窗口再试 - 检查 VSCode 左下角是否显示 “Debugger attached”，没显示说明根本没连上
路径映射不对，再准的断点也没用。花十分钟核对 webRoot、outFiles、实际加载的 URL 或文件路径，比反复重启快得多。
