使用網頁偵錯程式除錯 Bun

Bun 支援 WebKit Inspector Protocol。要在使用 Bun 執行程式碼時啟用除錯，請使用 --inspect 標誌。請考慮以下 Web 伺服器。

server.ts

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

使用 --inspect 標誌執行該檔案。

這會在埠 6499 上啟動一個 WebSocket 伺服器（傳遞 --inspect=<port> 可使用其他埠）。除錯工具會連線到此伺服器，以檢查正在執行的 Bun 行程。

Bun 提供了一個基於網頁的偵錯程式，網址為 debug.bun.sh。它是 WebKit 的 Web Inspector Interface 的修改版本，Safari 使用者會對其感到熟悉。

terminal

bun --inspect server.ts

Text

--------------------- Bun Inspector ---------------------
Listening:
  ws://localhost:6499/204e4940-4a8b-4ebc-8fee-1c66926bbc21
Inspect in browser:
  https://debug.bun.sh/#localhost:6499/204e4940-4a8b-4ebc-8fee-1c66926bbc21
--------------------- Bun Inspector ---------------------

在瀏覽器中開啟提供的 debug.bun.sh URL，以開始除錯會話。在此介面中，你可以檢視正在執行的檔案的原始碼、檢視和設定斷點，並使用內建控制台執行程式碼。

接下來，設定一個斷點。開啟 Sources 標籤頁，其中會顯示之前的程式碼，然後點選行號 3，在 console.log(req.url) 語句上設定斷點。

然後在瀏覽器中訪問 http://localhost:3000，向伺服器傳送 HTTP 請求。頁面會卡住，因為程式已在你設定的斷點處暫停。

注意介面已發生變化。

使用底部的控制台，在程式上下文中執行任意程式碼，並且可以完整訪問斷點處作用域內的變數。

Sources 面板右側會列出當前作用域內的區域性變數；展開變數即可檢視其屬性和方法。截圖中顯示了 req 變數。

Sources 面板左上方的按鈕用於控制程式的執行。

以下是每個控制流按鈕的功能。

繼續執行指令碼 — 執行程式，直到遇到下一個斷點或異常
單步跳過 — 繼續執行到下一行
單步進入 — 如果當前語句包含函式呼叫，則進入被呼叫的函式
單步跳出 — 如果當前語句是函式呼叫，則執行完該呼叫，然後從函式中跳出，回到呼叫它的位置