在前端开发中，调试是确保代码质量和功能正确性的关键步骤。Bun 是一个现代的 JavaScript 和 TypeScript 运行时环境，它提供了丰富的工具和功能来帮助开发者更高效地进行调试。本章将详细介绍如何使用 Bun 的各种调试技巧。
设置断点
在使用 Bun 进行开发时，设置断点是调试过程中最常见的操作之一。Bun 提供了多种方式来设置断点，使得开发者可以在代码执行到特定位置时暂停，以便观察变量状态、调用栈等信息。
使用 IDE
大多数现代的集成开发环境（IDE），如 VSCode 或 WebStorm，都支持在源代码中直接设置断点。只需在代码行号左侧点击即可添加或移除断点。当程序运行到带有断点的代码行时，IDE 会自动暂停，并展示相关的调试信息。
使用命令行工具
除了通过 IDE 调试，Bun 也提供了一个命令行工具来设置断点。你可以通过 bun debug 命令启动一个带有调试器的进程，然后在需要的地方手动插入断点。这种方式适用于那些没有图形界面或者希望使用命令行进行开发的场景。
bun debug your-script.js
在代码中，可以使用 debugger; 语句来手动插入断点。当你运行上述命令时，如果程序执行到了这个语句，就会自动暂停。
观察变量
一旦程序在某个断点处暂停，你可以利用各种方法来观察当前作用域内的变量值，这对于理解代码执行流程和状态非常有帮助。
查看局部变量
在大多数 IDE 中，你可以直接查看当前作用域内的所有局部变量及其值。此外，一些 IDE 还允许你查看父级作用域中的变量，这在处理嵌套函数或闭包时特别有用。
监视表达式
除了查看现有变量外，你还可以监视任意表达式的值。这样即使该表达式没有被直接赋值给一个变量，你也可以跟踪它的变化情况。在 IDE 中，通常可以通过右键菜单或类似的用户界面元素来添加监视项。
单步执行
单步执行功能让你能够控制程序的执行流程，一次只执行一行代码。这对于逐步检查每一步的执行效果特别有用。
步进（Step Over）
步进意味着执行当前行代码并移动到下一行，但不进入任何函数调用内部。如果你对当前函数内部的实现细节不感兴趣，可以选择步进。
单步进入（Step Into）
与步进不同，单步进入会在遇到函数调用时进入函数内部继续执行。这对于想要查看函数内部逻辑的情况非常有用。
单步跳出（Step Out）
单步跳出则是从当前函数内部跳出，直接执行到该函数调用的下一行。当你在一个复杂函数内部且希望快速返回到调用者时，这个选项非常实用。
调用栈查看
调用栈显示了从程序开始到当前暂停点的所有函数调用路径。通过查看调用栈，你可以清楚地了解当前执行环境是如何形成的，以及各个函数之间的关系。
在 IDE 中查看
在绝大多数现代 IDE 中，都可以轻松查看当前的调用栈。通常情况下，这些信息会以树形结构展示，其中根节点是你程序的入口点，而叶子节点则是最近执行的函数。
使用命令行工具
如果你更喜欢使用命令行工具进行调试，Bun 的调试模式同样支持查看调用栈。当程序暂停时，可以通过特定命令或输出信息来获取当前的调用栈详情。
总结与实践
通过上述介绍，你应该已经掌握了如何使用 Bun 进行基本的调试工作。实际操作中，根据具体项目需求和个人偏好选择合适的调试工具和方法是非常重要的。希望这些技巧能帮助你在日常开发中更加高效地定位和解决问题。
接下来，我们将深入探讨 Bun 在构建高性能 Web 应用中的应用。