💡 前言

昨天我們學會了如何透過 AI 助手快速生成程式碼。然而，程式碼寫出來後難免會遇到不如預期的 Bug。

許多人在除錯時，最習慣的做法就是寫滿各種 console.log() 或 print()，然後把變數印在終端機上觀看。當程式碼規模變大時，這種「土法煉鋼」不僅要頻繁修改程式碼、重新執行，還容易漏掉關鍵資訊。

今天 Day 18 我們要來解鎖 VS Code 極為強大的內建除錯器，讓你用專業的逐行追蹤方式，輕鬆揪出隱藏的 Bug！

🎯 本篇重點

1. 為什麼要告別 console.log？
2. 設定斷點 (Breakpoint) 與啟動除錯 (F5)
3. 四大控制按鈕：Step Over、Step Into、Step Out、Continue
4. 即時監控變數與呼叫堆疊

🛑 1. 什麼是斷點？

除錯的核心概念就是「讓程式在指定的行數暫停執行」，以便你檢視當下的環境狀態。

• 如何下斷點：
在 VS Code 程式碼編輯器的行號左側（例如第 10 行的左邊空白處）輕輕用滑鼠點一下，會出現一個紅色的圓點 (Red Dot)，這就是斷點。當程式執行到這一行時，會立刻凍結，不會繼續往下跑。

🚀 2. 啟動除錯面板 (F5)

1. 點擊左側工具列的 「執行與除錯 (Run and Debug)」 圖示（或按下快捷鍵 Ctrl + Shift + D / Mac 的 Cmd + Shift + D）。
2. 點擊 「執行與除錯 (Run and Debug)」 按鈕（或直接按下 F5）。
3. 如果是 Node.js 專案，VS Code 會自動啟動程式並在剛剛設定的紅點處暫停，畫面會變成暗色調，代表進入除錯模式。

🎮 3. 除錯控制列四大天王（逐行執行控制）

當程式在斷點處暫停時，畫面上方會出現一個懸浮的控制列，裡面有四個最核心的按鈕：

A. 繼續 (Continue / 快捷鍵 F5)

讓程式暫停狀態解除，直接跑向下一個斷點，或直到程式執行結束。

B. 不進入函式逐行執行 (Step Over / 快捷鍵 F10)

執行當前這一行程式碼，並移動到下一行。如果這一行剛好呼叫了一個自訂函式，它會直接把該函式執行完畢，不會跳進函式內部。適合快速檢查主流程。

C. 進入函式內部 (Step Into / 快捷鍵 F11)

如果當前行包含一個函式呼叫，按下此按鈕會直接跳進該函式的內部第一行，讓你一行一行追蹤函式內部的運作細節與參數變化。

D. 跳出函式 (Step Out / 快捷鍵 Shift + F11)

如果你不小心用 Step Into 跑進一個太深的內建函式或不需要檢查的工具函式，按下此按鈕可以立刻執行完當前函式，並跳回上一層呼叫它的地方。

👀 4. 區域變數監控 (Variables) 與 Watch 觀察區

在畫面左側的除錯面板中，你會看到幾個極其實用的資訊區塊：

• 變數 (Variables)：
這裡會即時列出目前作用域內所有的區域變數與全域變數及其數值。當你用 F10 逐行往下跑時，會看到這些變數數值隨之動態改變，任何異常的 undefined 或型態錯誤一眼就能看出！
• 監看式 (Watch)：
如果你想特別盯緊某個複雜的運算式（例如 user.age * 2），可以點擊 + 號把它加進 Watch 區，除錯時就會隨時幫你計算並顯示該運算式的結果。
• 呼叫堆疊 (Call Stack)：
顯示目前這行程式碼是由哪幾個函式一層一層呼叫進來的，幫助你釐清程式的執行脈絡。