Bun

除錯器

Bun 使用 WebKit 檢查器通訊協定,因此您可以使用互動式除錯器除錯您的程式碼。為了示範,請考慮以下簡單的網路伺服器。

server.ts
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://127.0.0.1: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

不論使用哪個 flag,您都可以選擇性地指定埠號、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,以開始除錯階段。從這個介面,您將能夠檢視正在執行的檔案的原始程式碼、檢視和設定中斷點,以及使用內建主控台執行程式碼。

Screenshot of Bun debugger, Console tab

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

screenshot of Bun debugger

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

請注意 UI 如何改變。

screenshot of Bun debugger

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

在「來源」窗格的右側,我們可以看到目前作用範圍內的所有局部變數,並深入檢視其屬性和方法。在此,我們正在檢查 req 變數。

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

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

  • 繼續執行腳本 — 繼續執行程式,直到下一個中斷點或例外。
  • 跨步執行 — 程式將繼續執行到下一行。
  • 逐步執行 — 如果目前的陳述式包含一個函式呼叫,除錯器將「逐步執行」被呼叫的函式。
  • 跳出 — 如果目前的陳述式是一個函式呼叫,除錯器將完成執行呼叫,然後「跳出」函式,到呼叫它的位置。