斷點

一旦執行到達某個點，斷點就會暫停程式。然後，你可以逐行瀏覽程式，觀察其執行情況並檢查變數的內容。

有三種建立斷點的方法。

1. 從程式碼中，使用 debugger; 語句。
2. 從瀏覽器中，使用開發人員工具。
3. 來自整合開發環境（IDE）。

偵錯程式宣告

你可以在 JavaScript 程式碼中的任何位置放置 debugger; 語句。一旦 JS 直譯器到達該行，它將停止指令碼執行，允許你檢查變數並逐步執行程式碼。

開發者工具

第二個選項是直接在瀏覽器的開發人員工具的程式碼中新增斷點。

開啟開發人員工具

Chrome 或 Firefox

1. 按下 F12 開啟開發人員工具
2. 切換到源選項卡（Chrome）或偵錯程式選項卡（Firefox）
3. 按 Ctrl + P 並鍵入 JavaScript 檔案的名稱
4. 按下 Enter 開啟它。

Internet Explorer 或 Edge

1. 按下 F12 開啟開發人員工具
2. 切換到 Debugger 選項卡。
3. 使用視窗左上角附近的資料夾圖示開啟檔案選擇窗格; 你可以在那裡找到你的 JavaScript 檔案。

蘋果瀏覽器

1. 按 Command + Option + C 開啟開發人員工具
2. 切換到資源選項卡
3. 開啟左側面板中的 Scripts 資料夾
4. 選擇你的 JavaScript 檔案。

從 Developer Tools 新增斷點

在開發人員工具中開啟 JavaScript 檔案後，可以單擊行號以放置斷點。下次程式執行時，它會暫停。

關於縮小源的注意事項： 如果縮小了源，則可以將其列印出來（轉換為可讀格式）。在 Chrome 中，點選原始碼檢視器右下角的 {} 按鈕即可完成此操作。

整合開發環境

Visual Studio 程式碼（VSC）

VSC 內建支援除錯 JavaScript。

1. 單擊左側的 Debug 按鈕或 Ctrl + Shift + D
2. 如果尚未完成，請按齒輪圖示建立啟動配置檔案（launch.json）。
3. 按綠色播放按鈕或點選，從 VSC 執行程式碼 F5。

在 VSC 中新增斷點

單擊 JavaScript 原始檔中行號旁邊的以新增斷點（它將標記為紅色）。要刪除斷點，請再次單擊紅色圓圈。

提示： 你還可以在瀏覽器的開發工具中使用條件斷點。這些有助於省略執行中不必要的中斷。示例場景：你希望在 第 5 次 迭代時檢查迴圈中的變數。