首先配置launch.json调试主进程，再通过Chrome Debugging Protocol连接渲染进程，最后使用复合配置同时调试两者。
调试 Electron 应用时，主进程和渲染进程需要分别处理，因为它们运行在不同的 Node.js 和 Chromium 环境中。使用 VS Code 可以高效地同时调试这两个部分。以下是具体配置方法。
1. 配置 launch.json 支持主进程调试
主进程是基于 Node.js 的，因此需要通过 Node.js 调试器启动 Electron 并附加断点。
在项目根目录下创建 .vscode/launch.json 文件，添加如下配置：
{ "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "args": ["."], "outFiles": [ "${workspaceFolder}/dist/**/*.js" ], "console": "integratedTerminal", "env": { "NODE_ENV": "development" }, "cwd": "${workspaceFolder}" } ] }说明：
- runtimeExecutable 指向本地安装的 electron 命令。
- args: ["."] 表示启动当前目录下的 main.js 或 package.json 中指定的入口文件。
- 确保 outFiles 匹配你实际的输出目录（如使用打包工具）。
2. 调试渲染进程（页面端）
渲染进程运行在 Chromium 中，需使用 Chrome Debugging Protocol 进行连接。
先确保 Electron 启动时开启 DevTools 支持，并启用远程调试端口。
修改主进程代码（如 main.js），在创建窗口时添加参数：
const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false } }) // 开启远程调试 win.webContents.openDevTools() win.loadURL('http://localhost:3000') // 如果你使用 React/Vue 等前端服务 // 或者加载本地页面：win.loadFile('index.html') }
然后在 launch.json 中添加渲染进程调试配置：
{ "name": "Debug Renderer Process", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "timeout": 10000 }注意：
- 你需要提前安装 Debugger for Chrome 扩展（已逐步迁移到 Microsoft Edge Tools for VS Code，也支持 Chrome）。
- Electron 需要启动时启用调试端口。可以在启动 Electron 时手动加参数，或在主进程中设置：
3. 同时调试主进程和渲染进程
使用 VS Code 的复合启动功能，一次性启动两个调试会话。
修改 launch.json 添加复合配置：
{ "name": "Debug All", "type": "node", "request": "launch", "compound": { "configurations": ["Debug Main Process", "Debug Renderer Process"], "stopAll": true } }点击 “Debug All” 即可同时启动主进程和连接渲染进程调试。
4. 常见问题与建议
- 确保 Electron 正确启动且未崩溃，可在终端查看日志。
- 如果无法连接 Chrome 调试，请确认 remote-debugging-port 已打开，且页面 URL 正确。
- 使用 source-map 保证调试时能定位到原始 TypeScript 或 JSX 文件。
- 若使用 webpack/vite，建议开启 devtool: 'source-map' 并输出到对应目录。
基本上就这些。配置一次后，VS Code 就能像调试普通 Web 应用一样，轻松打断点、查看变量、监视表达式。主进程和渲染进程分离调试是 Electron 开发的标准做法，掌握后效率提升明显。
