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 数组中加入该参数，并确保其位于 -- 分隔符之后。
