使用网页调试器调试 Bun - Bun 中文文档

Bun 支持 WebKit Inspector Protocol。要在使用 Bun 运行代码时启用调试，请使用 --inspect 标志。请考虑以下 Web 服务器。

server.ts

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

使用 --inspect 标志运行该文件。这将在一个可用端口上启动 WebSocket 服务器。调试工具会连接到此服务器，以检查正在运行的 Bun 进程。 Bun 在 debug.bun.sh 托管了一个基于网页的调试器。它是 WebKit 的 Web Inspector Interface 的修改版本，对于 Safari 用户来说会很熟悉。

terminal

bun --inspect server.ts

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

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

Bun 调试器控制台标签页截图

接下来，设置一个断点。打开 Sources 标签页，其中会显示之前的代码，然后点击行号 3，在 console.log(req.url) 语句上设置断点。

Bun 调试器截图

然后在浏览器中访问 http://localhost:3000，向服务器发送 HTTP 请求。页面会卡住，因为程序已在你设置的断点处暂停。注意界面已发生变化。

Bun 调试器截图

使用底部的控制台，在程序上下文中运行任意代码，并且可以完整访问断点处作用域内的变量。

Bun 调试器控制台

Sources 面板右侧会列出当前作用域内的局部变量；展开变量即可查看其属性和方法。截图中显示了 req 变量。

Bun 调试器变量面板

Sources 面板左上方的按钮用于控制程序的执行。

Bun 调试器控制按钮

以下是每个控制流按钮的功能。

继续执行脚本 — 运行程序，直到遇到下一个断点或异常。
单步跳过 — 继续执行到下一行。
单步进入 — 如果当前语句包含函数调用，则进入被调用的函数。
单步跳出 — 如果当前语句是函数调用，则执行完该调用，然后从函数中跳出，回到调用它的位置。

调试器控制按钮功能速查表