调试是在 JavaScript 代码中查找错误并修复它们的过程。开发者在编码时偶尔会犯错。这些错误可能是逻辑错误、语法错误或运行时错误。程序或脚本中的错误通常称为 bug。
发现并修复这些 bug 的过程被称为调试，它是开发过程的一部分。本节将介绍一些可以帮助你完成调试任务的工具和技术。
让我们来看看不同的调试方法。
使用 JavaScript 调试器
调试器是一种应用程序，它可以将脚本执行的所有方面置于程序员的控制之下。调试器通过一个接口提供了对脚本状态的细粒度控制，允许你检查和设置值以及控制执行流程。
一旦脚本被加载到调试器中，就可以逐行运行或指示其在某些断点处停止。一旦执行停止，程序员可以检查脚本及其变量的状态，以确定是否有问题。你还可以监视变量的变化。
如今，所有现代浏览器都内置了调试器。你可以使用浏览器的控制台来调试 JavaScript 代码。
如何在浏览器中打开控制台？
在本节中，你将学习如何在不同的浏览器中打开控制台。
在 Chrome 中打开控制台
按下以下键：
-
Windows/Linux：Ctrl + Shift + I 或 Ctrl + Shift + J
-
macOS：Cmd + Option + I 或 Cmd + Option + J
或者，
步骤 1：打开 Chrome 浏览器并在新窗口中打开网页。 步骤 2：在网页上的任意位置右击。 步骤 3：弹出菜单后选择最后一个选项，即 'inspect'。 步骤 4：这将打开 Chrome 开发者工具。 步骤 5：转到控制台标签页。
在 Firefox 中打开控制台
按下以下键：
-
Windows/Linux：Ctrl + Shift + I 或 Ctrl + Shift + J
-
macOS：Cmd + Option + I 或 Cmd + Option + J
或者，
步骤 1：打开 Firefox 浏览器并在新窗口中打开网页。 步骤 2：在网页上的任意位置右击。 步骤 3：从弹出菜单中选择最后一个选项 'inspect(Q)'。 步骤 4：这将打开开发者工具。 步骤 5：你可以从 'inspector' 标签页切换到 'console' 标签页。
在 Microsoft Edge 中打开控制台
按下以下键：
-
Windows/Linux：Ctrl + Shift + I 或 Ctrl + Shift + J
-
macOS：Cmd + Option + I 或 Cmd + Option + J
或者，
步骤 1：打开 Microsoft Edge 浏览器。 步骤 2：在网页上的任意位置右击。 步骤 3：点击弹出菜单中的 'inspect'。 步骤 4：你会看到开发者工具已打开。 步骤 5：接着，你可以在开发者工具中将 'Elements' 标签切换为 'Console' 标签。
在 Safari 中打开控制台
按下以下键：
-
Windows/Linux：Ctrl + Shift + I 或 Ctrl + Shift + J
-
macOS：Cmd + Option + I 或 Cmd + Option + J
或者，
步骤 1：打开 Safari 浏览器。 步骤 2：从顶部菜单栏打开 Safari 主菜单。 步骤 3：在下拉菜单中选择 'preferences'。接着选择 'advanced' 选项。 步骤 4：勾选名为 'Enable Show Develop menu in menu bar' 的复选框来启用开发者工具。关闭偏好设置窗口。 步骤 5：重新打开主菜单并选择 'Develop’。之后，选择 'Show Error Console’。
在 Opera 中打开控制台
按下以下键：
-
Windows/Linux：Ctrl + Shift + I 或 Ctrl + Shift + J
-
macOS：Cmd + Option + I 或 Cmd + Option + J
或者，
步骤 1：打开 Opera 浏览器。 步骤 2：从右上角打开主菜单。 步骤 3：在主菜单中选择 'Developer’。这将打开子菜单。 步骤 4：在子菜单中选择 'developer tools’。 步骤 5：接着，选择 'console’。这将打开控制台。
使用 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 result 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 result 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 result 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 result in console, please open it before you run the code.
它将在 Web 控制台中产生以下结果：
{name: 'John', age: 25, city: 'New York'}
使用 debugger 关键字
你可以前往浏览器控制台的 'source' 面板来调试代码。
debugger 关键字允许你强制停止 JavaScript 代码的执行。
停止 JavaScript 代码的执行使得你可以逐行调试代码。
一旦你找到 bug 或者一切看起来都正常，你可以恢复 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 关键字
上图展示了浏览器窗口顶部的暂停按钮和右下角的对象或变量。通过这种方式，你可以检查变量值并调试代码以修复 bug。
在浏览器调试器中设置断点
设置断点与使用 debugger 关键字调试 JavaScript 代码相同。这是另一种方式。
在 'source' 面板中，你可以点击你想添加断点的行号，如下图所示。
之后，当你执行 JavaScript 代码时，它将停止代码的执行，你可以在右侧观察变量的值。
示例
在下面的示例代码中，我们定义了一个 test() 函数，该函数将 str1 和 str2 字符串进行拼接。
我们在浏览器的开发者工具中打开了 'source' 面板。之后，我们在 let res = str1.concat(str2); 这一行添加了断点。因此，调试器会在这一行停止代码的执行，你可以点击恢复按钮来继续执行代码。
<html>
<body>
<div id = "output">拼接 str2 到 str1 后的结果字符串是: </div>
<script>
function test() {
let str1 = "Hi";
let str2 = "";
let res = str1.concat(str2);
document.getElementById("output").innerHTML += res;
}
test();
</script>
</body>
</html>
输出：
拼接 str2 到 str1 后的结果字符串是: Hi
你将在控制台看到类似下面截图的结果。为了在控制台看到结果，请在运行代码前打开它。
调试断点输出
对开发者的有用提示
你可以记住以下提示，以减少脚本中的错误数量并简化调试过程：
-
使用大量的注释。注释使你能够解释为何按照某种方式编写脚本，并解释特别难懂的代码部分。
-
总是使用缩进来使你的代码易于阅读。缩进语句也使你更容易匹配起始和结束标签、大括号以及其他 HTML 和脚本元素。你可以使用 IDE 中的代码格式化工具。
-
编写模块化的代码。尽可能地将你的语句组合成函数。函数让你能够将相关的语句组合在一起，并且可以轻松测试和重用代码片段。
-
在命名变量和函数时保持一致性。尽量使用足够长的名称以使其有意义，并描述变量的内容或函数的目的。
-
在命名变量和函数时使用一致的语法。换句话说，要么全部小写，要么全部大写；如果你喜欢驼峰式命名法，则要一致地使用它。
-
模块化地测试长脚本。换句话说，在测试任何部分之前不要尝试编写整个脚本。编写一部分代码并使其工作后再添加下一部分代码。
-
使用描述性的变量和函数名，并避免使用单字符的名称。
-
注意引号。记住引号需要成对地出现在字符串周围，并且两个引号必须是相同的样式（要么是单引号，要么是双引号）。
-
-