使用網頁除錯器除錯 Bun

在 GitHub 上編輯

Bun 使用 WebKit Inspector Protocol。若要啟用在 Bun 中執行程式碼時的除錯功能，請使用 --inspect 旗標。為了示範，請考慮以下簡單的網頁伺服器。

server.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 使用者會覺得很熟悉。

bun --inspect server.ts
------------------ Bun Inspector ------------------
Listening at:
  ws://127.0.0.1:6499/0tqxs9exrgrm

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

在瀏覽器中開啟提供的 debug.bun.sh URL，以開始除錯工作階段。從此介面，您將能夠檢視正在執行的檔案的原始碼、檢視和設定中斷點，以及使用內建主控台執行程式碼。

讓我們設定中斷點。導覽至「來源」標籤；您應該會看到先前的程式碼。按一下行號 3，以在我們的 console.log(req.url) 陳述式上設定中斷點。

然後在您的網頁瀏覽器中瀏覽 https://127.0.0.1:3000。這會將 HTTP 要求傳送至我們的 localhost 網頁伺服器。這看起來好像頁面沒有載入。為什麼？因為程式已在我們先前設定的中斷點暫停執行。

請注意使用者介面已如何變更。

在這個時候，我們可以做很多事情來內省目前的執行環境。我們可以使用底部的主控台，在程式的脈絡中執行任意程式碼，並完全存取中斷點範圍內的變數。

在「來源」窗格的右側，我們可以看到目前範圍內的所有區域變數，並深入了解其屬性和方法。在此，我們正在檢查 req 變數。

在「來源」窗格的左上方，我們可以控制程式的執行。

以下是一個說明控制流程按鈕功能的秘笈。

繼續執行指令碼 — 繼續執行程式，直到下一個中斷點或例外。
跨步執行 — 程式會繼續執行到下一行。
進入 — 如果目前的陳述包含函式呼叫，除錯器將會「進入」被呼叫的函式。
離開 — 如果目前的陳述是函式呼叫，除錯器將會完成執行呼叫，然後「離開」函式到呼叫函式的所在位置。