ブレークポイント

ブレークポイントによるデバッグ

Wrangler 3.9.0以降、ワーカー内でブレークポイントを使用してデバッグできます。ブレークポイントは、ワーカーの実行中の特定のポイントで何が起こっているかを確認する機能を提供します。ブレークポイント機能は、DevToolsとVS Codeの両方に存在します。

ChromeのDevToolsを使用したブレークポイントデバッグに関する詳細は、Chromeのブレークポイントに関する記事 ↗を参照してください。

VS Codeをブレークポイント用に設定する

ワーカープロジェクトでブレークポイントデバッグを行うためにVS Codeを設定するには：

1. プロジェクトのルートフォルダーに.vscodeフォルダーを作成します（存在しない場合）。
2. そのフォルダー内に、以下の内容を持つlaunch.jsonファイルを作成します：

{
  "configurations": [
    {
      "name": "Wrangler",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "cwd": "/",
      "resolveSourceMapLocations": null,
      "attachExistingChildren": false,
      "autoAttachChildProcesses": false,
      "sourceMaps": true // この行があってもなくても動作します
    }
  ]
}

3. VS Codeでプロジェクトを開き、VS Codeから新しいターミナルウィンドウを開き、npx wrangler devを実行してローカル開発サーバーを起動します。

4. Run & Debugパネルの上部に、構成を選択するオプションが表示されるはずです。Wranglerを選択し、再生アイコンを選択します。**Wrangler: Remote Process [0]**が左側のコールスタックパネルに表示されるはずです。

5. プロジェクト内の.jsまたは.tsファイルに戻り、少なくとも1つのブレークポイントを追加します。

6. ブラウザを開き、ワーカーのローカルURL（デフォルトはhttp://127.0.0.1:8787）にアクセスします。ブレークポイントがヒットし、指定された行のコードに関する詳細を確認できるはずです。

注意

--remoteを使用したwrangler devでのブレークポイントデバッグは、ワーカーのCPU時間を延長し、使用制限に対してカウントされる実際のリソースに対してテストしているため、追加のコストが発生する可能性があります。--remoteオプションなしでwrangler devを使用することをお勧めします。これにより、ローカルでの開発が保証されます。

ノート

.vscode/launch.jsonファイルは、単一のワークスペースにのみ適用されます。必要に応じて、上記の起動構成をユーザー設定に追加することができます（公式VS Codeドキュメント ↗に従って）すべてのワークスペースで利用できるようにします。

関連リソース

• ローカル開発 - Wranglerとworkerd ↗を使用して、ワーカーと接続されたリソースをローカルで開発し、迅速で正確なフィードバックループを実現します。