调试 electron 应用可通过 vscode 配置实现，1.确认已安装 node.js、electron 和 vscode 及其 javascript 调试器；2.创建或编辑 launch.json 文件并添加主进程调试配置；3.设置断点后启动调试，electron 应用将暂停在断点处；4.可追加配置以调试渲染进程；5.注意版本、路径、热重载和终端输出等常见问题。
调试 Electron 应用其实并不复杂，但很多人刚上手时会卡在配置环节。VSCode 作为主流开发工具，配合合适的插件和配置，可以非常方便地实现 Electron 的调试和运行。
准备工作：确保环境正确
要调试 Electron 应用，首先要确认你的开发环境已经准备好：
- 已安装 Node.js
- 已安装 Electron（可以通过
npm install electron --save-dev安装） - VSCode 已安装，并且推荐安装以下扩展：
- Debugger for Chrome（已不再更新，可使用内置 JS 调试器）
- JavaScript Debugger (Nightly) 或直接使用 VSCode 内置的 JavaScript 调试器
如果你还没有一个 Electron 项目，可以先通过官方示例创建一个基础项目来练习调试流程。
配置 launch.json：设置调试入口
VSCode 使用 launch.json 文件来定义调试配置。你需要在这个文件中添加一个适合 Electron 的调试配置项。
- 打开你的 Electron 项目
- 在左侧活动栏点击“运行和调试”图标（或使用快捷键
Ctrl+Shift+D） - 点击“创建 launch.json 文件”（如果还没有的话）
- 添加一个新的配置项，内容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Debug Electron Main Process",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": ["--inspect=5858", "."],
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}这个配置的作用是启动 Electron 的主进程并附加调试器。注意这里的 "." 表示当前目录下的入口文件（通常是 main.js 或 index.js）。
启动调试：开始断点调试
配置完成后就可以开始调试了：
- 确保你的 Electron 主文件路径正确（如
main.js） - 在代码中打上断点
- 回到“运行和调试”面板，点击绿色启动按钮
这时你会看到 Electron 桌面应用启动起来，并且执行到你设置的断点处会暂停，就像在浏览器中调试一样。
小技巧：如果你想调试渲染进程（也就是页面部分），可以在同一个 launch.json 中再加一个配置，类型改为 pwa-chrome 或者使用 attach 模式连接已打开的窗口。
常见问题与注意事项
-
Electron 版本问题：某些版本的 Electron 可能需要调整
--inspect的端口号，比如--inspect-brk=9229 -
路径错误：确保
runtimeExecutable指向正确的 electron 可执行文件，特别是在全局安装和本地安装之间容易搞混 -
热重载支持：你可以将
"restart": true设置为自动重启应用，方便开发时实时查看修改效果 -
终端输出：建议开启
"console": "integratedTerminal"，这样可以看到 Electron 的日志输出，有助于排查问题
基本上就这些步骤了。虽然一开始看起来有点繁琐，但只要配置一次，后面调试就非常顺手。Electron 开发桌面应用很灵活，而 VSCode 提供了良好的调试体验，组合起来效率很高。
