JavaScript - 除錯

什麼是除錯？

JavaScript 除錯是檢查 JavaScript 程式碼並查詢錯誤並修復它們的流程。開發人員在編碼時不時會犯錯誤。此錯誤可能是邏輯錯誤、語法錯誤或執行時錯誤。程式或指令碼中的錯誤稱為 bug。

查詢和修復 bug 的過程稱為除錯，是開發流程的正常部分。本節介紹可以幫助您完成除錯任務的工具和技術。

讓我們看看不同的除錯方法。

使用 JavaScript 偵錯程式

偵錯程式是一個應用程式，它將指令碼執行的所有方面都置於程式設計師的控制之下。偵錯程式透過一個介面提供對指令碼狀態的細粒度控制，允許您檢查和設定值以及控制執行流程。

一旦指令碼載入到偵錯程式中，就可以逐行執行它或指示它在某些斷點處停止。一旦執行停止，程式設計師就可以檢查指令碼及其變數的狀態，以確定是否存在問題。您還可以監視變數的值變化。

如今，所有現代瀏覽器都帶有內建偵錯程式。您可以使用瀏覽器的控制檯除錯 JavaScript 程式碼。

如何在瀏覽器中開啟控制檯？

在本節中，您將學習如何在不同的瀏覽器中開啟控制檯。

在 Chrome 中開啟控制檯

按以下鍵。

Windows/Linux - Ctrl + Shift + I 或 Ctrl + Shift + J
macOS - Cmd + Option + I 或 Cmd + Option + J

或者

步驟 1 - 開啟 Chrome 瀏覽器並在新視窗中開啟網頁。
步驟 2 - 在網頁上的任意位置右鍵單擊。
步驟 3 - 將彈出選單。選擇最後一個選項，即“檢查”。
步驟 4 - 它將開啟 Chrome 開發者工具。
步驟 5 - 轉到控制檯選項卡。

在 Firefox 中開啟控制檯

按以下鍵。

Windows/Linux - Ctrl + Shift + I 或 Ctrl + Shift + J
macOS - Cmd + Option + I 或 Cmd + Option + J

或者

步驟 1 - 開啟 Firefox 瀏覽器並在新視窗中開啟網頁。
步驟 2 - 在網頁上的任意位置右鍵單擊。
步驟 3 - 從彈出選單中選擇最後一個選項，即“檢查(Q)”。
步驟 4 - 它將開啟開發者工具。
步驟 5 - 您可以從“檢查器”選項卡移動到“控制檯”選項卡。

在 Microsoft Edge 中開啟控制檯

按以下鍵。

Windows/Linux - Ctrl + Shift + I 或 Ctrl + Shift + J
macOS - Cmd + Option + I 或 Cmd + Option + J

或者

步驟 1 - 開啟 Microsoft Edge 瀏覽器。
步驟 2 - 在網頁上的任意位置右鍵單擊。
步驟 3 - 在彈出選單中單擊“檢查”。
步驟 4 - 您將看到開發者工具已開啟。
步驟 5 - 接下來，您可以將開發者工具中的“元素”選項卡更改為“控制檯”選項卡。

在 Safari 中開啟控制檯

按以下鍵。

Windows/Linux - Ctrl + Shift + I 或 Ctrl + Shift + J
macOS - Cmd + Option + I 或 Cmd + Option + J

或者

步驟 1 - 開啟 Safari 瀏覽器。
步驟 2 - 從頂部選單欄開啟 Safari 主選單。
步驟 3 - 在下拉選單中選擇“偏好設定”。接下來，選擇“高階”選項。
步驟 4 - 選中名為“在選單欄中啟用顯示開發選單”的複選框以啟用開發者工具。接下來，關閉偏好設定視窗。
步驟 5 - 接下來，重新開啟主選單並選擇“開發”。之後，選擇“顯示錯誤控制檯”。

在 Opera 中開啟控制檯

按以下鍵。

Windows/Linux - Ctrl + Shift + I 或 Ctrl + Shift + J
macOS - Cmd + Option + I 或 Cmd + Option + J

或者

步驟 1 - 開啟 Opera 瀏覽器。
步驟 2 - 從右上角開啟主選單。
步驟 3 - 在主選單中，選擇“開發者”。它將開啟子選單。
步驟 4 - 在子選單中，選擇“開發者工具”。
步驟 5 - 接下來，選擇“控制檯”。它將開啟控制檯。

使用 console.log() 方法

console.log() 方法在 Web 瀏覽器的控制檯中列印訊息。它可以列印原始值、物件、變數值等。

您可以在想要除錯的控制檯中列印變數的值。

語法

使用者可以按照以下語法使用 console.log() 方法。

Console.log(val1, val2, ...);

console.log() 方法接受逗號分隔的引數，以便在 Web 瀏覽器的控制檯中列印。

示例

在下面的程式碼中，我們添加了 num1 和 num2 變數的值。在瀏覽器中，您可以看到總和為 32 而不是 5。

因此，您需要除錯程式碼。

當你在控制檯列印 num1 和 num2 的型別時，它顯示 num1 的型別是字串。因此，它將 num2 變數的值轉換為字串，並將其追加到 num1 的值後面。

<html>
<body>
   <div id = "output"> </div>
   <p>Note: To see the resullt in console, please open it before you run the code.</p>
   <script>
      let num1 = "3";
      let num2 = 2;
      let sum = num1 + num2;
      document.getElementById("output").innerHTML = "The sum is: " + sum;
      console.log("typeof num1 is " + typeof num1);
      console.log("typeof num2 is " + typeof num2);
   </script>
</body>
</html>

輸出

The sum is: 32
Note: To see the resullt in console, please open it before you run the code.

它將在網頁控制檯中產生以下結果：

typeof num1 is string
VM75616:7 typeof num2 is number

示例

在下面的程式碼中，我們有一個包含各種屬性的 person 物件。我們在網頁瀏覽器中列印 person 物件的 firstname 和 lastname 屬性。它列印 undefined。

為了找到錯誤，你需要除錯程式碼。接下來，我們在控制檯中列印該物件，發現 Person 物件不包含 firstname 和 lastname 屬性；而是包含 'name' 屬性。

<html>
<body>
   <div id = "demo"> </div>
   <p>Note: To see the resullt in console, please open it before you run the code.</p>
   <script>
      let output = document.getElementById("demo");
      let person = {
         name: "John",
         age: 25,
         city: "New York"
      }
      output.innerHTML = "The name of the person is: " + person.name + "<br>";
      output.innerHTML += "The city of the person is: " + person.city + "<br>";
      console.log(person);
   </script>
</body>
</html>

輸出

The name of the person is: John
The city of the person is: New York
Note: To see the resullt in console, please open it before you run the code.

它將在網頁控制檯中產生以下結果：

{name: 'John', age: 25, city: 'New York'}

使用 debugger 關鍵字

你可以轉到瀏覽器控制檯的“原始碼”面板來除錯程式碼。

“debugger”關鍵字允許你強制停止 JavaScript 程式碼的執行。

停止 JavaScript 程式碼的執行允許你逐行除錯程式碼。

一旦你找到錯誤或一切看起來都正常，你就可以恢復 JavaScript 程式碼的執行。

你可以開啟控制檯並在瀏覽器中執行以下程式碼。它將自動暫停程式碼，你可以觀察變數的值來除錯程式碼。

示例

下面的示例與上面相同。我們在列印物件屬性的值之前添加了“debugger”關鍵字。

它將在列印屬性值之前暫停程式碼的執行。之後，當你點選恢復按鈕時，它將恢復程式碼的執行。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const person = {
         name: "John",
         age: 25,
         city: "New York"
      }
      debugger;
      output.innerHTML = "The name of the person is: " + person.name + "<br>";
      output.innerHTML += "The city of the person is: " + person.city;
   </script>
</body>
</html>

輸出

The name of the person is: John
The city of the person is: New York

你將在控制檯中看到類似於以下螢幕截圖的結果。要在控制檯中檢視結果，請在執行程式碼之前開啟它。

上圖顯示了瀏覽器視窗頂部的暫停按鈕以及右下角的物件或變數。透過這種方式，你可以檢查變數值並除錯程式碼以修復錯誤。

在瀏覽器的偵錯程式中設定斷點

設定斷點與使用“debugger”關鍵字除錯 JavaScript 程式碼相同。所以，這是一種替代方法。

在“原始碼”面板中，你可以點選想要新增斷點的行號，如下面的影像所示。

之後，當你執行 JavaScript 程式碼時，它將停止程式碼的執行，你可以在右側觀察變數的值。

示例

我們在下面的示例程式碼中定義了 test() 函式。test() 函式連線 str1 和 str2 字串。

我們在開發者工具中打開了瀏覽器中的“原始碼”面板。之後，我們在 'let res = str1.concat(str2);' 行添加了斷點。因此，偵錯程式將在這一行停止程式碼的執行，你可以點選恢復按鈕以恢復程式碼的執行。

<html>
<body>
   <div id = "output">The resultant string after appending str2 to str1 is: </div>
   <script>
      function test() {
         let str1 = "Hi";
         let str2 = "";
         let res = str1.concat(str2);
         document.getElementById("output").innerHTML += res;
      }
      test();
   </script>
</body>
</html>

輸出

The resultant string after appending str2 to str1 is: Hi

你將在控制檯中看到類似於以下螢幕截圖的結果。要在控制檯中檢視結果，請在執行程式碼之前開啟它。

開發者實用技巧

你可以牢記以下技巧，以減少指令碼中的錯誤數量並簡化除錯過程：

使用大量的註釋。註釋使你能夠解釋為什麼以這種方式編寫指令碼，以及解釋程式碼中特別困難的部分。
始終使用縮排使你的程式碼易於閱讀。縮排語句還可以讓你更容易匹配開始和結束標籤、花括號和其他 HTML 和指令碼元素。你可以在 IDE 中使用程式碼格式化程式。
編寫模組化程式碼。儘可能將語句分組到函式中。函式允許你對相關語句進行分組，並以最小的努力測試和重用程式碼部分。
在命名變數和函式的方式上保持一致。嘗試使用足夠長的名稱以具有意義，並描述變數的內容或函式的用途。
在命名變數和函式時使用一致的語法。換句話說，全部小寫或全部大寫；如果你更喜歡駝峰式命名法，請始終如一地使用它。
以模組化的方式測試長指令碼。換句話說，不要嘗試在測試任何部分之前編寫整個指令碼。編寫一部分並使其工作，然後再新增下一部分程式碼。
使用描述性的變數和函式名稱，並避免使用單字元名稱。
注意你的引號。請記住，引號成對用於字串周圍，並且兩個引號必須是相同樣式（單引號或雙引號）。
注意你的等號。你不應該將單個 = 用於比較目的。
使用var關鍵字顯式宣告變數。

列印頁面