JavaScript 调试

高效调试（debugging）是任何 JavaScript 开发人员的一项关键技能。在没有良好调试器（debugger）的情况下编写代码会很快变得令人沮丧和低效。

调试的重要性

所有非简单的 JavaScript 代码都容易出错。这些错误可能是语法错误（syntax errors）（在执行前被 JavaScript 引擎捕获）、运行时错误（runtime errors）（在执行期间发生）或逻辑错误（logical errors）（代码运行但产生不正确的结果）。

通常，当 JavaScript 遇到未处理的运行时错误时，它可能会静默失败或停止执行，没有明确指示问题来源。调试器可帮助你精确定位这些问题。

	调试（Debugging）是系统地查找和修复代码中错误（bugs）的过程。

浏览器开发者工具

所有现代 Web 浏览器都配备了强大的内置开发者工具（developer tools），其中包括 JavaScript 调试器（debugger）。

这些工具允许你：

查看记录到控制台（console）的消息和错误。
设置断点（breakpoints）以在特定代码行暂停执行。
逐行单步执行代码，观察其流程。
在任何时候检查变量（variables）和表达式（expressions）的值。
分析调用堆栈（call stack）以理解函数执行路径。
监控网络请求、检查 DOM 和 CSS，以及分析性能。

通常，你可以通过按 F12 键打开开发者工具。常用的调试选项卡（tabs）是 ‘Console’ 和 ‘Sources’（或 ‘Debugger’）。

使用 console.log() 和其他 Console 方法

The console 对象提供了将信息记录到浏览器控制台（console）的方法。这是最简单的调试形式之一。

console.log()：用于通用输出消息或变量值。
console.warn()：用于显示警告。
console.error()：用于显示错误消息。
console.info()：用于显示信息性消息（通常样式与 log 类似）。
console.table()：用于以表格格式显示表格数据（数组或对象）。
console.group() 和 console.groupEnd()：用于分组相关的日志消息。
console.trace()：用于输出堆栈跟踪（stack trace）。

示例：

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>Debugging with Console</h1>
  <script>
    let a = 5;
    let b = 6;
    let c = a + b;
    console.log("Value of a:", a);
    console.log("Value of b:", b);
    console.log("Value of c (a + b):", c);

    if (c > 10) {
      console.warn("C is greater than 10!");
    }

    const user = { name: "Alice", age: 30 };
    console.table(user);
  </script>
</body>
</html>

设置断点

断点（Breakpoints）是你通过开发者工具中的 ‘Sources’ 或 ‘Debugger’ 面板在 JavaScript 代码中设置的标记，浏览器会在这些位置暂停执行。

当执行在断点处暂停时，你可以：

通过将鼠标悬停在变量上或使用 ‘Scope’ 面板来检查变量的当前值。
使用 ‘Watch’ 面板来监控特定的表达式。
检查 ‘Call Stack’ 以查看导致当前位置的函数调用序列。
控制执行：跳过当前行（step over）、进入函数调用（step into）、跳出当前函数（step out），或恢复执行（resume execution）。

debugger; 关键字

debugger; 语句，当放置在你的 JavaScript 代码中时，作用类似于一个编程方式的断点。

如果浏览器开发者工具处于打开状态，JavaScript 执行将在 debugger; 行暂停。

如果没有活动的调试工具，debugger; 语句不会产生任何效果。

示例：

let x = 15 * 5;
console.log("x before debugger:", x);

debugger; // 执行将在开发者工具打开时暂停在此处

x = x + 10;
console.log("x after debugger:", x);
// document.getElementById("demo").textContent = x; // 示例 DOM 更新

这对于快速暂停执行而无需在 Sources 面板中手动查找特定行非常有用，尤其是在复杂代码或开发过程中。

在主要浏览器中访问开发者工具

打开开发者工具的通用方法是按 F12 键。以下是更具体的方法：

Google Chrome：

按 F12 键（Windows/Linux）或 Cmd+Option+I 键（Mac）。
右键点击页面上的任何元素，然后选择“检查”（Inspect）。
前往 Chrome 菜单（三个竖点）-> 更多工具 -> 开发者工具。

Mozilla Firefox：

按 F12 键（Windows/Linux）或 Cmd+Option+I 键（Mac）。
右键点击页面上的任何元素，然后选择“检查元素”（Inspect Element）。
前往 Firefox 菜单（三条横线）-> 开发者（Web Developer） -> 切换工具（Toggle Tools）（或特定工具，如 Web Console、Debugger）。

Microsoft Edge（基于 Chromium）：

按 F12 键。
右键点击页面上的任何元素，然后选择“检查”（Inspect）。
前往 Edge 菜单（三个水平点）-> 更多工具 -> 开发者工具。

Apple Safari (Mac)：

首先，启用“开发”（Develop）菜单：Safari -> 偏好设置 -> 高级 -> 勾选“在菜单栏中显示‘开发’菜单”。
然后，按 Cmd+Option+I 键或前往“开发”（Develop） -> 显示 Web 检查器（Show Web Inspector）。

打开后，导航到 ‘Console’ 选项卡查看消息，导航到 ‘Sources’（Chrome/Edge）或 ‘Debugger’（Firefox/Safari）选项卡设置断点并逐行执行代码。

你知道吗？

“bug”（错误）这个术语用来指系统中的缺陷可以追溯到 19 世纪 70 年代的托马斯·爱迪生。而“debugging”（调试）这个术语用来修复计算机问题则与格蕾丝·霍珀（Grace Hopper）在 20 世纪 40 年代的一个著名故事有关：一只飞蛾卡在了哈佛 Mark II 计算机的一个继电器中，导致机器故障。他们通过移除这只真正的昆虫来“调试”了系统。

拓展阅读：请查阅你使用的浏览器开发者工具官方文档，了解最新的功能和指南。