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端代碼在主進程中運行調試,肯定無誤後再引入渲染進程中,減小調試工做難度。