使用VS Code调试Electron主进程和渲染进程

首先配置launch.json调试主进程，再通过Chrome Debugging Protocol连接渲染进程，最后使用复合配置同时调试两者。

调试 Electron 应用时，主进程和渲染进程需要分别处理，因为它们运行在不同的 Node.js 和 Chromium 环境中。使用 VS Code 可以高效地同时调试这两个部分。以下是具体配置方法。

1. 配置 launch.json 支持主进程调试

主进程是基于 Node.js 的，因此需要通过 Node.js 调试器启动 Electron 并附加断点。

在项目根目录下创建 .vscode/launch.json 文件，添加如下配置：

说明：

• runtimeExecutable 指向本地安装的 electron 命令。
• args: ["."] 表示启动当前目录下的 main.js 或 package.json 中指定的入口文件。
• 确保 outFiles 匹配你实际的输出目录（如使用打包工具）。

2. 调试渲染进程（页面端）

渲染进程运行在 Chromium 中，需使用 Chrome Debugging Protocol 进行连接。

先确保 Electron 启动时开启 DevTools 支持，并启用远程调试端口。

修改主进程代码（如 main.js），在创建窗口时添加参数：

Noiz Agent

AI声音创作Agent平台

323

查看详情

然后在 launch.json 中添加渲染进程调试配置：

注意：

• 你需要提前安装 Debugger for Chrome 扩展（已逐步迁移到 Microsoft Edge Tools for VS Code，也支持 Chrome）。
• Electron 需要启动时启用调试端口。可以在启动 Electron 时手动加参数，或在主进程中设置：

3. 同时调试主进程和渲染进程

使用 VS Code 的复合启动功能，一次性启动两个调试会话。

修改 launch.json 添加复合配置：

点击 “Debug All” 即可同时启动主进程和连接渲染进程调试。

4. 常见问题与建议

• 确保 Electron 正确启动且未崩溃，可在终端查看日志。
• 如果无法连接 Chrome 调试，请确认 remote-debugging-port 已打开，且页面 URL 正确。
• 使用 source-map 保证调试时能定位到原始 TypeScript 或 JSX 文件。
• 若使用 webpack/vite，建议开启 devtool: 'source-map' 并输出到对应目录。

基本上就这些。配置一次后，VS Code 就能像调试普通 Web 应用一样，轻松打断点、查看变量、监视表达式。主进程和渲染进程分离调试是 Electron 开发的标准做法，掌握后效率提升明显。

以上就是使用VS Code调试Electron主进程和渲染进程的详细内容，更多请关注php中文网其它相关文章！