偵錯功能
VS Code 內建對 Node.js、Python(需裝官方擴充套件)等主流語言的偵錯支援,透過圖形介面設中斷點、逐行執行、檢視變數,比在程式碼裡插入大量 print 更精準,也更容易復原。
開始偵錯
- 點活動列的「執行與偵錯(Run and Debug)」圖示,或按
Cmd/Ctrl+Shift+D。 - 第一次使用時點「create a launch.json file」,VS Code 會依專案類型(偵測到的語言)產生對應的偵錯設定,存在
.vscode/launch.json。 - 按
F5開始偵錯;沒有中斷點時程式會直接執行到結束,行為與直接執行一致。
中斷點(Breakpoints)
在程式碼行號左側點一下即可加入中斷點(顯示紅點),程式執行到該行前會暫停,這時可以:
- 在編輯區內把滑鼠移到任何變數上,直接看到目前的值。
- 用左側「變數(Variables)」面板瀏覽所有區域變數與其結構。
- 用「監看式(Watch)」新增自己想持續追蹤的運算式。
- 用「呼叫堆疊(Call Stack)」確認目前程式碼是被哪一層函式呼叫到的。
右鍵點中斷點可以設定條件式中斷點(例如「只有 i > 10 時才暫停」),在迴圈中排查特定情況特別實用,不必手動一步一步跳過前面不相關的執行次數。
逐步執行
暫停後,偵錯工具列提供四種逐步執行方式:
| 操作 | 快捷鍵 | 說明 |
|---|---|---|
| Continue | F5 |
繼續執行到下一個中斷點 |
| Step Over | F10 |
執行目前這一行,不深入函式內部 |
| Step Into | F11 |
深入目前這一行呼叫的函式內部 |
| Step Out | Shift+F11 |
執行完目前函式,回到呼叫它的地方 |
偵錯主控台
面板下方的「偵錯主控台(Debug Console)」可以在程式暫停時即時輸入運算式並執行,例如手動呼叫某個函式、修改變數的值,方便驗證假設而不必修改程式碼重新執行一次。
推薦影音
官方:VS Code 偵錯入門
簡述:官方示範開啟 Run and Debug 視圖、設中斷點、觀察呼叫堆疊與變數,並簡介 launch.json 的基本設定,是第一次使用 VS Code 偵錯器最完整的入門影片。