Bun 支持 WebKit Inspector Protocol。要在使用 Bun 運行代碼時啟用調試，請使用 --inspect 標志。為了演示目的，請考慮以下簡單的 Web 服務器。

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

---

讓我們使用 --inspect 標志運行此文件。

這會自動在可用端口上啟動 WebSocket 服務器，該服務器可用於檢查正在運行的 Bun 進程。各種調試工具可以連接到此服務器以提供交互式調試體驗。

Bun 在 debug.bun.sh 提供基於 Web 的調試器。它是 WebKit 的 Web Inspector Interface 的修改版本，Safari 用戶會對此感到熟悉。

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 以開始調試會話。從此界面，你可以查看運行文件的源代碼、查看和設置斷點，並使用內置控制台執行代碼。

---

讓我們設置一個斷點。導航到 Sources 選項卡；你應該會看到前面的代碼。點擊行號 3 在我們的 console.log(req.url) 語句上設置斷點。

---

然後在 Web 瀏覽器中訪問 http://localhost:3000。這將向我們的 localhost Web 服務器發送 HTTP 請求。頁面似乎沒有加載。為什麼？因為程序在我們之前設置的斷點處暫停了執行。

注意 UI 是如何變化的。

---

此時，我們可以做很多事情來檢查當前的執行環境。我們可以使用底部的控制台在程序的上下文中運行任意代碼，完全訪問斷點處作用域內的變量。

---

在 Sources 窗格的右側，我們可以看到當前作用域內的所有局部變量，並深入查看它們的屬性和方法。這裡，我們正在檢查 req 變量。

---

在 Sources 窗格的左上角，我們可以控制程序的執行。

---

以下是解釋控制流按鈕功能的速查表。

• 繼續腳本執行 — 繼續運行程序直到下一個斷點或異常。
• 單步跳過 — 程序將繼續到下一行。
• 單步進入 — 如果當前語句包含函數調用，調試器將"進入"被調用的函數。
• 單步跳出 — 如果當前語句是函數調用，調試器將完成該調用的執行，然後從函數"跳出"到調用它的位置。