斷點

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

有三種建立斷點的方法。

  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 迭代時檢查迴圈中的變數。

StackOverflow 文件