Web デバッガで Bun をデバッグ

Bun は WebKit Inspector Protocol を使用します。Bun でコードを実行する際にデバッグを有効にするには、--inspect フラグを使用します。説明のために、次のシンプルな Web サーバーを考えます。

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

このファイルを --inspect フラグで実行してみましょう。

これにより、実行中の Bun プロセスを検査するために使用できる WebSocket サーバーが利用可能なポートで自動的に開始されます。さまざまなデバッグツールがこのサーバーに接続して、インタラクティブなデバッグ体験を提供できます。

Bun は debug.bun.sh で Web ベースのデバッガをホストしています。これは WebKit の Web Inspector Interface の修正バージョンで、Safari ユーザーには馴染みのある見た目です。

bun --inspect server.ts

txt

------------------ Bun Inspector ------------------
Listening at:
  ws://localhost:6499/0tqxs9exrgrm

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

ブラウザで提供された debug.bun.sh URL を開いてデバッグセッションを開始します。このインターフェースから、実行中のファイルのソースコードを表示し、ブレークポイントを表示および設定し、組み込みコンソールでコードを実行できます。

ブレークポイントを設定してみましょう。Sources タブに移動します。以前のコードが表示されているはずです。行番号 3 をクリックして、console.log(req.url) 文にブレークポイントを設定します。

次に、Web ブラウザで http://localhost:3000 にアクセスします。これにより、localhost Web サーバーに HTTP リクエストが送信されます。ページが読み込まれていないように見えます。なぜでしょうか？プログラムが以前に設定したブレークポイントで実行を一時停止しているからです。

UI がどのように変化したかに注目してください。

この時点で、現在の実行環境を検査するために多くのことができます。下部のコンソールを使用して、プログラムのコンテキスト内で任意のコードを実行でき、ブレークポイントでのスコープ内の変数に完全にアクセスできます。

Sources ペインの右側には、現在スコープ内のすべてのローカル変数が表示され、ドリルダウンしてそれらのプロパティとメソッドを確認できます。ここでは、req 変数を検査しています。

Sources ペインの左上には、プログラムの実行を制御できます。

ここに、コントロールフローボタンの機能を説明するチートシートがあります。

Continue script execution（スクリプト実行を継続）— 次のブレークポイントまたは例外までプログラムを実行し続けます。
Step over（ステップオーバー）— プログラムは次の行まで続行します。
Step into（ステップイン）— 現在の文に関数呼び出しが含まれている場合、デバッガは呼び出された関数に「ステップイン」します。
Step out（ステップアウト）— 現在の文が関数呼び出しである場合、デバッガは呼び出しの実行を完了し、呼び出された場所に関数から「ステップアウト」します。