VSCODE下调试 Electron 项目

最近使用electron开发了一套软件，记录一下遇到的调试问题

所需工具

1. vscode 官网链接;

2. electron,本次所使用的版本为:

   • Electron: 1.7.9

   • Node: 7.9.0

   • Chromium: 58.0.3029.110

   • V8: 5.8.283.38

   • 本次直接使用的 electron-quick-start git链接

3. nodejs 官网链接;

配置方式

我们使用的 electron-quick-start,项目初始配置已经完成。

修改 package.json 文件中

"scripts": {
        //debug 表示项目需挂载调试程序
        //brk 表示项目在启动后,运行第一行代码自动暂停
        //5858 表示调试监听端口,若被占用,可自行更改
        "start": "electron . --debug-brk=5858" 
    }

修改launch.json文件,该文件属于vscode所使用调试配置文件

{
        "name": "Launch",
        "type": "node",
        "request": "launch",
        //程序启动文件,默认为 "${workspaceRoot}/main.js"
        "program": "${workspaceRoot}/dist/main.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "runtimeArgs": [
            ".",
            "--enable-logging"
        ],
        "env": {},
        //该属性为配置typescript调试,若不需要则设置为false
        "sourceMaps": true
    }

启动调试

1. 打开调试界面

2. 下拉左上角调试列表

3. 选择Launch,若在上一步设置为其他名称,则此时亦跟随修改

调试时所遇到问题

1. electron 中仅支持主进程调试。即：您需要将逻辑代码放置于 main.js 中调用,才可使用断点等功能,且此时不支持 console 打印输出功能。

2. 渲染进程,包括初始的 BrowserWindow ,无法通过断点调试nodejs代码,仅可以通过窗体自带的开发工具(Ctrl + Shift + I)调试代码。即：使用 require 引入的文件仅支持 console 打印输出至输出窗口,正常web逻辑代码,可以使用断点等进行调试。

3. 建议node端代码在主进程中运行调试,确定无误后再引入渲染进程中,减少调试工作难度。