ES6 - 调试

ES6 - JavaScript 调试

错误，或者说“bug”，是编程中不可避免的一部分。调试（Debugging）就是查找和修复这些错误的过程。现代 JavaScript 开发提供了强大的工具和技术，使这个过程更加高效。

1. 浏览器开发者工具

所有现代网络浏览器（Chrome, Firefox, Edge, Safari）都内置了开发者工具（Developer Tools），这对于调试客户端 JavaScript 至关重要。通常可以通过按 F12 或右键点击网页并选择“检查”（Inspect）或“检查元素”（Inspect Element）来打开它们。

开发者工具的主要调试功能：

• 控制台（Console）：查看脚本日志信息（使用 console.log()、console.error() 等），检查对象，以及交互式地执行 JavaScript 表达式。
• 源代码（Sources）/调试器（Debugger）面板：查看源代码，设置断点（breakpoints）以在特定行暂停执行，逐行单步执行代码（step over, step in, step out），检查变量值，以及查看调用堆栈（call stack）。
• 网络（Network）面板：检查网络请求和响应。
• 应用（Application）/存储（Storage）面板：检查 cookies、本地存储（local storage）、会话存储（session storage）等。

使用 Console API

console 对象提供了几种记录信息的方法：

• console.log()：通用日志输出。
• console.info()：提示性日志输出。
• console.warn()：输出警告信息。
• console.error()：输出错误信息。
• console.table()：将表格数据显示为表格。
• console.group() / console.groupEnd()：对相关日志消息进行分组。
• console.assert(assertion, message)：如果断言（assertion）为假，则输出消息。

function greet(name) {
  console.log(`Preparing to greet ${name}`);
  if (!name) {
    console.warn('Name is not provided!');
    return;
  }
  console.log(`Hello, ${name}!`);
}
greet('World');
greet();

设置断点和单步执行代码

在浏览器开发者工具的源代码/调试器面板中：

• 设置断点：点击希望程序执行暂停的行号。
• 跳过（Step Over）：执行当前行，并移动到当前函数中的下一行。如果当前行是函数调用，则执行整个函数而不进入该函数。
• 步入（Step Into）：如果当前行是函数调用，则进入该函数并在其第一行暂停。
• 步出（Step Out）：继续执行直到当前函数返回，然后暂停。
• 监视表达式（Watch Expressions）：添加变量或表达式以在单步执行代码时监视它们的值。
• 调用堆栈（Call Stack）：显示导致当前执行点的函数调用序列。

debugger; 语句

也可以通过在 JavaScript 代码中添加 debugger; 语句来编程方式地触发断点。如果开发者工具是打开的，程序执行将在该语句处暂停。

function calculateSum(a, b) {
  let result = a + b;
  debugger; // 如果开发者工具打开，执行将在此处暂停
  console.log(`The sum is ${result}`);
  return result;
}
calculateSum(5, 10);

2. 代码检查工具（Linters）和静态分析（ESLint）

ESLint 等代码检查工具（Linters）在不实际运行代码的情况下分析您的代码，查找潜在错误、风格问题和不良实践。这被称为静态分析（static analysis）。将 ESLint 集成到您的开发工作流程中（通常通过代码编辑器扩展）有助于及早捕获错误。

ESLint 的主要优势：

• 查找语法错误和运行时错误。
• 强制执行代码风格一致性。
• 识别有问题（如未使用的变量）的代码模式。
• 可通过插件和共享配置高度定制。

通常，您将 ESLint 作为开发依赖项安装到项目中：npm install eslint --save-dev 或 yarn add eslint --dev。更多信息：eslint.org。

3. 调试 Node.js 应用

Node.js 内置了调试器。您可以使用 inspect 标志启动它：

node --inspect my_script.js

node --inspect-brk my_script.js

这会启动一个调试服务器，您可以使用 Chrome 开发者工具（在 Chrome 中打开 chrome://inspect）或 VS Code 调试器等工具连接到它。

使用 VS Code 调试

VS Code 对 Node.js 提供了出色的内置调试支持。您可以创建启动配置（launch.json 文件）以便轻松启动调试会话、设置断点、检查变量以及直接在编辑器中单步执行代码。

有关详细指南，请参阅 VS Code 调试文档。

通用调试技巧

• 理解错误：仔细阅读错误消息。它们通常提供了关于错误行号和类型的线索。
• 重现 Bug：持续重现 bug，以便理解它发生的条件。
• 隔离问题：简化代码或注释掉某些部分，以精确定位 bug 所在（“分而治之”法）。
• 编写可测试的代码：模块化代码（例如，职责清晰的小函数）更容易测试和调试。
• 使用版本控制：如果某个更改引入了 bug，Git 允许您恢复到之前正常工作的状态。
• 橡皮鸭调试：逐行向他人（或甚至是一个无生命的物体，如橡皮鸭）解释您的代码。这个过程常常能帮助您自己发现错误。