数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何在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 中的调试器工具。
2K+ 次查看
