https://m.toutiao.com/is/Y1qhuKu/?=2022年了
你可能會說，要什么Debug，我console.log一把梭走天下。沒錯，這也是目前很多人在使用的調試方法。但是既然VS Code具備這樣的功能，試一試，或許會有新的收獲呢~
VS Code的關鍵特性之一就是它具有強大的調試（debug）功能，內置的調試器（debugger)可以幫助開發(fā)者快速的編輯、編譯和調試。
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），這里就是初始化的面板；然后我們在代碼中需要打斷點的地方加上斷點：
直接點擊運行和調試：
程序跑起來了，并在斷點處也停下來了。調試面板也被激活，顯示了變量、監(jiān)控、調用堆棧、斷點的面板。點擊上方調試操作欄的第一個圖標（繼續(xù)，快捷鍵是F5），程序會走到下一個斷點，并且變量面板中的msg變量會進行更新：
繼續(xù)點繼續(xù)，直到跳出最后一個斷點，我們的調試步驟就結束了。這就是一個最簡單的Node.js程序的調試過程。
當然我們實際開發(fā)中肯定不會有這么簡單的程序，所以接下來我們來詳細介紹下調試中的相關功能。
雖然上面的例子是Node.js項目，但是對于其他的調試器，大部分的概念和特性也都是通用的。
在上面的例子里我們已經看到過運行面板了。點擊左側的“運行和調試”圖標即可打開面板。運行面板顯示了所有關于運行和調試的相關信息。
如果還沒有配置launch.json，那么VS Code就會顯示初始狀態(tài)的面板。例子中我們就沒有進行配置，所以顯示就是初始狀態(tài)：
除了左側的圖標，也可以使用頂部的頂級菜單 運行（Run)。這里的命令基本和面板中的一致：
想不起快捷鍵的時候也可以在這里看看~
上面的例子中我們選擇了“運行和調試”，VS Code直接使用了內置的Node.js調試配置啟動了調試步驟。 然而大部分場景中，我們不會有這么簡單的調試。此時創(chuàng)建一個自定義的launch配置文件就十分有必要了，我們可以在配置文件中保存一些調試的細節(jié)。
VS Code把調試配置信息保存在.vscode目錄下的launch.json文件中（.vscode目錄一般存在于項目的根目錄下）。
要創(chuàng)建一個launch.json文件，在運行初始化面板中點擊“創(chuàng)建一個launch.json”：
VS Code會去嘗試自動檢測當前調試環(huán)境。如果它失敗了，我們就需要自己手動選擇：
選擇Node.js后，VS Code會自動生成配置文件以及.vscode目錄。這里是Node.js默認的launch.json:
{ // 使用 IntelliSense 了解相關屬性。 // 懸停以查看現(xiàn)有屬性的描述。 // 欲了解更多信息，請訪問: 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' } ]}復制代碼這里需要注意的是，對于不同類型的調試器，launch配置中的屬性可能都是各不相同的?？梢允褂肰S Code內置的智能提示功能去查看有哪些屬性可用，hover屬性就可以看到幫助信息。
不要想當然地認為某個調試器中存在的屬性放到其他的調試器下中也能起作用。調試前要確保所有配置都是有意義的。
在VS Code中，有兩種核心的調試模式，Launch和Attach，他們?yōu)殚_發(fā)者提供兩種不同類型的工作流。
最簡單的方式來理解這兩種工作流：
VS Code的調試支持用調試模式啟動一個程序，或者用調試模式附加到一個已經在運行中的程序。使用哪種調試配置，取決于我們的調試需求。
當你在launch.json中配置了type屬性的值后，就可以使用VS Code的智能提示（command+I）來查看所有可用的屬性：
下面的屬性是每個launch配置文件必須具備的：
下面是一些可選的配置屬性：
許多調試器支持以下的屬性：
VS Code在launch.json中提供了許多有用的變量，并在啟動時支持字符串內部的變量替換。例如，${workspaceFolder}給出了工作區(qū)文件夾的根路徑，${file}給出了在活動編輯器中打開的文件，${env:Name}給出了環(huán)境變量Name的值?？梢圆榭醋兞恳?來查看所有的預定義變量。
當啟動調試會話后，調試工具欄會顯示在頂部：
從左到右依次是：
點擊編輯器左邊距可以切換斷點（快捷鍵為F9）。在運行視圖中的“斷點”部分中，可以對斷點進行更多的控制。
編輯器左側的斷點一般展示為紅色實心圓，不可用的斷點為灰色實心圓。 如果調試器支持在不同的錯誤or異常中退出，在斷點部分中也會可用。
記錄點是斷點的一個變種，它不會break到調試器中，但是能夠往控制臺中打印一些信息。當調試不能暫停or停止的生產服務時，記錄點特別有用。
記錄點顯示為一個菱形的圖標。記錄信息是解釋文本但是也可以使用可計算的表達式（用大括號包裹）
就像普通的斷點一樣，記錄點也可以啟用、禁用，并且通過條件來控制。
在VS Code中調試Node.js有三種方法：
當啟用Auto Attach功能時，Node調試器會自動附加到VS Code中啟動的Node.js進程上。
Command+Shift+P打開輸入Auto Attach即可開啟功能：
這里的三個選項，我們選擇智能(smart)就可以。開啟后重啟一下VS Code，啟動程序后調試器就會自動附加上。此時下方的狀態(tài)欄會顯示auto attach的狀態(tài)，也可以點擊進行更改。
和auto attach相似，用JavaScript調試終端可以自動的調試你在終端里運行的任何Node.js程序。在終端的下拉選擇框中選擇JavaScript Debug Terminal即可：
通過配置launch.json進行調試是比較傳統(tǒng)的調試方式，根據(jù)自己的項目代碼需求進行配置，靈活性比較高。
除了可以直接通過node命令啟動Node.js程序，我們也可以通過配置使用npm或其他工具進行調試。
我的上一篇文章 記一次不完全的源碼調試之npm install 就是通過這種方式進行調試的。
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-Source map 相關的官方文檔。
如果想要使用VS Code調試vue項目，可以參考# 如何讓 Vue、React 代碼的調試變得更爽。該配置在vue2的項目中可用，vue3目前還沒實踐成功。
最后介紹一下VS Code中的一些高級斷點功能，日常調試可能用不到但是可以了解一下。
VS Code中一個強有力的調試功能是具有基于表達式、命中次數(shù)或兩者的組合設置條件的能力。
你可以在創(chuàng)建斷點或修改現(xiàn)有斷點時，添加條件or命中次數(shù)。在這兩種情況下，都會打開帶有下拉菜單的內聯(lián)文本框，可以在其中輸入表達式：
當i=3時，會在斷點處停下：
或者設置命中次數(shù)：
命中次數(shù)等于5時在斷點處停下：
如果調試器不支持條件斷點，那么就不會顯示添加和編輯的菜單。
只有當執(zhí)行到達與內聯(lián)斷點關聯(lián)的列時，才會命中內聯(lián)斷點。當調試在一行中包含多條語句的小型代碼時很有用，例如for循環(huán)：
用shift+F9添加內聯(lián)斷點。內聯(lián)斷點在編輯器中內聯(lián)顯示。
VSCode的調試功能還是十分強大的，上面介紹的只是一部分內容，官方文檔中還有很多內容可以探索。
雖然對于vue.js這種有自己的devtool的框架，直接在瀏覽器調試更加直觀，但調試其他的Node.js程序，用VS Code效率還是很高的。
原文地址：
https://juejin.cn/post/7080135520902184997
