断点

一旦执行到达某个点，断点就会暂停程序。然后，你可以逐行浏览程序，观察其执行情况并检查变量的内容。

有三种创建断点的方法。

1. 从代码中，使用 debugger; 语句。
2. 从浏览器中，使用开发人员工具。
3. 来自集成开发环境（IDE）。

调试器声明

你可以在 JavaScript 代码中的任何位置放置 debugger; 语句。一旦 JS 解释器到达该行，它将停止脚本执行，允许你检查变量并逐步执行代码。

开发者工具

第二个选项是直接在浏览器的开发人员工具的代码中添加断点。

打开开发人员工具

Chrome 或 Firefox

1. 按下 F12 打开开发人员工具
2. 切换到源选项卡（Chrome）或调试器选项卡（Firefox）
3. 按 Ctrl + P 并键入 JavaScript 文件的名称
4. 按下 Enter 打开它。

Internet Explorer 或 Edge

1. 按下 F12 打开开发人员工具
2. 切换到 Debugger 选项卡。
3. 使用窗口左上角附近的文件夹图标打开文件选择窗格; 你可以在那里找到你的 JavaScript 文件。

苹果浏览器

1. 按 Command + Option + C 打开开发人员工具
2. 切换到资源选项卡
3. 打开左侧面板中的 Scripts 文件夹
4. 选择你的 JavaScript 文件。

从 Developer Tools 添加断点

在开发人员工具中打开 JavaScript 文件后，可以单击行号以放置断点。下次程序运行时，它会暂停。

关于缩小源的注意事项： 如果缩小了源，则可以将其打印出来（转换为可读格式）。在 Chrome 中，点击源代码查看器右下角的 {} 按钮即可完成此操作。

集成开发环境

Visual Studio 代码（VSC）

VSC 内置支持调试 JavaScript。

1. 单击左侧的 Debug 按钮或 Ctrl + Shift + D
2. 如果尚未完成，请按齿轮图标创建启动配置文件（launch.json）。
3. 按绿色播放按钮或点击，从 VSC 运行代码 F5。

在 VSC 中添加断点

单击 JavaScript 源文件中行号旁边的以添加断点（它将标记为红色）。要删除断点，请再次单击红色圆圈。

提示： 你还可以在浏览器的开发工具中使用条件断点。这些有助于省略执行中不必要的中断。示例场景：你希望在 第 5 次 迭代时检查循环中的变量。