https://m.toutiao.com/is/Y1qhuKu/?=2022年了 

前言

你可能會(huì)說,，要什么Debug，我console.log一把梭走天下,。沒錯(cuò),，這也是目前很多人在使用的調(diào)試方法。但是既然VS Code具備這樣的功能,，試一試,，或許會(huì)有新的收獲呢~

簡介

VS Code的關(guān)鍵特性之一就是它具有強(qiáng)大的調(diào)試（debug）功能，內(nèi)置的調(diào)試器（debugger)可以幫助開發(fā)者快速的編輯,、編譯和調(diào)試,。

VS Code內(nèi)置的調(diào)試器支持Node.js運(yùn)行時(shí)，并且能夠調(diào)試JavaScript,、TypeScript,、以及任意其他能夠編譯成JavaScript的語言。

如果想要調(diào)試其他的語言和運(yùn)行時(shí),，包括但不限于PHP,、Ruby、Go,、C#等等,，可以在擴(kuò)展商店中尋找相關(guān)的Debugger擴(kuò)展并且安裝它，這里我們就不過多的敘述了,。

簡單調(diào)試

為了方便我們理解常用功能,，直接進(jìn)行調(diào)試來學(xué)習(xí)相關(guān)功能更容易上手。這里我們用一個(gè)簡單的Node.js項(xiàng)目作為例子進(jìn)行調(diào)試,。

首先準(zhǔn)備一個(gè)app.js:

這樣我們就有一個(gè)簡單的Node.js程序了,。

接下來我們點(diǎn)擊左側(cè)菜單中的運(yùn)行與調(diào)試圖標(biāo)（圖標(biāo)是一個(gè)蟲子+開始，顧名思義debug&run）,，這里就是初始化的面板,；然后我們?cè)诖a中需要打斷點(diǎn)的地方加上斷點(diǎn)：

直接點(diǎn)擊運(yùn)行和調(diào)試：

程序跑起來了，并在斷點(diǎn)處也停下來了,。調(diào)試面板也被激活,，顯示了變量、監(jiān)控、調(diào)用堆棧,、斷點(diǎn)的面板,。點(diǎn)擊上方調(diào)試操作欄的第一個(gè)圖標(biāo)（繼續(xù)，快捷鍵是F5）,，程序會(huì)走到下一個(gè)斷點(diǎn),，并且變量面板中的msg變量會(huì)進(jìn)行更新：

繼續(xù)點(diǎn)繼續(xù)，直到跳出最后一個(gè)斷點(diǎn),，我們的調(diào)試步驟就結(jié)束了,。這就是一個(gè)最簡單的Node.js程序的調(diào)試過程。

當(dāng)然我們實(shí)際開發(fā)中肯定不會(huì)有這么簡單的程序,，所以接下來我們來詳細(xì)介紹下調(diào)試中的相關(guān)功能。

功能介紹

雖然上面的例子是Node.js項(xiàng)目,，但是對(duì)于其他的調(diào)試器,，大部分的概念和特性也都是通用的。

運(yùn)行面板和菜單

在上面的例子里我們已經(jīng)看到過運(yùn)行面板了,。點(diǎn)擊左側(cè)的“運(yùn)行和調(diào)試”圖標(biāo)即可打開面板,。運(yùn)行面板顯示了所有關(guān)于運(yùn)行和調(diào)試的相關(guān)信息。

如果還沒有配置launch.json,，那么VS Code就會(huì)顯示初始狀態(tài)的面板,。例子中我們就沒有進(jìn)行配置，所以顯示就是初始狀態(tài)：

除了左側(cè)的圖標(biāo),，也可以使用頂部的頂級(jí)菜單 運(yùn)行（Run),。這里的命令基本和面板中的一致：

想不起快捷鍵的時(shí)候也可以在這里看看~

啟動(dòng)配置

上面的例子中我們選擇了“運(yùn)行和調(diào)試”，VS Code直接使用了內(nèi)置的Node.js調(diào)試配置啟動(dòng)了調(diào)試步驟,。 然而大部分場景中,，我們不會(huì)有這么簡單的調(diào)試。此時(shí)創(chuàng)建一個(gè)自定義的launch配置文件就十分有必要了,，我們可以在配置文件中保存一些調(diào)試的細(xì)節(jié),。

VS Code把調(diào)試配置信息保存在.vscode目錄下的launch.json文件中（.vscode目錄一般存在于項(xiàng)目的根目錄下）。

要?jiǎng)?chuàng)建一個(gè)launch.json文件,，在運(yùn)行初始化面板中點(diǎn)擊“創(chuàng)建一個(gè)launch.json”：

VS Code會(huì)去嘗試自動(dòng)檢測當(dāng)前調(diào)試環(huán)境,。如果它失敗了，我們就需要自己手動(dòng)選擇：

選擇Node.js后,，VS Code會(huì)自動(dòng)生成配置文件以及.vscode目錄,。這里是Node.js默認(rèn)的launch.json:

{    // 使用 IntelliSense 了解相關(guān)屬性。     // 懸停以查看現(xiàn)有屬性的描述,。    // 欲了解更多信息,，請(qǐng)?jiān)L問: 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}/app.js'        }    ]}復(fù)制代碼

這里需要注意的是，對(duì)于不同類型的調(diào)試器，launch配置中的屬性可能都是各不相同的,?？梢允褂肰S Code內(nèi)置的智能提示功能去查看有哪些屬性可用，hover屬性就可以看到幫助信息,。

不要想當(dāng)然地認(rèn)為某個(gè)調(diào)試器中存在的屬性放到其他的調(diào)試器下中也能起作用,。調(diào)試前要確保所有配置都是有意義的。

launch和attach

在VS Code中,，有兩種核心的調(diào)試模式,，Launch和Attach，他們?yōu)殚_發(fā)者提供兩種不同類型的工作流,。

最簡單的方式來理解這兩種工作流：

• launch配置可以理解為VS Code啟動(dòng)調(diào)試程序的說明書,；
• attach配置則是如何將VS Code的調(diào)試器連接到已運(yùn)行的應(yīng)用程序或進(jìn)程的方法；

VS Code的調(diào)試支持用調(diào)試模式啟動(dòng)一個(gè)程序,，或者用調(diào)試模式附加到一個(gè)已經(jīng)在運(yùn)行中的程序,。使用哪種調(diào)試配置，取決于我們的調(diào)試需求,。

launch屬性

當(dāng)你在launch.json中配置了type屬性的值后,，就可以使用VS Code的智能提示（command+I）來查看所有可用的屬性：

下面的屬性是每個(gè)launch配置文件必須具備的：

• type - 調(diào)試器的類型。
• request - 請(qǐng)求類型,，目前支持launch和attach
• name - 在Debug啟動(dòng)配置下拉菜單中顯示的名字

下面是一些可選的配置屬性：

• presentation - 在 presentation 對(duì)象中,，用 order, group, 和 hidden 屬性可以在調(diào)試配置下拉菜單以及快速選擇調(diào)試選項(xiàng)中進(jìn)行排序、分組以及隱藏配置,。
• preLaunchTask - 在開始一個(gè)調(diào)試會(huì)話前可以啟動(dòng)一個(gè)任務(wù)
• postDebugTask - 在結(jié)束調(diào)試后啟動(dòng)一個(gè)任務(wù)
• internalConsoleOptions - 這個(gè)屬性用來控制調(diào)試控制臺(tái)面板的可見性,。
• debugServer - 只為調(diào)試擴(kuò)展的作者使用（for debug extension authors only） 這個(gè)屬性允許你去連接到一個(gè)特定的端口而不是去啟動(dòng)調(diào)試適配器。
• serverReadyAction - 如果要在調(diào)試中的程序向調(diào)試控制臺(tái)或集成終端輸出特定消息時(shí)在web瀏覽器中打開URL,。

許多調(diào)試器支持以下的屬性：

• program - 當(dāng)啟動(dòng)調(diào)試器時(shí)要運(yùn)行的可執(zhí)行程序或文件
• args - 傳給程序用來調(diào)試的參數(shù)
• env - 環(huán)境變量 ( null 值可以用來 'undefine' 一個(gè)變量)
• envFile - 具有環(huán)境變量的.env文件的路徑
• cwd - 用來尋找依賴和其他文件的當(dāng)前工作目錄
• port - 連接到正在運(yùn)行的進(jìn)程時(shí)的端口
• stopOnEntry - 當(dāng)程序啟動(dòng)時(shí)立即停止
• console - 使用哪種控制臺(tái),，例如 internalConsole, integratedTerminal, or externalTerminal

變量替換

VS Code在launch.json中提供了許多有用的變量，并在啟動(dòng)時(shí)支持字符串內(nèi)部的變量替換,。例如,，${workspaceFolder}給出了工作區(qū)文件夾的根路徑，${file}給出了在活動(dòng)編輯器中打開的文件,，${env:Name}給出了環(huán)境變量Name的值,。可以查看變量引用 來查看所有的預(yù)定義變量,。

調(diào)試操作

當(dāng)啟動(dòng)調(diào)試會(huì)話后,，調(diào)試工具欄會(huì)顯示在頂部：

從左到右依次是：

• 繼續(xù)/暫停 F5：執(zhí)行到下一個(gè)斷點(diǎn)
• 單步跳過 F10：從斷點(diǎn)處執(zhí)行單步調(diào)試
• 單步調(diào)試 F11：進(jìn)入函數(shù)內(nèi)部
• 單步跳出 shift+F11：跳出函數(shù)內(nèi)部
• 重啟shift+command+F11
• 結(jié)束shift+F5

斷點(diǎn)(Breakpoints)

點(diǎn)擊編輯器左邊距可以切換斷點(diǎn)（快捷鍵為F9）。在運(yùn)行視圖中的“斷點(diǎn)”部分中,，可以對(duì)斷點(diǎn)進(jìn)行更多的控制,。

編輯器左側(cè)的斷點(diǎn)一般展示為紅色實(shí)心圓,，不可用的斷點(diǎn)為灰色實(shí)心圓。 如果調(diào)試器支持在不同的錯(cuò)誤or異常中退出,，在斷點(diǎn)部分中也會(huì)可用,。

記錄點(diǎn)(Logpoints)

記錄點(diǎn)是斷點(diǎn)的一個(gè)變種，它不會(huì)break到調(diào)試器中,，但是能夠往控制臺(tái)中打印一些信息,。當(dāng)調(diào)試不能暫停or停止的生產(chǎn)服務(wù)時(shí)，記錄點(diǎn)特別有用,。

記錄點(diǎn)顯示為一個(gè)菱形的圖標(biāo),。記錄信息是解釋文本但是也可以使用可計(jì)算的表達(dá)式（用大括號(hào)包裹）

就像普通的斷點(diǎn)一樣，記錄點(diǎn)也可以啟用,、禁用,，并且通過條件來控制。

Node.js調(diào)試

在VS Code中調(diào)試Node.js有三種方法：

• 在VS Code的集成終端中使用auto attach來調(diào)試程序,；
• 使用JavaScript調(diào)試終端
• 使用launch配置,，或者attach到其他的程序

Auto Attach

當(dāng)啟用Auto Attach功能時(shí)，Node調(diào)試器會(huì)自動(dòng)附加到VS Code中啟動(dòng)的Node.js進(jìn)程上,。

Command+Shift+P打開輸入Auto Attach即可開啟功能：

這里的三個(gè)選項(xiàng)，我們選擇智能(smart)就可以,。開啟后重啟一下VS Code,，啟動(dòng)程序后調(diào)試器就會(huì)自動(dòng)附加上。此時(shí)下方的狀態(tài)欄會(huì)顯示auto attach的狀態(tài),，也可以點(diǎn)擊進(jìn)行更改,。

JavaScript集成終端

和auto attach相似，用JavaScript調(diào)試終端可以自動(dòng)的調(diào)試你在終端里運(yùn)行的任何Node.js程序,。在終端的下拉選擇框中選擇JavaScript Debug Terminal即可：

Launch配置調(diào)試

通過配置launch.json進(jìn)行調(diào)試是比較傳統(tǒng)的調(diào)試方式,，根據(jù)自己的項(xiàng)目代碼需求進(jìn)行配置，靈活性比較高,。

除了可以直接通過node命令啟動(dòng)Node.js程序,，我們也可以通過配置使用npm或其他工具進(jìn)行調(diào)試。

• 任何PATH上的可用程序（例如npm,、gulp等等）都可以用在runtimeExecutable屬性中,，并且參數(shù)可以放在runtimeArgs中傳入。
• 如果npm腳本或其他工具隱式地指定了要啟動(dòng)的程序,，則不必設(shè)置 program 屬性,。

我的上一篇文章 記一次不完全的源碼調(diào)試之npm install 就是通過這種方式進(jìn)行調(diào)試的。

SourceMap調(diào)試

VS Code的JavaScript調(diào)試器支持可以幫助調(diào)試轉(zhuǎn)義語言的source map（例如Typescript,、壓縮or混淆過的JavaScript等）,。使用source map就可以在源碼中單步調(diào)試或者設(shè)置斷點(diǎn),。

如果原始代碼中不存在source map，或者source map被破壞,，無法成功映射原始代碼和生成的JavaScript,，則斷點(diǎn)顯示為未驗(yàn)證（灰色空心圓），如下圖：

source map功能由sourceMaps屬性控制,，默認(rèn)為true,。要使用source map進(jìn)行調(diào)試的前提是，我們的項(xiàng)目代碼中要能生成source map文件才可以使用,，所以如果使用Typescript,、babel、webpack等,，需要進(jìn)行相應(yīng)的配置生成source map文件后再進(jìn)行對(duì)應(yīng)的配置使用,。詳細(xì)可以查看VSCode-Source map 相關(guān)的官方文檔。

如果想要使用VS Code調(diào)試vue項(xiàng)目,，可以參考# 如何讓 Vue,、React 代碼的調(diào)試變得更爽。該配置在vue2的項(xiàng)目中可用,，vue3目前還沒實(shí)踐成功,。

高級(jí)斷點(diǎn)

最后介紹一下VS Code中的一些高級(jí)斷點(diǎn)功能，日常調(diào)試可能用不到但是可以了解一下,。

條件式斷點(diǎn)

VS Code中一個(gè)強(qiáng)有力的調(diào)試功能是具有基于表達(dá)式,、命中次數(shù)或兩者的組合設(shè)置條件的能力。

• 表達(dá)式條件：每當(dāng)表達(dá)式的計(jì)算結(jié)果為true時(shí),，都會(huì)命中斷點(diǎn),。
• 命中次數(shù)：“命中次數(shù)”控制斷點(diǎn)需要被點(diǎn)擊多少次才能中斷執(zhí)行。

你可以在創(chuàng)建斷點(diǎn)或修改現(xiàn)有斷點(diǎn)時(shí),，添加條件or命中次數(shù),。在這兩種情況下，都會(huì)打開帶有下拉菜單的內(nèi)聯(lián)文本框,，可以在其中輸入表達(dá)式：

當(dāng)i=3時(shí),，會(huì)在斷點(diǎn)處停下：

或者設(shè)置命中次數(shù)：

命中次數(shù)等于5時(shí)在斷點(diǎn)處停下：

如果調(diào)試器不支持條件斷點(diǎn)，那么就不會(huì)顯示添加和編輯的菜單,。

內(nèi)聯(lián)斷點(diǎn)

只有當(dāng)執(zhí)行到達(dá)與內(nèi)聯(lián)斷點(diǎn)關(guān)聯(lián)的列時(shí),，才會(huì)命中內(nèi)聯(lián)斷點(diǎn)。當(dāng)調(diào)試在一行中包含多條語句的小型代碼時(shí)很有用,，例如for循環(huán)：

用shift+F9添加內(nèi)聯(lián)斷點(diǎn),。內(nèi)聯(lián)斷點(diǎn)在編輯器中內(nèi)聯(lián)顯示。

總結(jié)

VSCode的調(diào)試功能還是十分強(qiáng)大的,，上面介紹的只是一部分內(nèi)容,，官方文檔中還有很多內(nèi)容可以探索,。

雖然對(duì)于vue.js這種有自己的devtool的框架，直接在瀏覽器調(diào)試更加直觀,，但調(diào)試其他的Node.js程序,，用VS Code效率還是很高的。

原文地址：
https:///post/7080135520902184997