Electron开发桌面应用(2)：VSCODE调试Electron项目

最新推荐文章于 2026-08-21 15:11:11 发布

原创最新推荐文章于 2026-08-21 15:11:11 发布 · 2.2w 阅读

22 ·

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

收录于

election

本文详细介绍了如何使用Visual Studio Code（VSCode）调试Electron桌面应用。内容包括设置环境（nodejs、npm、electron、vscode版本），具体调试步骤如打开项目、添加配置、修改launch.json文件以解决断点问题，以及最终成功在主进程(main.js)中实现断点调试。

目的

编写目的主要记录vscode如何调试electron项目。

环境：

nodejs 8.9.3
mpm 5.5.1
electron 1.7.10
vscode 1.19.1

具体步骤

1.使用vscode打开electron项目

这里写图片描述

2.点击debug 添加配置

这里写图片描述

3.点击“添加配置”：

这里写图片描述

4.打开launch.json点击右下角的添加配置，添加“electron 主”

这里写图片描述

5.填配置完毕，修改launch.json文件最终为：
注意：”protocol”: “legacy” //添加默认的协议是legacy，这个协议导致不进入断点，改为：“inspector”

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron Main",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "program": "${workspaceFolder}/main.js",
            "protocol": "inspector" //添加默认的协议是legacy，这个协议导致不进入断点
        },
    ]
}