JavaScript - 调试
什么是调试?
JavaScript 中的调试是检查 JavaScript 代码、查找错误并修复的过程。开发人员在编写代码时难免会犯一些错误。这些错误可能是逻辑错误、语法错误或运行时错误。程序或脚本中的错误被称为 bug。
查找和修复 bug 的过程称为调试，是开发过程的正常组成部分。本节介绍一些可以帮助您完成调试任务的工具和技术。
让我们来看看不同的调试方法。
使用 JavaScript 调试器
调试器是一个将脚本执行的所有方面置于程序员控制之下的应用程序。调试器通过一个界面提供对脚本状态的细粒度控制，该界面允许您检查和设置值以及控制执行流程。
脚本加载到调试器后，可以一次运行一行，也可以指示其在特定断点处暂停。执行暂停后，程序员可以检查脚本及其变量的状态，以确定是否存在问题。您还可以观察变量值的变化。
如今，所有现代浏览器都内置了调试器。您可以使用浏览器的控制台来调试 JavaScript 代码。
如何在浏览器中打开控制台?
在本节中，您将学习如何在不同的浏览器中打开控制台。
在 Chrome 中打开控制台
按下以下按键。
Windows/Linux − Ctrl + Shift + I or Ctrl + Shift + J
macOs − Cmd + Option + I or 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 or Ctrl + Shift + J
macOs − Cmd + Option + I or 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 or Ctrl + Shift + J
macOs − Cmd + Option + I or 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.
它将在 Web 控制台中产生以下结果 -
typeof num1 is string VM75616:7 typeof num2 is number
示例
在下面的代码中，我们有一个包含各种属性的 Person 对象。我们在 Web 浏览器中打印 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.
它将在 Web 控制台中产生以下结果 -
{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 关键字显式声明变量。
