建站
咨詢
售后
建站咨詢
新聞中心
VS Code 的各種 JavaScript 功能，是通過 TypeScript 的編譯器來實(shí)現(xiàn)的，但是它并沒有局限JavaScript 代碼是前端項(xiàng)目還是后端項(xiàng)目，VS Code 對(duì)它們的語言支持都是一致的。不過，這里不得不提 VS Code 的 Node.js 調(diào)試器。它是 VS Code 里的第一個(gè)代碼調(diào)試器，可以說，VS Code 的代碼調(diào)試 API，Node.js 是支持得最好的。從這個(gè)角度看，Node.js 在 VS Code 項(xiàng)目的地位，可以跟 TypeScript 比肩了。
建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計(jì)師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計(jì)技術(shù)配合操作的協(xié)同工作。成都創(chuàng)新互聯(lián)公司專業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站建設(shè)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!
那么，我們就來看看，VS Code 里對(duì)于 Node.js 調(diào)試，有哪幾個(gè)有趣且實(shí)用的功能。
代碼調(diào)試 Auto Attach
第一個(gè)就是代碼調(diào)試（Auto Attach）了。在前面介紹 VS Code 的代碼調(diào)試功能時(shí)，我舉的第一個(gè)例子，就是打開一個(gè) JavaScript 文件，以 Node.js 環(huán)境進(jìn)行調(diào)試運(yùn)行，然后又介紹了如何書寫 launch.json 來提供相對(duì)復(fù)雜的代碼調(diào)試配置。
其實(shí)，Node.js 調(diào)試器則更進(jìn)一步。如果我們?cè)?VS Code 的集成終端里以命令行的形式調(diào)試代碼的話，則可以無需 launch.json，直接將調(diào)試器掛載到運(yùn)行的代碼上。
首先，我們將 index.js 代碼調(diào)整成 Node.js 支持的格式（請(qǐng)注意，這里我暫時(shí)不再引用 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)自動(dòng)附加” （Toggle Auto Attach）命令；
然后我們?cè)?index.js 的第 15 行插入一個(gè)斷點(diǎn)。
最后，我們打開集成終端，輸入 Node.js 的調(diào)試命令：
node --inspect-brk index.jsJavaScript
可以看到 VS Code 立刻進(jìn)入了調(diào)試模式，然后在第 15 行停了下來。
所以，如果你平時(shí)就是使用 JavaScript 直接寫 Node.js，相信這個(gè)命令肯定能給你省去很多調(diào)整 launch.json 的麻煩。
記錄點(diǎn) Logpoints
下一個(gè)功能，叫做記錄點(diǎn)（Logpoints），這個(gè)看名字不太好理解呢。不過相信你在開發(fā) JavaScript 的過程中，肯定會(huì)經(jīng)常在代碼中輸入 console.log() 來輸出變量值以便調(diào)試。即使現(xiàn)在編輯器和瀏覽器的調(diào)試功能都已經(jīng)非常強(qiáng)大了，但是很多同學(xué)依然喜歡這種簡(jiǎn)單的方式來調(diào)試代碼。
Node.js 調(diào)試的 Logpoints 功能，就是將 console.log 和斷點(diǎn)結(jié)合起來，把 console.log 要輸出的信息，通過類似于條件斷點(diǎn)的方式執(zhí)行并打印出來。具體操作是如何的呢？
首先我們?cè)诘?12 行行號(hào)前右擊，從上下文菜單里選擇“添加記錄點(diǎn)”，然后從左側(cè)的選擇列表里，選擇表達(dá)式。在輸入框里輸入我們想要輸出的內(nèi)容并且用花括號(hào)包裹 { str + “!” }，按下回車。
接著，我們 F5 調(diào)試當(dāng)前這個(gè)文件，選擇 Node.js 這個(gè)環(huán)境。由于我們其實(shí)并沒有真正創(chuàng)建斷點(diǎn)，所以代碼很快執(zhí)行結(jié)束。我們不妨打開調(diào)試面板看看。
我們能在調(diào)試面板里看到兩個(gè)輸出結(jié)果：
Hello World! index.js:12
Hello World index.js:12第一條結(jié)果就來自記錄點(diǎn) Logpoints，而第二條則是我們代碼中的 console.log(str)?？吹竭@里，相信你就明白這個(gè)功能的用途了，你可以將原本需要寫在代碼里的 console.log ，放到記錄點(diǎn) Logpoints 中，一樣可以得到輸出結(jié)果，而且還不改變?cè)械拇a。
文章題目：創(chuàng)新互聯(lián)vscode教程：vscode支持Node.js
文章鏈接：http://www.5511xx.com/article/dphssho.html
