在VSCode中同时调试Electron主进程和渲染进程

可在 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 设置。