Electron 桌面应用：VS Code调试，运行

最新推荐文章于 2026-05-31 12:49:41 发布

原创最新推荐文章于 2026-05-31 12:49:41 发布 · 5.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Electron

本文指导如何使用Visual Studio Code(VSCode)调试 Electron 桌面应用程序的主进程。首先，在VSCode中打开Electron项目。接着，创建一个launch.json文件，配置调试设置。在Windows环境下，需注意特定参数。同时，创建一个tasks.json文件，通过shift + ctrl + b快捷键运行项目。

参考资料：https://code.visualstudio.com/docs/nodejs/nodejs-debugging

使用 VSCode 进行主进程调试

EN

1.在 VSCode 中打开一个 Electron 项目。

$ git clone git@github.com:electron/electron-quick-start.git
  $ code electron-quick-start复制

EN

调试：在当前工程下，添加一个 `.vscode/launch.json` 文件

或者使用快捷键F5,然后选择Node.js,会自动生成该文件

并使用以下配置：

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "C:/Users/LR/AppData/Roaming/npm/electron.cmd",
        "windows": {
          "runtimeExecutable": "C:/Users/LR/AppData/Roaming/npm/electron.cmd"
        },
        "args" : ["."]
      }
    ]
  }复制

注意：在 Windows 中，runtimeExecutable 的参数是 "${workspaceRoot}/node_modules/.bin/electron.cmd"。

路径问题

如果electron是局部安装的话，就执行局部环境路径，例如”${workspaceRoot}/node_modules/.bin/electron.cmd”，如果是全局安装的话，先执行yarn global bin查看全局的路径，然后将electron的路径填写进去，比如我的全局路径就是”C:\Users\LR\AppData\Roaming\npm\electron.cmd”。

3) 接下来，就可以点击菜单Debug -> Start Debugging，也可以直接按快捷键F5，启动程序。

4) 为了测试是否可以单步之类的操作，我们在主程序的第一行，打下断点，然后按下F5启动，主程序就断在了第一行代码中,而且还可以单步、查看变量以及调用栈等，相当方便，如下图