vscode調(diào)試node介紹

node調(diào)試有多種方式，比如用ndb，還有'chrome://inspect' 這種，聽(tīng)說(shuō)用webstorm調(diào)試也挺方便的，今天介紹下用vscode進(jìn)行調(diào)試的方法，非常簡(jiǎn)單。

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

選擇運(yùn)行--啟動(dòng)調(diào)試，這時(shí)會(huì)彈出這個(gè)下拉框：

選擇Node.js。此時(shí)，如果此項(xiàng)目之前沒(méi)有調(diào)試過(guò)，項(xiàng)目會(huì)提示沒(méi)有配置，就像這樣

配置launch.json文件

點(diǎn)擊創(chuàng)建配置文件(create a launch.json file)，選擇Node.js類型，就會(huì)自動(dòng)生成一個(gè)launch.json文件，內(nèi)容如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\master.js"
        }
    ]
}

如果你選擇了Node.js(legacy)就會(huì)生成這樣一個(gè)配置文件：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\master.js"
        }
    ]
}

對(duì)比下，就是type不同，別的都一樣，其實(shí)沒(méi)太明白有啥區(qū)別。

下面介紹下這個(gè)配置文件的配置信息：

• type： 必填項(xiàng)，代表著調(diào)試器的類型，可選值node、chrome、pwa-node、pwa-chrome。

• request： 必填項(xiàng)，代表著該如何啟動(dòng)調(diào)試器，有兩個(gè)值： launch 和 attach。前者的意思就是 VSCode會(huì)使用調(diào)試器直接啟動(dòng)代碼并且調(diào)試，后者的意思是你已經(jīng)打開(kāi)了程序，然后接通 Node.js 的內(nèi)部調(diào)試協(xié)議進(jìn)行調(diào)試。

• name： 該配置的名字。調(diào)試時(shí)，可在調(diào)試欄上方選擇運(yùn)行對(duì)應(yīng)的配置。

• program： 配置需要調(diào)試的文件地址。這個(gè)值支持預(yù)定義參數(shù)，比如：${file}，指當(dāng)前編輯器里打開(kāi)的文件；${workspaceFolder} 是代表當(dāng)前工作區(qū)文件夾地址。一般${workspaceFolder}用得比較多

  書寫方式 ："program": "${workspaceFolder}/path/app.js"

  或者：program": ${workspaceFolder}\\path\\app.js

多進(jìn)程配置

啟動(dòng)配置

所謂多進(jìn)程配置，就是指項(xiàng)目需要啟動(dòng)多個(gè)node服務(wù)的情況，這個(gè)配置方式就要麻煩點(diǎn)，具體如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "first",
            "program": "${workspaceFolder}/server.js",
            "cwd": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "second",
            "program": "${workspaceFolder}/client.js",
            "cwd": "${workspaceFolder}"
        }
    ]
}

簡(jiǎn)單來(lái)說(shuō)就是在configurations下面配置多個(gè)服務(wù)啟動(dòng)項(xiàng)，每項(xiàng)的配置跟前面講的單項(xiàng)配置一樣，只是多了幾個(gè)啟動(dòng)項(xiàng)。

這樣配置之后，點(diǎn)擊左側(cè)debug按鈕，在面板上方會(huì)有啟動(dòng)項(xiàng)下拉框，可以看到一個(gè)個(gè)的啟動(dòng)項(xiàng)，最好像我這樣有針對(duì)性起名字，這樣好找，特別是對(duì)啟動(dòng)順序有要求的，按順序一個(gè)個(gè)啟動(dòng)就可以了。啟動(dòng)好之后，就可以盡情地進(jìn)行多進(jìn)程調(diào)試了。

一鍵啟動(dòng)

像上面那樣一個(gè)個(gè)啟動(dòng)，稍顯麻煩，還好它提供了一鍵啟動(dòng)的方法，配置方法如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "first",
            "program": "${workspaceFolder}/server.js",
            "cwd": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "second",
            "program": "${workspaceFolder}/client.js",
            "cwd": "${workspaceFolder}"
        }
    ],
    "compounds": [
        {
            "name": "compounds",
            "configurations": ["first", "second"]
        }
    ]
}

如上，在配置文件中添加一個(gè)與configurations并列的compounds項(xiàng)。compounds會(huì)生成一個(gè)多進(jìn)程啟動(dòng)組合對(duì)象，方便一鍵啟動(dòng)。加上這個(gè)配置之后，點(diǎn)debug按鈕，會(huì)看到彈出的下拉框里多了個(gè)Server/Client選項(xiàng)。點(diǎn)擊此項(xiàng)，它就會(huì)執(zhí)行此集合中的服務(wù)集。

參考資料：

• https://segmentfault.com/a/1190000011192094
• https://www.cnblogs.com/xjnotxj/p/9437528.html