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://:6499/0tqxs9exrgrm
Inspect in browser:
https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------在瀏覽器中開啟提供的 debug.bun.sh URL 以開始除錯會話。透過此介面,您將能夠檢視正在執行的檔案的原始碼、檢視和設定斷點,以及使用內建控制檯執行程式碼。
讓我們設定一個斷點。導航到“源”選項卡;您應該會看到之前的程式碼。單擊行號 3 以在我們的 console.log(req.url) 語句上設定斷點。
然後訪問您的 Web 瀏覽器中的 https://:3000。這將向我們的 localhost Web 伺服器傳送 HTTP 請求。頁面似乎沒有載入。為什麼?因為程式已在我們之前設定的斷點處暫停執行。
請注意 UI 如何變化。
此時,我們可以做很多事情來內省當前的執行環境。我們可以使用底部的控制檯在程式的上下文中執行任意程式碼,完全訪問斷點範圍內變數。
在“源”窗格的右側,我們可以看到所有當前作用域內的區域性變數,並深入檢視它們的屬性和方法。在這裡,我們正在檢查 req 變數。
在“源”窗格的左上方,我們可以控制程式的執行。
這是解釋控制流按鈕功能的備忘單。
- 繼續指令碼執行 — 繼續執行程式,直到遇到下一個斷點或異常。
- 跳過 — 程式將繼續執行下一行。
- 步入 — 如果當前語句包含函式呼叫,偵錯程式將“步入”被呼叫的函式。
- 步出 — 如果當前語句是函式呼叫,偵錯程式將完成執行該呼叫,然後從函式中“步出”到其被呼叫的位置。
