vscode调试electron应用需配置launch.json启动主进程、启用渲染进程调试、安装Debugger for chrome扩展并检查Electron版本兼容性。
如果您在 VSCode 中启动 Electron 应用时无法进入断点、调试器无响应或控制台不输出调试信息，则可能是由于调试配置缺失、主进程与渲染进程未正确分离或 launch.json 设置不匹配所致。以下是解决此问题的步骤：
本文运行环境：macBook Pro，macOS Sequoia。
一、配置 launch.json 启动主进程调试
VSCode 通过 node.js 调试器附加到 Electron 主进程，需明确指定 Electron 可执行路径及主入口文件，确保调试器能加载并暂停于主进程代码中。
1、在项目根目录下创建 .vscode/launch.json 文件（若不存在）。
2、填入以下 JSON 配置，其中 electron 字段需指向本地安装的 Electron 可执行文件路径，可通过 npx electron –version 验证是否已安装。
3、确保 main.js 或实际主入口文件名与 program 字段值一致。
二、启用渲染进程调试（chrome devtools 方式）
Electron 渲染进程基于 Chromium，可直接通过 Chrome 浏览器远程调试，无需额外插件；VSCode 也可通过调试扩展实现自动附加，但需先在主进程中显式开启调试端口。
1、在主进程代码（如 main.js）的 app.whenReady() 回调内添加 win.webContents.openDevTools() 语句。
2、在相同位置调用 win.webContents.debugger.attach() 并捕获异常，避免重复 attach 导致崩溃。
3、访问 chrome://inspect，在 Remote Target 区域点击 Configure，添加 localhost:9223，随后即可看到并点击对应渲染进程进行调试。
三、使用 Debugger for Chrome 扩展附加渲染进程
该方式通过 VSCode 插件将调试器直接连接至 Electron 渲染进程，支持断点、变量监视和源码映射，适用于需要统一调试体验的开发场景。
1、在 VSCode 扩展市场中安装 Debugger for Chrome（ID：msjsdiag.debugger-for-chrome）。
2、在 launch.json 中新增一个配置项，类型设为 chrome，url 设为 http://localhost:3000（假设应用在本地 HTTP 服务运行）。
3、启动 Electron 主进程后，再启动该 Chrome 调试配置，VSCode 将自动连接并同步源码位置。
四、检查 Electron 版本与调试协议兼容性
Electron 12+ 默认启用新版 Chromium 调试协议（Cdp），旧版 VSCode 调试器可能因协议不匹配而无法识别渲染进程；需确认所用 Electron 版本对应的调试端口行为是否变更。
1、运行 npx electron –version 获取当前版本号。
2、查阅对应版本的 Electron 官方文档中 Debugging the Main Process 章节，确认是否需添加 –remote-debugging-port=9223 启动参数。
3、在 launch.json 的 runtimeArgs 数组中加入该参数，并确保其位于 — 分隔符之后。