使用 Web 调试器调试 Bun

Bun 支持 WebKit 检查协议。要在使用 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 托管一个基于 Web 的调试器。它是 WebKit 的 Web 检查器界面 的修改版本，这对 Safari 用户来说应该很熟悉。

terminal

bun --inspect server.ts

------------------ Bun Inspector ------------------
Listening at:
  ws://localhost:6499/0tqxs9exrgrm

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

---

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

---

让我们设置一个断点。导航到源代码标签页；您应该看到前面的代码。单击第 3 行行号以在我们的 console.log(req.url) 语句上设置断点。

---

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

注意 UI 如何改变。

---

此时，我们可以做很多事情来检查当前的执行环境。我们可以使用底部的控制台在程序上下文中运行任意代码，完全访问我们在断点处作用域中的变量。

---

在源代码窗格的右侧，我们可以看到当前作用域内的所有局部变量，并深入查看它们的属性和方法。在这里，我们正在检查 req 变量。

---

在源代码窗格的左上方，我们可以控制程序的执行。

---

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

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