【Bun中文文档-Runtime】Debugger

601 阅读2分钟

Bun 支持WebKit Inspector Protocol,因此您可以使用交互式调试器来调试您的代码。为了演示,考虑以下简单的 Web 服务器示例。

Bun.serve({
  fetch(req){
    console.log(req.url);
    return new Response("Hello, world!");
  }
})

--inspect

要在使用 Bun 运行代码时启用调试,请使用--inspect标志。这会自动在可用端口上启动 WebSocket 服务器,用于检查运行中的 Bun 进程。

$ bun --inspect server.ts
------------------ Bun Inspector ------------------
Listening at:
  ws://localhost:6499/0tqxs9exrgrm

Inspect in browser:
  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------

--inspect-brk

--inspect-brk标志的行为与--inspect相同,但它会在执行的脚本的第一行自动注入断点。这对于快速运行并立即退出的脚本进行调试非常有用。

--inspect-wait

--inspect-wait标志的行为与--inspect相同,但在附加调试器到运行中的进程之前,代码不会执行。

设置调试器的端口或 URL

无论使用哪个标志,您都可以选择指定端口号、URL 前缀或两者。

$ bun --inspect=4000 server.ts
$ bun --inspect=localhost:4000 server.ts
$ bun --inspect=localhost:4000/prefix server.ts

调试器

各种调试工具可以连接到此服务器,以提供交互式调试体验。

debug.bun.sh

Bun 在debug.bun.sh上托管了一个基于 Web 的调试器。这是对 Safari 用户熟悉的 WebKit 的Web Inspector Interface的修改版本。

在浏览器中打开提供的debug.bun.sh URL 以开始调试会话。从这个界面,您可以查看正在运行的文件的源代码,查看和设置断点,并使用内置控制台执行代码。

图片转存失败,建议将图片保存下来直接上传

让我们设置一个断点。转到"Sources"选项卡;您应该看到之前的代码。单击行号3,以在我们的console.log(req.url)语句上设置断点。

图片转存失败,建议将图片保存下来直接上传

然后在您的 Web 浏览器中访问http://localhost:3000。这将发送一个 HTTP 请求到我们的localhost Web 服务器。似乎页面不加载。为什么?因为程序已经在我们之前设置的断点处暂停执行。

请注意界面如何改变。

图片转存失败,建议将图片保存下来直接上传

在这一点上,我们可以执行许多操作来检查当前的执行环境。我们可以在底部的控制台中运行任意代码,具有对我们断点处的作用域中的变量的完全访问权限。

在"Sources"窗格的右侧,我们可以看到当前作用域中的所有本地变量,并深入查看它们的属性和方法。在这里,我们正在检查req变量。

在"Sources"窗格的左上角,我们可以控制程序的执行。

这是一个速查表,解释了控制流按钮的功能。

  • 继续脚本执行 — 继续运行程序,直到下一个断点或异常。
  • 跳过 — 程序将继续到下一行。
  • 跳入 — 如果当前语句包含函数调用,调试器将"跳入"所调用的函数。
  • 跳出 — 如果当前语句是函数调用,调试器将完成执行调用,然后"跳出"函数,返回到调用它的位置。