2.3 开发与调试工具

写代码只是开发的一半，另一半是让代码按预期运行——这离不开调试工具。JavaScript 在这方面的优势相当突出：两大运行环境（浏览器和 Node.js）都内建了强大的调试能力，配合现代编辑器，可以快速定位问题、验证想法。对初学者来说，掌握这些工具的使用方法，远比背诵一百个 API 更有实际价值。

2.3.1 浏览器开发者工具：网页调试的瑞士军刀

所有现代浏览器都内建了“开发者工具”（DevTools），通常按 F12 或 Ctrl+Shift+I 打开。下面以 Chrome DevTools 为例，介绍四个用得最多的面板。

控制台（Console）

控制台是最直接与 JavaScript 交互的地方。你可以在这里直接输入表达式、打印变量、查看错误信息。

• 执行任意代码：输入 1 + 2 回车，立刻得到结果。这对于测试一个 API 的返回值、快速验证正则表达式、临时操作 DOM 都非常方便。
• 查看输出：代码里的 console.log()、console.table()、console.error() 都会在这里显示。善用 console.table() 可以更直观地查看数组或对象。
• 过滤信息：右上角过滤栏可以只显示错误、警告或特定类型的日志，避免在大量输出中迷失。
• 清除与保存：console.clear() 或点击左侧的禁止图标可以清屏；右键可以保存控制台日志，方便复盘问题。

源码调试（Sources）

当逻辑复杂、单靠 console.log 无法快速定位问题时，断点调试就派上用场了。

• 打开文件：在 Sources 面板左边的文件树中，可以找到当前页面加载的所有脚本文件，包括外部引入的 JS 文件。
• 设置断点：点击行号即可设置断点。代码运行到该行时会暂停，此时你可以查看所有局部变量、全局变量的值。
• 单步执行：暂停后，可以使用顶部的按钮逐行执行（Step over）、进入函数（Step into）、跳出函数（Step out）。结合变量观察窗口，可以精确跟踪每一步的状态变化。
• 条件断点：右键点击行号，可以设置只有当某个条件为真时才中断，避免在循环中不断触发。
• DOM 断点：在 Elements 面板中右键某个元素，可以设置在“子树修改”“属性修改”“节点移除”时中断，对于追踪 DOM 被意外修改的问题非常有效。

网络面板（Network）

网络面板记录页面加载过程中发出的所有网络请求，是排查请求错误、分析加载速度、定位跨域问题的核心工具。

• 请求详情：点击某个请求，可以查看完整的请求头、响应头、返回内容以及时间线分解（DNS 解析、TCP 连接、等待响应、下载等各阶段耗时）。
• 筛选与搜索：按 XHR/Fetch、JS、CSS、图片等类型过滤；支持按名称、状态码等搜索。
• 模拟网络状况：在下拉框中可以模拟 3G、4G 甚至自定义网速，帮你验证弱网环境下的体验。
• 保留日志：勾选“Preserve log”可以在页面刷新或跳转后保留之前的请求记录，避免丢失关键信息。

性能面板（Performance）

当页面感觉“卡”时，性能面板帮你找到瓶颈。

• 录制性能：点击录制按钮，然后操作页面（滚动、点击等），停止后可以得到一个详细的火焰图。
• 识别长任务：火焰图中黄色或红色的长条代表执行时间较长的主线程任务，这些是造成卡顿的罪魁祸首。
• 查看调用栈：点击某个任务可以展开其详细的函数调用树，找到耗时最长的函数。
• 渲染性能：每一帧如果超过 16.67ms（60fps），就会造成掉帧。面板会标出超时帧，结合重绘、回流情况可以定位渲染层面的问题。

2.3.2 VS Code 开发环境配置与断点调试

VS Code 是当前最主流的 JavaScript/TypeScript 开发编辑器，它通过扩展提供了不输 IDE 的调试体验。

必备环境搭建

• 安装 Node.js：下载安装后，在 VS Code 终端中运行 node -v 确认安装成功。
• 推荐扩展：
• ESLint：实时语法检查和风格修正。
• Prettier：保存时自动格式化代码。
• Live Server：一键启动本地开发服务器，修改代码自动刷新浏览器。
• JavaScript (ES6) code snippets：快速生成常用代码片段。

终端与代码运行

按 Ctrl+（反引号）打开集成终端，可以直接执行 node` 命令加文件名运行脚本。例如：

node app.js

内置调试器

VS Code 内建了 Node.js 调试器，最常见的使用方式是直接对某个 JS 文件启动调试。

• 快速启动调试：打开要调试的 JS 文件，按 F5，选择“Node.js”环境，就会以调试模式运行该文件。
• 设置断点：点击行号左侧设置红色断点，按 F5 运行，程序会在断点处暂停。
• 调试工具栏：暂停后屏幕上方出现调试工具栏，提供继续（F5）、单步跳过（F10）、单步进入（F11）、单步跳出（Shift+F11）、重启（Ctrl+Shift+F5）、停止（Shift+F5）等控制。
• 变量查看：左侧调试面板可以查看局部变量、全局变量、监视表达式的值。将鼠标悬停在代码中的变量上也会显示当前值。
• 调试控制台：在调试过程中，可以在“调试控制台”中输入表达式并立刻求值，用于临时检测某个变量的属性或运行一段判断代码。

浏览器代码的调试

对于前端代码（HTML+JS），有两种主流的本地调试方式：

1. Live Server 扩展：右键 HTML 文件选择“Open with Live Server”，浏览器打开页面后，在 VS Code 中设置断点，或者在浏览器 DevTools 的 Sources 面板中设置。如果需要在 VS Code 中直接调试浏览器代码，需要安装 Debugger for Chrome 或 Edge 扩展，并配置 launch.json 文件，实现从编辑器发起启动浏览器并附加调试器。

1. 浏览器 DevTools + Workspace：在 Sources 面板的“Filesystem”中添加本地项目文件夹，获得编辑权限，可以直接在 DevTools 中修改代码并保存到磁盘。这种方式维护了浏览器内调试的便捷性，同时又可以持久化修改。

2.3.3 真实场景中的调试思路

工具再好也只是帮手，养成正确的调试习惯更重要：

• 先复现再调试：确保问题可以稳定重现，这是调试的前提。
• 控制变量，缩小范围：通过 console.log 或临时注释代码，快速定位出问题的代码段落。不要一上来就设置一堆断点。
• 读懂错误信息：红色错误提示往往直接告诉你问题在哪行、是什么类型的错误。先看报错，再结合代码推断原因。
• 善用条件断点和 Watch：在循环或频繁调用的地方，条件断点可以让你只在需要的时候停下来；Watch 表达式可以持续跟踪复杂表达式的值变化。
• 保持耐心：调试是开发技能中占比最大的一部分之一，随着经验积累，你会形成自己的排查直觉。

下一节，我们将通过编写第一个 JavaScript 程序，把学到的运行环境和工具实际串联起来，真正跑起来。