2022年了，該學會用vscode debug了！下面本篇文章手把手帶大家會習vscode debug，希望對大家有所幫助！
vscode作為目前使用人數最多的ide，在前端開發者中也是十分受歡迎的。它免費、開源、還具備許多強大的功能，例如智能提示、插件商店、集成git等等，但除此之外還有一個被許多開發者忽略的功能——運行和調試（Run and Debug）?！就扑]學習：《vscode》】
你可能會說，要什么Debug，我console.log一把梭走天下。沒錯，這也是目前很多人在使用的調試方法。但是既然VS Code具備這樣的功能，試一試，或許會有新的收獲呢~
簡介
VS Code的關鍵特性之一就是它具有強大的調試（debug）功能，內置的調試器（debugger)可以幫助開發者快速的編輯、編譯和調試。
VS Code內置的調試器支持Node.JS運行時，并且能夠調試JavaScript、typescript、以及任意其他能夠編譯成JavaScript的語言。
如果想要調試其他的語言和運行時，包括但不限于php、ruby、Go、C#等等，可以在擴展商店中尋找相關的Debugger擴展并且安裝它，這里我們就不過多的敘述了。
簡單調試
為了方便我們理解常用功能，直接進行調試來學習相關功能更容易上手。這里我們用一個簡單的node.js項目作為例子進行調試。
首先準備一個app.js:
let?msg?=?'Hello?world'; console.log(msg); let?numA?=?6; let?numB?=?13; let?num?=?numA?+?numB; console.log(num);
這樣我們就有一個簡單的Node.js程序了。
接下來我們點擊左側菜單中的運行與調試圖標（圖標是一個蟲子+開始，顧名思義debug&run），這里就是初始化的面板；然后我們在代碼中需要打斷點的地方加上斷點：
直接點擊運行和調試：
程序跑起來了，并在斷點處也停下來了。調試面板也被激活，顯示了變量、監控、調用堆棧、斷點的面板。點擊上方調試操作欄的第一個圖標（繼續，快捷鍵是F5），程序會走到下一個斷點，并且變量面板中的msg變量會進行更新：
繼續點繼續，直到跳出最后一個斷點，我們的調試步驟就結束了。這就是一個最簡單的Node.js程序的調試過程。
當然我們實際開發中肯定不會有這么簡單的程序，所以接下來我們來詳細介紹下調試中的相關功能。
功能介紹
雖然上面的例子是Node.js項目，但是對于其他的調試器，大部分的概念和特性也都是通用的。
運行面板和菜單
在上面的例子里我們已經看到過運行面板了。點擊左側的“運行和調試”圖標即可打開面板。運行面板顯示了所有關于運行和調試的相關信息。
如果還沒有配置launch.json，那么VS Code就會顯示初始狀態的面板。例子中我們就沒有進行配置，所以顯示就是初始狀態：
除了左側的圖標，也可以使用頂部的頂級菜單 運行（Run)。這里的命令基本和面板中的一致：
想不起快捷鍵的時候也可以在這里看看~
啟動配置
上面的例子中我們選擇了“運行和調試”，VS Code直接使用了內置的Node.js調試配置啟動了調試步驟。 然而大部分場景中，我們不會有這么簡單的調試。此時創建一個自定義的launch配置文件就十分有必要了，我們可以在配置文件中保存一些調試的細節。
VS Code把調試配置信息保存在.vscode目錄下的launch.json文件中（.vscode目錄一般存在于項目的根目錄下）。
要創建一個launch.json文件，在運行初始化面板中點擊“創建一個launch.json”：
VS Code會去嘗試自動檢測當前調試環境。如果它失敗了，我們就需要自己手動選擇：
選擇Node.js后，VS Code會自動生成配置文件以及.vscode目錄。這里是Node.js默認的launch.json:
{ ????//?使用?IntelliSense?了解相關屬性。? ????//?懸停以查看現有屬性的描述。 ????//?欲了解更多信息，請訪問:?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" ????????} ????] }</node_internals>
這里需要注意的是，對于不同類型的調試器，launch配置中的屬性可能都是各不相同的。可以使用VS Code內置的智能提示功能去查看有哪些屬性可用，hover屬性就可以看到幫助信息。
不要想當然地認為某個調試器中存在的屬性放到其他的調試器下中也能起作用。調試前要確保所有配置都是有意義的。
launch和attach
在VS Code中，有兩種核心的調試模式，Launch和Attach，他們為開發者提供兩種不同類型的工作流。
最簡單的方式來理解這兩種工作流：
- launch配置可以理解為VS Code啟動調試程序的說明書；
- attach配置則是如何將VS Code的調試器連接到已運行的應用程序或進程的方法；
VS Code的調試支持用調試模式啟動一個程序，或者用調試模式附加到一個已經在運行中的程序。使用哪種調試配置，取決于我們的調試需求。
launch屬性
當你在launch.json中配置了type屬性的值后，就可以使用VS Code的智能提示（command+I）來查看所有可用的屬性：
下面的屬性是每個launch配置文件必須具備的：
- type?– 調試器的類型。
- request?– 請求類型，目前支持launch和attach
- name?– 在Debug啟動配置下拉菜單中顯示的名字
下面是一些可選的配置屬性：
- presentation?– 在?presentation?對象中，用?order,?group, 和?hidden?屬性可以在調試配置下拉菜單以及快速選擇調試選項中進行排序、分組以及隱藏配置。
- preLaunchTask – 在開始一個調試會話前可以啟動一個任務
- postDebugTask?– 在結束調試后啟動一個任務
- internalConsoleOptions?– 這個屬性用來控制調試控制臺面板的可見性。
- debugServer?– 只為調試擴展的作者使用（for debug extension authors only） 這個屬性允許你去連接到一個特定的端口而不是去啟動調試適配器。
- serverReadyAction?– 如果要在調試中的程序向調試控制臺或集成終端輸出特定消息時在web瀏覽器中打開URL。
許多調試器支持以下的屬性：
- program?– 當啟動調試器時要運行的可執行程序或文件
- args?– 傳給程序用來調試的參數
- env?– 環境變量 (?NULL?值可以用來 “undefine” 一個變量)
- envFile?– 具有環境變量的.env文件的路徑
- cwd?– 用來尋找依賴和其他文件的當前工作目錄
- port?– 連接到正在運行的進程時的端口
- stopOnEntry?– 當程序啟動時立即停止
- console?– 使用哪種控制臺，例如?internalConsole,?integratedTerminal, or?externalTerminal
變量替換
VS Code在launch.json中提供了許多有用的變量，并在啟動時支持字符串內部的變量替換。例如，${workspaceFolder}給出了工作區文件夾的根路徑，${file}給出了在活動編輯器中打開的文件，${env:Name}給出了環境變量Name的值?？梢圆榭?a href="http://m.babyishan.com/?golink=aHR0cHM6Ly93d3cucGhwLmNuL3Rvb2wvdnNjb2RlLw==" target="_blank" rel="noopener">vscode 來查看所有的預定義變量。
調試操作
當啟動調試會話后，調試工具欄會顯示在頂部：
從左到右依次是：
- 繼續/暫停 F5：執行到下一個斷點
- 單步跳過 F10：從斷點處執行單步調試
- 單步調試 F11：進入函數內部
- 單步跳出 shift+F11：跳出函數內部
- 重啟shift+command+F11
- 結束shift+F5
斷點(breakpoints)
點擊編輯器左邊距可以切換斷點（快捷鍵為F9）。在運行視圖中的“斷點”部分中，可以對斷點進行更多的控制。
編輯器左側的斷點一般展示為紅色實心圓，不可用的斷點為灰色實心圓。 如果調試器支持在不同的錯誤or異常中退出，在斷點部分中也會可用。
記錄點(Logpoints)
記錄點是斷點的一個變種，它不會break到調試器中，但是能夠往控制臺中打印一些信息。當調試不能暫停or停止的生產服務時，記錄點特別有用。
記錄點顯示為一個菱形的圖標。記錄信息是解釋文本但是也可以使用可計算的表達式（用大括號包裹）
就像普通的斷點一樣，記錄點也可以啟用、禁用，并且通過條件來控制。
Node.js調試
在VS Code中調試Node.js有三種方法：
- 在VS Code的集成終端中使用auto attach來調試程序；
- 使用JavaScript調試終端
- 使用launch配置，或者attach到其他的程序
Auto Attach
當啟用Auto Attach功能時，Node調試器會自動附加到VS Code中啟動的Node.js進程上。
Command+Shift+P打開輸入Auto Attach即可開啟功能：
這里的三個選項，我們選擇智能(smart)就可以。開啟后重啟一下VS Code，啟動程序后調試器就會自動附加上。此時下方的狀態欄會顯示auto attach的狀態，也可以點擊進行更改。
JavaScript集成終端
和auto attach相似，用JavaScript調試終端可以自動的調試你在終端里運行的任何Node.js程序。在終端的下拉選擇框中選擇JavaScript Debug Terminal即可：
Launch配置調試
通過配置launch.json進行調試是比較傳統的調試方式，根據自己的項目代碼需求進行配置，靈活性比較高。
除了可以直接通過node命令啟動Node.js程序，我們也可以通過配置使用npm或其他工具進行調試。
- 任何PATH上的可用程序（例如npm、gulp等等）都可以用在runtimeExecutable屬性中，并且參數可以放在runtimeArgs中傳入。
- 如果npm腳本或其他工具隱式地指定了要啟動的程序，則不必設置?program?屬性。
我的上一篇文章 vscode 就是通過這種方式進行調試的。
Sourcemap調試
VS Code的JavaScript調試器支持可以幫助調試轉義語言的source map（例如Typescript、壓縮or混淆過的JavaScript等）。使用source map就可以在源碼中單步調試或者設置斷點。
如果原始代碼中不存在source map，或者source map被破壞，無法成功映射原始代碼和生成的JavaScript，則斷點顯示為未驗證（灰色空心圓），如下圖：
source map功能由sourceMaps屬性控制，默認為true。要使用source map進行調試的前提是，我們的項目代碼中要能生成source map文件才可以使用，所以如果使用Typescript、babel、webpack等，需要進行相應的配置生成source map文件后再進行對應的配置使用。詳細可以查看vscode 相關的官方文檔。
如果想要使用VS Code調試vue項目，可以參考vscode。該配置在vue2的項目中可用，vue3目前還沒實踐成功。
高級斷點
最后介紹一下VS Code中的一些高級斷點功能，日常調試可能用不到但是可以了解一下。
條件式斷點
VS Code中一個強有力的調試功能是具有基于表達式、命中次數或兩者的組合設置條件的能力。
- 表達式條件：每當表達式的計算結果為true時，都會命中斷點。
- 命中次數：“命中次數”控制斷點需要被點擊多少次才能中斷執行。
你可以在創建斷點或修改現有斷點時，添加條件or命中次數。在這兩種情況下，都會打開帶有下拉菜單的內聯文本框，可以在其中輸入表達式：
當i=3時，會在斷點處停下：
或者設置命中次數：
命中次數等于5時在斷點處停下：
如果調試器不支持條件斷點，那么就不會顯示添加和編輯的菜單。
內聯斷點
只有當執行到達與內聯斷點關聯的列時，才會命中內聯斷點。當調試在一行中包含多條語句的小型代碼時很有用，例如for循環：
用shift+F9添加內聯斷點。內聯斷點在編輯器中內聯顯示。
總結
VSCode的調試功能還是十分強大的，上面介紹的只是一部分內容，官方文檔中還有很多內容可以探索。
雖然對于vue.js這種有自己的devtool的框架，直接在瀏覽器調試更加直觀，但調試其他的Node.js程序，用VS Code效率還是很高的。
更多關于VSCode的相關知識，請訪問：vscode??！
