前言
VSCode作為目前使用人數最多的IDE，在前端開發者中也是十分受歡迎的。它免費、開源、還具備許多強大的功能，例如智能提示、插件商店、內建Git等等，但除此之外還有一個被許多開發者忽略的功能——運作和調試（Run and Debug）。
你可能會說，要什麼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"
}
]
}
複制代碼 複制
這裡需要注意的是，對于不同類型的調試器，launch配置中的屬性可能都是各不相同的。可以使用VS Code内置的智能提示（IntelliSense）功能去檢視有哪些屬性可用，hover屬性就可以看到幫助資訊。
不要想當然地認為某個調試器中存在的屬性放到其他的調試器下中也能起作用。調試前要確定所有配置都是有意義的。
launch和attach
在VS Code中，有兩種核心的調試模式，
Launch
和
Attach
，他們為開發者提供兩種不同類型的工作流。
最簡單的方式來了解這兩種工作流：
- launch配置可以了解為VS Code啟動調試程式的說明書；
- attach配置則是如何将VS Code的調試器連接配接到已運作的應用程式或程序的方法；
VS Code的調試支援用調試模式啟動一個程式，或者用調試模式附加到一個已經在運作中的程式。使用哪種調試配置，取決于我們的調試需求。