在VSCode中调试Electron主进程和渲染进程-VSCode-PHP中文网

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

P粉986688829

发布： 2025-12-15 15:51:06

原创

741人浏览过

在 VSCode中调试Electron需配置launch.json：主进程用type:"node"配合--inspect-brk和runtimeExecutable；渲染进程用type:"pwa-chrome" attach到--remote-debugging-port指定端口，并设置urlFilter和sourceMaps。

在vscode中调试electron主进程和渲染进程

在 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设计，美观大方；首页右侧客服联系方式都采用后台控制，修改方便；首页中部图片也采用动态数据，在后台可以随意更换图片

查看详情

{
  "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 精确匹配路径