vscode 支持Node.js

VS Code 的各種 JavaScript 功能，是通過 TypeScript 的編譯器來實(shí)現(xiàn)的，但是它并沒有局限JavaScript 代碼是前端項(xiàng)目還是后端項(xiàng)目，VS Code 對它們的語言支持都是一致的。不過，這里不得不提 VS Code 的 Node.js 調(diào)試器。它是 VS Code 里的第一個代碼調(diào)試器，可以說，VS Code 的代碼調(diào)試 API，Node.js 是支持得最好的。從這個角度看，Node.js 在 VS Code 項(xiàng)目的地位，可以跟 TypeScript 比肩了。

那么，我們就來看看，VS Code 里對于 Node.js 調(diào)試，有哪幾個有趣且實(shí)用的功能。

代碼調(diào)試 Auto Attach

第一個就是代碼調(diào)試（Auto Attach）了。在前面介紹 VS Code 的代碼調(diào)試功能時，我舉的第一個例子，就是打開一個 JavaScript 文件，以 Node.js 環(huán)境進(jìn)行調(diào)試運(yùn)行，然后又介紹了如何書寫 launch.json 來提供相對復(fù)雜的代碼調(diào)試配置。

其實(shí)，Node.js 調(diào)試器則更進(jìn)一步。如果我們在 VS Code 的集成終端里以命令行的形式調(diào)試代碼的話，則可以無需 launch.json，直接將調(diào)試器掛載到運(yùn)行的代碼上。

首先，我們將 index.js 代碼調(diào)整成 Node.js 支持的格式（請注意，這里我暫時不再引用 app.js 模塊，而是只使用 index.js 內(nèi)的函數(shù)）：

// @ts-check

function foo() {
    bar("Hello World");
}

/**
 * bar
 * @param {string} str 
 */
function bar(str) {
    console.log(str);
}

foo()

JavaScript

然后打開命令面板，執(zhí)行 “切換開關(guān)自動附加” （Toggle Auto Attach）命令；

然后我們在 index.js 的第 15 行插入一個斷點(diǎn)。

最后，我們打開集成終端，輸入 Node.js 的調(diào)試命令：

node --inspect-brk index.js

JavaScript

可以看到 VS Code 立刻進(jìn)入了調(diào)試模式，然后在第 15 行停了下來。

所以，如果你平時就是使用 JavaScript 直接寫 Node.js，相信這個命令肯定能給你省去很多調(diào)整 launch.json 的麻煩。

記錄點(diǎn) Logpoints

下一個功能，叫做記錄點(diǎn)（Logpoints），這個看名字不太好理解呢。不過相信你在開發(fā) JavaScript 的過程中，肯定會經(jīng)常在代碼中輸入 console.log() 來輸出變量值以便調(diào)試。即使現(xiàn)在編輯器和瀏覽器的調(diào)試功能都已經(jīng)非常強(qiáng)大了，但是很多同學(xué)依然喜歡這種簡單的方式來調(diào)試代碼。

Node.js 調(diào)試的 Logpoints 功能，就是將 console.log 和斷點(diǎn)結(jié)合起來，把 console.log 要輸出的信息，通過類似于條件斷點(diǎn)的方式執(zhí)行并打印出來。具體操作是如何的呢？

首先我們在第 12 行行號前右擊，從上下文菜單里選擇“添加記錄點(diǎn)”，然后從左側(cè)的選擇列表里，選擇表達(dá)式。在輸入框里輸入我們想要輸出的內(nèi)容并且用花括號包裹 { str + “!” }，按下回車。

接著，我們 F5 調(diào)試當(dāng)前這個文件，選擇 Node.js 這個環(huán)境。由于我們其實(shí)并沒有真正創(chuàng)建斷點(diǎn)，所以代碼很快執(zhí)行結(jié)束。我們不妨打開調(diào)試面板看看。

我們能在調(diào)試面板里看到兩個輸出結(jié)果：

Hello World!        index.js:12
Hello World         index.js:12

第一條結(jié)果就來自記錄點(diǎn) Logpoints，而第二條則是我們代碼中的 console.log(str)?？吹竭@里，相信你就明白這個功能的用途了，你可以將原本需要寫在代碼里的 console.log ，放到記錄點(diǎn) Logpoints 中，一樣可以得到輸出結(jié)果，而且還不改變原有的代碼。