在 VSCode中调试Electron需配置launch.json：主进程用type:"node"配合--inspect-brk和runtimeExecutable；渲染进程用type:"pwa-chrome" attach到--remote-debugging-port指定端口，并设置urlFilter和sourceMaps。
在 VSCode 中调试 Electron 应用的主进程和渲染进程，关键在于正确配置 .vscode/launch.json，并利用 Electron 的调试协议（Chrome DevTools Protocol）和 Node.js 调试支持。主进程用 Node 调试模式，渲染进程需启用远程调试并附加 Chrome 调试器。
配置主进程调试
主进程是 Node.js 环境，直接通过 node 类型调试器启动即可。确保 Electron 以 --inspect-brk 启动，并让 VSCode 连接调试端口。
- 在
launch.json中添加一个type: "node"配置，request: "launch" - 设置
runtimeExecutable指向本地 Electron 可执行文件（如./node_modules/.bin/electron或全局路径） - 用
args传入主进程入口文件（如["main.js"]），并加上--remote-debugging-port=9223（可选，为后续渲染进程调试准备） - 加上
"console": "integratedTerminal"方便查看日志
示例：
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"runtimeExecutable": "./node_modules/.bin/electron",
"args": ["--remote-debugging-port=9223", "."],
"outFiles": ["${workspaceFolder}/dist/main.js"],
"console": "integratedTerminal",
"sourceMaps": true
}
启用并附加渲染进程调试
渲染进程本质是 Chromium 页面，需先让 Electron 启动时开启远程调试（上一步已加 --remote-debugging-port），再用 chrome 类型调试器附加到对应页面。
- 确保主进程代码中，在创建
BrowserWindow时未禁用webPreferences.devTools: false - 在
launch.json中新增一个type: "pwa-chrome"（推荐）或"chrome"配置 -
request: "attach"，指定port与主进程启动时一致（如9223） - 可设
urlFilter匹配你的渲染页地址（如"http://localhost:3000/*"或"app://./index.html"）
示例：
{
"name": "Debug Renderer Process",
"type": "pwa-chrome",
"request": "attach",
"port": 9223,
"urlFilter": "http://localhost:3000/*",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
调试多个渲染窗口或 preload 脚本
如果应用有多个 BrowserWindow 或使用了 preload 脚本，调试会更复杂，但原理不变：
-
preload是注入到渲染进程的 Node 环境脚本，属于渲染进程上下文，用上面的 Chrome 调试器也能打断点（确保sourceMaps开启且 map 文件可定位） - 多个窗口默认共享同一调试端口，VSCode 会列出所有匹配的页面；也可为不同窗口指定不同
remote-debugging-port（不推荐，管理麻烦） - 若需单独调试某窗口，可在其
webContents.openDevTools()后手动附加，或用urlFilter精确匹配路径
常见问题与提示
调试 Electron 容易卡在“无法连接”或“断点不命中”，多数源于路径、sourceMap 或启动顺序问题：
- 确认 Electron 版本与 VSCode 的 Node 调试器兼容（v22+ 推荐用
pwa-chrome） -
outFiles和sourceMaps必须匹配构建输出；TypeScript 项目要生成.map并放在正确位置 - 主进程调试时加
--inspect-brk可让进程在第一行暂停，方便设断点；但注意它会阻塞直到调试器连接 - 渲染进程调试前，确保页面已加载完成（可加
setTimeout延迟或监听dom-ready后再打开 DevTools）
基本上就这些。配好两个 launch 配置，一个启动主进程，一个附加渲染页，就能像调试普通 Web 和 Node 应用一样高效开发 Electron。
