デバッグ

Cloudflare の Vite plugin は、既定でデバッグが有効で、ポート 9229 で待ち受けます。 プラグイン設定 の inspectorPort オプションで、任意のポートを指定したり、デバッグを無効にしたりできます。 ローカル開発中に Workers をデバッグする方法として、次の 2 つを推奨します。

vite dev または vite preview を実行すると、/__debug ルートが追加されます。このルートから、Chrome の DevTools ↗ の Cloudflare 実装 ↗ にアクセスできます。 このルートを開くと、アプリケーション内の各 Worker 向けに DevTools のタブが開きます。

タブを開いたあと、アプリケーションへリクエストを送り、Worker のコードをデバッグできます。

アプリケーションでブレークポイントデバッグできるように VS Code ↗ を設定するには、次の内容の .vscode/launch.json を作成します。

{
	"configurations": [
		{
			"name": "<NAME_OF_WORKER>",
			"type": "node",
			"request": "attach",
			"websocketAddress": "ws://localhost:9229/<NAME_OF_WORKER>",
			"resolveSourceMapLocations": null,
			"attachExistingChildren": false,
			"autoAttachChildProcesses": false,
			"sourceMaps": true
		}
	],
	"compounds": [
		{
			"name": "Debug Workers",
			"configurations": ["<NAME_OF_WORKER>"],
			"stopAll": true
		}
	]
}

ここで、<NAME_OF_WORKER> は Worker 設定ファイルに書いた Worker 名です。 inspectorPort で任意のポートを指定した場合は、その値を websocketaddress フィールドに書きます。

この設定のあと、vite dev または vite preview を実行し、Run & Debug パネル上部で Debug Workers を選んでデバッグを開始します。