Gadget 52：デバッグ上級

wrangler tail・DevTools・ログ分析で Cloudflare OS の不具合を深堀りする

デバッグ上級

「標準のログ」では足りないときに使う、開発者向けの深掘りデバッグです。

目的

  • ブラウザDevTools・wrangler tail・生成configを駆使して原因を突き止める
  • 再現・調査の手順を自分の武器にする

前提条件

手順

1. フロント側：DevTools で見る

  • Network タブ: 実際の API リクエストとエラーコード
  • Console: フロントの例外・警告
  • Application タブ: ローカルストレージ・キャッシュ
# 観察のポイント
- どの API が失敗しているか（URL・メソッド・ステータス）
- リクエスト payload が想定通りか
- コンソールのエラーに原因ヒントがあるか

2. バックエンド側：wrangler tail とログ

ローカル run-local ではターミナル出力が全てです。必要あれば追加で詳細ログを:

# 起動を verbose 気味に、ログをファイルへ
pnpm run-local > /tmp/cfos-debug.log 2>&1 &
tail -f /tmp/cfos-debug.log

本番（デプロイ済み Worker）なら:

npx wrangler tail

3. 生成 config を見る

cat packages/workshop-backend/wrangler.dev.jsonc   # バインディング確認

「どの Gatekeeper が bind されているか」が原因の手がかりになることが多いです。

よくある失敗

症状 原因 対処
ログだけで原因不明 フロント/バックの両面を見ていない DevTools とログを同時に
再現しない 状態（.wrangler）が進んでいる コピー環境で再現（49）
本番で原因が見えない tail していない wrangler tail で監視
変更が原因か不明 直前変更を記録していない 31 を確認

確認

次に読む