Bun

指南執行時

使用 Web 偵錯程式除錯 Bun

Bun 支援 WebKit Inspector Protocol。要在使用 Bun 執行程式碼時啟用除錯,請使用 --inspect 標誌。為了演示目的,請考慮以下簡單的 Web 伺服器。

server.ts
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://:6499/0tqxs9exrgrm

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

在瀏覽器中開啟提供的 debug.bun.sh URL 以開始除錯會話。透過此介面,您將能夠檢視正在執行的檔案的原始碼、檢視和設定斷點,以及使用內建控制檯執行程式碼。

Screenshot of Bun debugger, Console tab

讓我們設定一個斷點。導航到“源”選項卡;您應該會看到之前的程式碼。單擊行號 3 以在我們的 console.log(req.url) 語句上設定斷點。

screenshot of Bun debugger

然後訪問您的 Web 瀏覽器中的 https://:3000。這將向我們的 localhost Web 伺服器傳送 HTTP 請求。頁面似乎沒有載入。為什麼?因為程式已在我們之前設定的斷點處暫停執行。

請注意 UI 如何變化。

screenshot of Bun debugger

此時,我們可以做很多事情來內省當前的執行環境。我們可以使用底部的控制檯在程式的上下文中執行任意程式碼,完全訪問斷點範圍內變數。

在“源”窗格的右側,我們可以看到所有當前作用域內的區域性變數,並深入檢視它們的屬性和方法。在這裡,我們正在檢查 req 變數。

在“源”窗格的左上方,我們可以控制程式的執行。

這是解釋控制流按鈕功能的備忘單。

  • 繼續指令碼執行 — 繼續執行程式,直到遇到下一個斷點或異常。
  • 跳過 — 程式將繼續執行下一行。
  • 步入 — 如果當前語句包含函式呼叫,偵錯程式將“步入”被呼叫的函式。
  • 步出 — 如果當前語句是函式呼叫,偵錯程式將完成執行該呼叫,然後從函式中“步出”到其被呼叫的位置。