如何使用 Firefox 调试 JavaScript？

Javascript Web 开发前端技术

在本教程中，我们将学习如何使用 Firefox 浏览器调试 JavaScript 代码。通常，我们调试代码是为了修复未知的 bug 和错误。这在初学者程序员中很常见，代码昨天晚上运行良好，但今天早上突然崩溃了。

程序员们现在不必担心代码崩溃。一旦你学会了如何调试代码，你就可以在几分钟内修复任何 bug 并使其正常工作。

如果用户想学习如何调试代码，第一步是编写一个包含错误的代码示例。因此，下面我们有一个包含一些错误的示例代码。

示例

在下面的示例中，我们将从用户处获取两个输入字符串并进行匹配。如果字符串相等，我们的程序返回“两个字符串相等”。否则，它返回“两个字符串不相等”。此外，我们还修复了一个小 bug 来调试我们的代码。


<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>

在上面的输出中，用户可以看到，即使您在文本框中输入相同的字符串，它也会返回消息“两个字符串不相等”。

这是我们代码中的一个 bug。现在，让我们开始调试代码来解决这个 bug。

使用 Firefox 调试示例

要在 Firefox 中调试代码，用户需要打开 Firefox 中的开发者工具。每个现代浏览器都包含一个调试器，Firefox 也不例外。要在 Firefox 中打开开发者工具，用户可以右键单击屏幕并单击“检查”选项。之后，用户可以在 Firefox 中打开调试器面板。

右键单击 → 检查 → 调试器。

另一种在 Firefox 中打开开发者工具的方法是，在 Mac 上按 cmd + shift + I，在 Windows 和 Linux 操作系统上按 ctrl + shift + I。

cmd/ctrl + shift + I → 调试器。

调试器面板包含三个部分。第一部分包含文件和文件夹，中间部分是源代码编辑器。

调试器面板包含三个部分：*第一部分* 包含文件和文件夹，*中间部分* 是源代码编辑器。

您可以通过单击第一部分中的文件来在中间部分打开任何文件。此外，您可以更改代码并针对各种测试用例测试代码。第三部分包含调试器的所有必要工具。

第三部分显示所有断点、值和变量作用域。此外，我们还可以使用源面板的第三部分为任何事件设置断点。

设置断点

调试代码的一个重要部分是断点。用户在任何位置添加断点，我们的代码执行将在那里停止，用户可以在执行控制到达该行时观察所有变量的值。

用户可以通过单击该行号来在任何代码行设置断点。要为任何事件设置断点，用户可以转到第三部分中的事件监听器部分，并为任何事件选择断点。在我们的例子中，我们将为鼠标单击事件选择断点，如下面的图像所示。用户需要选中单击事件的复选框。

开始调试

现在，当我们提交两个字符串时，它将开始调试整个事件监听器。现在，在输入中输入值并提交。

用户可以看到它从事件监听器的第一行开始调试。要逐行移动，请按下右上角的箭头按钮，如下图所示。此外，

用户需要在调试器面板的第三部分的作用域部分观察所有变量的值。

在下图中，用户可以看到，当我们逐行移动并观察每个变量的值时，input1 的值是小写，而 input2 的值是大写。这意味着在匹配字符串时会产生问题。

为了克服上述 bug，我们需要将两个字符串都转换为小写；我们错误地将一个字符串转换为大写，我们需要改进这一点。

在本教程中，用户学习了如何通过在 Firefox 中调试代码来修复代码中的每个小 bug。对于程序员来说，开发者工具是每个浏览器的宝贵礼物，因为我们可以立即解决任何错误。

此外，程序员可以使用控制台调试代码。我们可以使用 console.log() 在代码中设置断点，检查代码打印的内容和未打印的内容，并检查代码的执行流程。但是这种方法查找错误需要时间，因此最好使用 Firefox 中的调试器工具。

Shubham Vora

更新于：2022年8月30日

2K+ 次浏览

开启你的职业生涯

完成课程获得认证

广告

© . All rights reserved.