ブレークポイント

ブレークポイントでデバッグする

Wrangler または Vite で Worker をローカル開発するとき、Worker 内のブレークポイントでデバッグできます。ブレークポイントを使うと、Worker の実行中のある時点で何が起きているかを確認できます。ブレークポイント機能は DevTools と VS Code の両方にあります。

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

VS Code のデバッグターミナル

VS Code 組み込みの JavaScript Debug Terminals ↗ を使う場合、JS デバッグターミナルを開き（Cmd + Shift + P を押して javascript debug と入力）、そのデバッグターミナルから wrangler dev（または vite dev）を実行するだけです。VS Code は実行中の Worker に自動で接続し（複数の Worker を同時に実行していても）、デバッグセッションを開始します。

`launch.json` ファイルでブレークポイントを使うよう VS Code を設定する

Worker プロジェクトでブレークポイントデバッグ用に VS Code を設定する手順は次のとおりです。

プロジェクトのルートフォルダーに .vscode フォルダーがなければ作成します。
そのフォルダー内に、次の内容の launch.json ファイルを作成します。

{
	"configurations": [
		{
			"name": "Listen Wrangler",
			"type": "node",
			"request": "attach",
			"port": 9229,
			"cwd": "/",
			"resolveSourceMapLocations": null,
			"attachExistingChildren": false,
			"autoAttachChildProcesses": false,
			"sourceMaps": true // works with or without this line
		},
		{
			"name": "Launch Wrangler",
			"command": "npm run dev",
			"type": "node-terminal",
			"request": "launch",
			"console": "integratedTerminal",
			"sourceMaps": true
		}
	]
}

VS Code でプロジェクトを開き、VS Code から新しいターミナルウィンドウを開き、npx wrangler dev を実行してローカル開発サーバーを起動します。
Run & Debug パネルの上部に、構成を選ぶオプションが表示されます。Wrangler を選び、再生アイコンを選びます。左側の Call Stack パネルに Wrangler: Remote Process [0] が表示されます。
プロジェクト内の .js または .ts ファイルに戻り、少なくとも 1 つのブレークポイントを追加します。
ブラウザーを開き、Worker のローカル URL（デフォルトは http://127.0.0.1:8787）にアクセスします。ブレークポイントに到達し、指定した行のコードの詳細を確認できます。

ブレークポイント