可在 VSCode 中同时调试 Electron 主进程和渲染进程，需配置两个调试器：主进程用 node 类型 attach 到 9229 端口，渲染进程用 pwa-chrome attach 到 9222 端口，并通过 compounds 组合启动；注意端口不冲突、source map 启用及渲染进程就绪后再连接。
在 VSCode 中同时调试 Electron 主进程和渲染进程是可行的，关键在于配置两个独立但协同的调试器：一个附加到主进程（Node.js 环境），另一个附加到 Chromium 渲染进程（Chrome DevTools 协议）。Electron 12+ 默认启用 inspect 和 remote-debugging-port，无需额外启动参数，但需确保调试配置正确。
1. 启用 Electron 的远程调试能力
Electron 默认已开启主进程调试（--inspect）和渲染进程调试（--remote-debugging-port），但为明确控制，建议在启动脚本中显式指定：
- 主进程调试端口默认为
9229（可改） - 渲染进程调试端口推荐设为
9222（避免与主进程冲突） - 在
package.json的启动命令中加入："scripts": { "dev": "electron --inspect=9229 --remote-debugging-port=9222 ." }
2. 配置 launch.json 支持双进程调试
在项目根目录的 .vscode/launch.json 中添加两个配置，使用 compounds 实现一键启动双调试：
- 第一个配置（
Launch Main Process）：类型node，端口9229，request为attach，并设置protocol为inspector - 第二个配置（
Attach to Renderer）：类型pwa-chrome或chrome（VSCode 1.85+ 推荐pwa-chrome），request为attach，port设为9222，webRoot指向渲染进程 HTML 所在目录（如${workspaceFolder}/src） - 添加
compounds项，组合两者："compounds": [{ "name": "Debug Electron", "configurations": ["Launch Main Process", "Attach to Renderer"] }]
3. 正确触发渲染进程调试连接
仅靠启动 Electron 不足以让 VSCode 自动连接渲染进程——必须等窗口创建且 DevTools 协议就绪。常见做法：
- 在主进程中，于
win.loadURL(...)后加一行：win.webContents.openDevTools();（可选，便于手动验证） - 确保渲染进程页面已加载完成（例如监听
did-finish-load事件后再执行调试操作） - VSCode 的
Attach to Renderer配置会在 Electron 启动后自动尝试连接端口9222；若失败，检查是否被其他进程占用，或 Electron 是否真正启用了该端口（可通过http://localhost:9222/json查看可用页面列表）
4. 调试时的注意事项
双进程调试不是“完全同步”，但能各自断点、查看变量、调用栈：
- 主进程断点停在
main.js或 IPC 处理逻辑中，不影响渲染进程 UI 响应（除非阻塞主线程） - 渲染进程断点停在
renderer.js或 Vue/React 组件中，可直接 inspect DOM、console、localStorage - IPC 调试需配合两端：主进程收消息处打点 + 渲染进程发消息处打点，注意消息体序列化限制（不能传函数、原型链对象）
- 若使用 Webpack/Vite 构建渲染进程，确保 source map 已启用（
devtool: 'source-map'），否则断点可能错位
基本上就这些。配置一次后，按 Ctrl+Shift+D 选中 Debug Electron，点绿色三角即可同时进入两个上下文。不复杂但容易忽略端口冲突和 source map 设置。
