Bun 使用 WebKit Inspector 协议,因此你可以使用交互式调试器调试你的代码。为了演示,请考虑以下简单的 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 的调试器。它是 WebKit 的 Web Inspector Interface 的修改版本,Safari 用户会觉得很熟悉。
在浏览器中打开提供的 debug.bun.sh
URL 以启动调试会话。通过此界面,你将能够查看正在运行的文件的源代码、查看和设置断点,以及使用内置控制台执行代码。
让我们设置一个断点。导航到“Sources”选项卡;你应该看到前面的代码。单击行号 3
以在我们的 console.log(req.url)
语句上设置断点。
然后在你的 Web 浏览器中访问 http://localhost:3000
。这会向我们的 localhost
Web 服务器发送一个 HTTP 请求。页面似乎没有加载。为什么?因为程序已在我们在前面设置的断点处暂停执行。
注意 UI 如何发生变化。
此时,我们可以做很多事情来内省当前执行环境。我们可以使用底部的控制台在程序上下文中运行任意代码,并完全访问断点处的变量。
在“源”窗格的右侧,我们可以看到当前作用域中的所有局部变量,并深入了解它们的属性和方法。在此,我们正在检查req
变量。
在“源”窗格的左上角,我们可以控制程序的执行。
以下是一个解释控制流按钮功能的备忘单。
- 继续执行脚本 — 继续运行程序,直到下一个断点或异常。
- 单步执行 — 程序将继续执行到下一行。
- 单步进入 — 如果当前语句包含函数调用,调试器将“单步进入”被调用的函数。
- 单步退出 — 如果当前语句是函数调用,调试器将完成执行该调用,然后“单步退出”该函数到调用它的位置。