bun-debug について
bun-debug は、Bun のスクリプトやテストを対話的にデバッグするスキルです。Inspector オプションで起動し、デバッガーの接続方法も案内します。
主な機能
- 01Bun Inspector の起動
- 02先頭行での一時停止
- 03デバッガー接続の待機
- 04Bun テストのデバッグ
- 05Inspector ポートの指定
活用シーン
- 01Bun スクリプトのステップ実行
- 02すぐ終了するスクリプトの調査
- 03パターンを指定した Bun テストのデバッグ
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ laurigates/ claude-plugins --skill bun-debugインストール後、Claude Code で/bun-debugを入力して読み込まれたか確認します。
詳細
/bun:debug
Bun のデバッガーを有効にしてスクリプトを起動し、対話形式でデバッグします。
このスキルを使用するタイミング
| 次の場合はこのスキルを使用します... | 次の場合は typescript-debugging を使用します... |
|---|---|
--inspect を使って Bun スクリプトに対話型デバッガーをアタッチするとき | TypeScript のコンパイルエラーや型の不一致を診断するとき |
すぐに終了するスクリプトの最初の行で中断するとき(--inspect-brk) | Bun 以外のランタイム向けに VSCode の起動構成を設定するとき |
bun --inspect-brk test で Bun のテストをデバッグするとき | テストをステップ実行するのではなく、単に実行したい場合は bun-test を使用します |
| 実行前にデバッガーのアタッチを待機するとき | ビルド時エラーを再現する場合は bun-build を使用します |
パラメーター
file(必須):デバッグするスクリプトファイル--brk:最初の行で中断します(すぐに終了するスクリプト向け)--wait:実行前にデバッガーのアタッチを待機します--port=<port>:特定のポートを使用します(デフォルト:自動割り当て)
実行
標準のデバッグ(デバッグ URL を開きます):
bun --inspect $FILE
最初の行で中断:
bun --inspect-brk $FILE
デバッガーのアタッチを待機:
bun --inspect-wait $FILE
カスタムポート:
bun --inspect=$PORT $FILE
テストをデバッグ:
bun --inspect-brk test $PATTERN
出力
コマンドはデバッグ URL を出力します:
------------------- Bun Inspector -------------------
Listening: ws://localhost:6499/
Open: debug.bun.sh/#localhost:6499
-----------------------------------------------------
起動後
- デバッグ URL をユーザーに伝えます
- 接続方法を説明します:
- ブラウザーで
debug.bun.sh/#localhost:<port>を開きます - または、Bun 拡張機能を使用した VSCode で WebSocket URL にアタッチします
- ブラウザーで
- ブレークポイントの操作(F8 で続行、F10 でステップオーバー、F11 でステップイン)について案内します
VSCode との連携
VSCode でデバッグするには、.vscode/launch.json に次の設定を追加するよう提案します:
{
"type": "bun",
"request": "launch",
"name": "Debug",
"program": "${file}",
"stopOnEntry": true
}
コメント
Markdown 対応