如何在Firefox中除錯JavaScript？

在本教程中，我們將學習如何使用 Firefox 網路瀏覽器除錯 JavaScript 程式碼。通常，我們除錯程式碼是為了修復未知的錯誤。這主要發生在初級程式設計師身上，程式碼在昨晚執行成功，但突然在早上崩潰。

程式設計師們現在不必擔心程式碼崩潰了。一旦你學會了除錯程式碼，你就可以在幾分鐘內修復任何錯誤，並使其正常工作。

如果使用者想學習如何除錯程式碼，第一步是建立一個包含錯誤的程式碼示例。因此，我們下面有一個包含一些錯誤的示例程式碼。

示例

在下面的示例中，我們將從使用者那裡獲取兩個輸入字串並匹配字串。如果字串相等，我們的程式將返回“兩個字串相等”。否則，它將返回“兩個字串不相等”。此外，我們還修復了一個小錯誤來除錯我們的程式碼。

<html>
<head>
   <title> Debugging the JavaScript using FireFox. </title>
</head>
<body>
   <h2> Debugging the JavaScript using Firefox. </h2>
   <h4> Enter the values in input box to compare it. </h4>
   <!-- taking input strings from the user -->
   <input type = "text" id = "value1">
   <input type = "text" id = "value2">
   <button type = "submit" id = "submit">submit</button>
   <div id="result"> </div>
   <script>
      let submitButton = document.getElementById("submit");
   
      // when user clicks on the submit button, we perform string matching operation.
      submitButton.addEventListener('click', function () {
         let value1 = document.getElementById("value1");
         let value2 = document.getElementById("value2");
         let result = document.getElementById("result");

         // get value of both the input strings
         // here is the bug. we are converting one string to lowercase and another string to uppercase.
         let input1 = value1.value.toLowerCase();
         let input2 = value2.value.toUpperCase();
         try {
            if (input1 == input2) {
               result.innerHTML = "Both strings are equal."
            } else {
               result.innerHTML = "Both strings are not equal."
            }
         } catch (error) {
            result.innerHTML = "error occured."
         }
      });
   </script>
</body>
</html>

在上面的輸出中，使用者可以看到，即使您在文字框中輸入相同的字串，它也會返回訊息“兩個字串不相等”。

這是我們程式碼中的一個錯誤。現在，讓我們開始除錯程式碼來解決這個錯誤。

使用 Firefox 除錯示例

要使用 Firefox 除錯程式碼，使用者需要在 Firefox 中開啟開發者工具。每個現代瀏覽器都包含一個偵錯程式，Firefox 也不例外。要在 Firefox 中開啟開發者工具，使用者可以右鍵單擊螢幕並單擊“檢查”選項。之後，使用者可以在 Firefox 中開啟偵錯程式面板。

  • 右鍵單擊 → 檢查 → 偵錯程式。

在 Firefox 中開啟開發者工具的另一種方法是在 Mac 上按 cmd + shift + I，在 Windows 和 Linux 作業系統上按 ctrl + shift + I。

  • cmd/ctrl + shift + I → 偵錯程式。

偵錯程式面板包含三個部分。第一部分包含檔案和資料夾，中間部分是原始碼編輯器。

偵錯程式面板包含三個部分：第一部分包含檔案和資料夾，中間部分是原始碼編輯器。

您可以透過單擊第一部分中的檔案來在中間部分開啟任何檔案。此外，您可以更改程式碼並針對各種測試用例測試您的程式碼。第三部分包含偵錯程式的所有重要工具。

第三部分顯示我們所有斷點、值和變數範圍。此外，我們還可以使用源面板的第三部分為任何事件設定斷點。

設定斷點

除錯程式碼時一個重要的部分是斷點。使用者將在任何位置新增斷點，我們的程式碼執行將在那裡停止，使用者可以在執行控制到達該行時觀察所有變數的值。

使用者可以透過單擊該行號來在任何程式碼行設定斷點。要為任何事件設定斷點，使用者可以轉到第三部分的事件監聽器部分，併為任何事件選擇斷點。在我們的例子中，我們將為滑鼠單擊事件選擇斷點，如下面的圖片所示。使用者需要選中單擊事件的複選框。

開始除錯

現在，當我們提交兩個字串時，它將開始除錯整個事件監聽器。現在，在輸入中輸入值並提交。

使用者可以看到它從事件監聽器的第一行開始除錯。要逐行移動，請按下右上角的箭頭按鈕，如下面的圖片所示。此外，

使用者需要在偵錯程式面板第三部分的範圍部分觀察所有變數的值。

在下圖中，使用者可以看到，當我們逐行移動並觀察每個變數的值時，input1 的值為小寫，input2 的值為大寫。這意味著在匹配字串時會產生問題。

為了克服上述錯誤，我們需要將兩個字串都轉換為小寫；我們錯誤地將一個字串轉換為大寫，我們需要改進這一點。

在本教程中，使用者學習瞭如何透過在 Firefox 中除錯程式碼來修復程式碼中的每一個小錯誤。開發者工具是每個瀏覽器為程式設計師提供的寶貴禮物，因為我們可以立即解決任何錯誤。

此外，程式設計師可以使用控制檯除錯程式碼。我們可以使用 console.log() 在程式碼中設定斷點，檢查程式碼列印了什麼和沒有列印什麼，以及檢查程式碼的執行流程。但是這種方法需要時間來查詢錯誤，因此最好使用 Firefox 中的偵錯程式工具。

更新於：2022年8月30日

2K+ 次檢視

啟動您的 職業生涯

完成課程後獲得認證

開始
廣告