如何使用 Firefox 调试 JavaScript?
在本教程中，我们将学习使用 Firefox Web 浏览器调试 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 中打开调试器面板
RightClick → inspect → debugger.
在 Firefox 中打开开发者工具的另一种方法是在 Mac 中按cmd + shift + I，在 Windows 和 Linux 操作系统中按ctrl + shift + I。
cmd/ ctrl + shift + I → debugger.
调试器面板包含三个部分。第一部分包含文件和文件夹，中间部分是源代码编辑器。
调试器面板包含三个部分。第一部分包含文件和文件夹，中间部分是源代码编辑器。
您可以通过单击第一部分中的文件来打开中间部分中的任何文件。此外，您还可以更改代码并针对各种测试用例测试您的代码。第三部分包含调试器的所有基本工具。
第三部分向我们展示了变量的所有断点、值和范围。此外，我们可以使用源面板的第三部分为任何事件设置断点。
设置断点
调试代码时的一个重要部分是断点。无论用户在何处添加断点，我们的代码执行都会在那里停止，并且当执行控制到达该行时，用户可以观察所有变量的值。
用户可以通过单击该行号在任何代码行设置断点。要为任何事件设置断点，用户可以转到第三部分中的事件侦听器部分并选择任何事件的断点。在我们的例子中，我们将选择鼠标单击事件的断点，如下图所示。用户需要勾选点击事件的复选框。
开始调试
现在，当我们提交两个字符串时，它将开始调试整个事件侦听器。现在，在输入中输入值并提交。
用户可以看到它从事件侦听器的第一行开始调试。要逐行移动它，请按右上角的箭头按钮，如下图所示。此外，
用户需要在调试器面板第三部分的范围部分中观察所有变量的值。
在下图中，用户可以看到，当我们逐行移动并观察每个变量的值时，input1 的值是小写，而 input2 的值是大写。这意味着它在匹配字符串时会产生问题。
为了解决上述错误，我们需要将两个字符串都转换为小写；我们错误地将一个字符串转换为大写，我们需要改进。
在本教程中，用户了解了如何通过在 Firefox 中调试代码来修复代码中的每个小错误。开发人员工具是每个浏览器为程序员提供的宝贵礼物，因为我们可以立即解决任何错误。
此外，程序员可以使用控制台调试代码。我们可以使用 console.log() 在代码中设置断点，检查打印了哪些代码以及没有打印哪些代码，并检查代码的执行流程。但这种方法需要花时间来查找错误，因此最好使用 Firefox 中的调试器工具。
