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

在 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" 方便查看日志

示例：

WEBGM游戏金币虚拟货币交易源代码

WEBGM2.0版对原程序进行了大量的更新和调整，在安全性和实用性上均有重大突破.栏目介绍：本站公告、最新动态、网游资讯、游戏公略、市场观察、我想买、我想卖、点卡购买、火爆论坛特色功能：完美的前台界面设计以及人性化的管理后台，让您管理方便修改方便；前台介绍：网站的主导行栏都采用flash设计，美观大方；首页右侧客服联系方式都采用后台控制，修改方便；首页中部图片也采用动态数据，在后台可以随意更换图片

0

查看详情

{   "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。