深入探究JS調試：從斷點開始

斷點是調試JS程序中常用的一種技術手段，用於暫停程序的執行，方便開發人員查看各種狀態、調用棧、變量值等信息。我們可以在代碼中通過設置斷點，例如：

function foo() {
  let a = 1;
  let b = 2;
  console.log(a + b);
}

foo();

在DevTools中，我們可以點擊行號將斷點設置到給定的位置，並打開調試面板；當代碼執行到這個位置時，程序會中斷執行，以便於我們查看當前的狀態變量以及調用棧等。

當然，我們也可以在JS代碼中加入debugger語句，這樣當程序執行到該語句時，程序同樣會中斷。

在程序中設置了斷點後，我們可以單步執行程序，以便觀察每一步的執行結果和狀態變化。

DevTools 提供了幾種單步執行方式，如下所示：

我們可以通過點擊上述的按鈕或使用對應的快捷鍵進行單步執行。

JS調試中，常常需要觀察變量的值隨着程序執行的變化情況。我們可以在 DevTools 中的 Scope 面板上查看變量值和作用域。

我們可以通過設置變量的監視點，以便於在斷點命中時自動觀察其變量值。例如，下面的代碼為 “name” 添加了一個監視點：

let name = "Tom";
console.log(name); // 輸出 "Tom"
name = "Jerry";

在 DevTools 中打開 Scope 面板，我們可以看到每個變量的當前值和作用域範圍。同時，我們可以對變量進行編輯，以實現動態調試。

條件斷點是一種特殊類型的斷點，它只在符合特定條件時才會命中。在代碼中，有時某個斷點會由於某些原因反覆命中，從而導致程序的性能下降，這時候我們可以使用條件斷點進行限制。

在設置斷點時，我們可以設定條件。例如，我們可以為下面的代碼設置條件斷點，只在 x 大於 5 時才命中：

function foo(x) {
  for (let i = 0; i < 10; i++) {
    console.log(i);
    if (i === x) {
      debugger;
    }
  }
}

foo(5);

在前端開發過程中，我們經常需要和後端進行交互，通過XHR（XML Http Request）請求獲取數據。JS調試中，我們經常需要觀察XHR請求的狀態和響應數據等，以便檢測接口的正確性。

在 DevTools 中，我們可以在 Network 面板中查看所有的網絡請求，包括XHR請求、資源請求等。我們可以選定某個XHR請求並打開 Preview 窗口，可以查看其返回的數據以及響應狀態，以便於調試接口。

JS開發中，異常處理是程序健壯性的重要組成部分。例如，在程序出現異常時，我們需要捕捉並記錄錯誤信息，以便於進行問題定位和排查。

在 DevTools 的 Console 面板中，我們可以捕捉到運行時產生的異常，並顯示棧內部的相關信息。同時，我們還可以在 Sources 面板中設置異常斷點，以便於在程序拋出異常時自動中斷調試程序。

本篇文章從斷點的含義及作用、單步執行程序、監控變量的值、條件斷點、XHR調試、異常處理等方面介紹了JS調試的相關知識。在日常開發中，熟練掌握JS調試技術非常重要，可以大大提高開發效率，同時也可以減少出錯的概率。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/184497.html