CodexがDevToolsの中まで見てくれる！新機能Developer mode（CDP）でブラウザデバッグを実測してみた

• URL: https://zenn.dev/lnest_knowledge/articles/codex-developer-mode-cdp
• 日付: 2026-06-12
• Tier: Tier 3
• 要旨: Codex app 26.609（2026-06-11）で追加されたDeveloper mode（CDP）により、Codexがconsole log・network traffic・runtime error・DOM stateをChrome DevTools Protocol経由で直接確認できるようになった。実測でconsole.info・404 fetch・TypeErrorの捕捉を確認。

詳細

従来のBrowser useとの差:

• 従来: ページを開いて・クリックして・DOMを見て・スクショを撮る
• Developer mode: DevTools的に「なぜその状態になったのか」まで調べられる

確認できるようになったもの（公式）:

• console output（console.log等）
• network traffic（リクエスト/レスポンス）
• DOM state / applied styles
• JavaScript profiling（performance trace）
• runtime errors

実測結果:

• console.infoの構造化ログ: 内容・発生ファイル（app.js:50等）まで取得
• 404 fetchのエラー: Error: HTTP 404 for ./api/not-found-*.jsonまで確認
• TypeError: キャプチャされてconsole errorとして残る
• DOM state（window.__MIY53_DEBUG_STATE__）の値: Codexが確認できることを実測

実務への示唆:

• 「エラー表示になっています」（スクショ）→「console errorとfailed requestを確認して原因と修正候補を出して」（CDP）という依頼に変わる
• CodexがDevTools調査ペアとして機能するようになる

注意点:

• Full CDP accessはブラウザ内部のセンシティブな情報へのアクセスが可能。Codexが使用前に明示承認が必要
• ログイン済み業務画面・個人情報を含む画面では取得対象を最小限に絞る
• minifiedビルドではファイル・行番号の精度が落ちる