Skip to main content
Bun 支持 WebKit Inspector Protocol 协议。要在使用 Bun 运行代码时启用调试，请使用 --inspect 标志。为了演示，考虑以下简单的 web 服务器示例。
https://mintcdn.com/ikxin/RzFFGbzo0-4huILA/icons/typescript.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=a3dffd2241f05776d3bd25171d0c5a79server.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 at:
  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。这会向我们的 localhost Web 服务器发送 HTTP 请求。页面看似没有加载，为什么呢？因为程序已在我们之前设置的断点处暂停执行。 注意界面已发生变化。
Bun 调试器截图
此时我们可以做很多事情来检查当前执行环境。我们可以使用底部的控制台，在程序上下文中运行任意代码，可以完整访问断点处作用域内的变量。
Bun 调试器控制台
在 Sources 面板的右侧，我们可以看到当前作用域内所有本地变量，并深入查看它们的属性和方法。这里，我们正在检查 req 变量。
Bun 调试器变量面板
在 Sources 面板的左上方，我们可以控制程序的执行。
Bun 调试器控制按钮
这是控制流按钮功能的速查表。
  • 继续执行脚本 — 继续运行程序直到下一个断点或异常。
  • 单步跳过 — 程序将继续执行下一行代码。
  • 单步进入 — 如果当前语句包含函数调用，调试器将“单步进入”该函数。
  • 单步跳出 — 如果当前语句是函数调用，调试器将执行完该调用，然后“单步跳出”到函数被调用的位置。
调试器控制按钮功能速查表