VSCODE下調(diào)試 Electron 項(xiàng)目

LittleLiByte 發(fā)布于2019-08-21 17:39 / 3654人閱讀

摘要：最近使用開(kāi)發(fā)了一套軟件，記錄一下遇到的調(diào)試問(wèn)題所需工具官網(wǎng)鏈接本次所使用的版本為本次直接使用的鏈接官網(wǎng)鏈接配置方式我們使用的項(xiàng)目初始配置已經(jīng)完成。建議端代碼在主進(jìn)程中運(yùn)行調(diào)試確定無(wú)誤后再引入渲染進(jìn)程中減少調(diào)試工作難度。

最近使用electron開(kāi)發(fā)了一套軟件，記錄一下遇到的調(diào)試問(wèn)題

所需工具

vscode 官網(wǎng)鏈接;

electron,本次所使用的版本為:

Electron: 1.7.9

Node: 7.9.0

Chromium: 58.0.3029.110

V8: 5.8.283.38

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

nodejs 官網(wǎng)鏈接;

配置方式 我們使用的 electron-quick-start,項(xiàng)目初始配置已經(jīng)完成。 修改 package.json 文件中

    "scripts": {
        //debug 表示項(xiàng)目需掛載調(diào)試程序
        //brk 表示項(xiàng)目在啟動(dòng)后,運(yùn)行第一行代碼自動(dòng)暫停
        //5858 表示調(diào)試監(jiān)聽(tīng)端口,若被占用,可自行更改
        "start": "electron . --debug-brk=5858" 
    }

修改launch.json文件,該文件屬于vscode所使用調(diào)試配置文件

    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        //程序啟動(dòng)文件,默認(rèn)為 "${workspaceRoot}/main.js"
        "program": "${workspaceRoot}/dist/main.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "runtimeArgs": [
            ".",
            "--enable-logging"
        ],
        "env": {},
        //該屬性為配置typescript調(diào)試,若不需要?jiǎng)t設(shè)置為false
        "sourceMaps": true
    }

啟動(dòng)調(diào)試

打開(kāi)調(diào)試界面

下拉左上角調(diào)試列表

選擇Launch,若在上一步設(shè)置為其他名稱,則此時(shí)亦跟隨修改

調(diào)試時(shí)所遇到問(wèn)題

electron 中僅支持主進(jìn)程調(diào)試。即：您需要將邏輯代碼放置于 main.js 中調(diào)用,才可使用斷點(diǎn)等功能,且此時(shí)不支持 console 打印輸出功能。

渲染進(jìn)程,包括初始的 BrowserWindow ,無(wú)法通過(guò)斷點(diǎn)調(diào)試nodejs代碼,僅可以通過(guò)窗體自帶的開(kāi)發(fā)工具(Ctrl + Shift + I)調(diào)試代碼。即：使用 require 引入的文件僅支持 console 打印輸出至輸出窗口,正常web邏輯代碼,可以使用斷點(diǎn)等進(jìn)行調(diào)試。

建議node端代碼在主進(jìn)程中運(yùn)行調(diào)試,確定無(wú)誤后再引入渲染進(jìn)程中,減少調(diào)試工作難度。