Claude CodeでChromeのコンソールログをデバッグする
Claude CodeにChromeを繋ぎ、コンソールログとネットワークリクエストを読ませてフロントエンドのバグを直す手順です。読み取り専用操作の扱いや長時間セッションの注意点もまとめます。
Claude CodeでChromeのコンソールログを読ませるとは
Claude CodeはChromeブラウザと連携し、コンソールに出たエラーやDOMの状態を直接読み取ってから、その原因になったコードを直します。エラーメッセージをコピー&ペーストで渡す手間がなくなり、ブラウザで再現している問題をそのままターミナルの会話に持ち込めます。
この連携はClaude in Chromeというブラウザ拡張機能を介して動きます。同じ拡張機能をサイドパネル単体で使う方法はClaude Chrome拡張機能でできることで扱っており、そちらは思い立ったときにその場のページを読ませる用途向けです。Claude Code経由の連携は、開発中のアプリをターミナルからビルドし、そのままブラウザで動作確認するデバッグの流れに向いています。
Claudeは新しいタブを開いてブラウザ操作を行い、ログイン状態を引き継ぎます。ログインページやCAPTCHAに当たると処理を止めて手動対応を求める点はフォーム入力などほかの用途と同じです。
使い始める前に必要なもの
必要な条件は次の通りです。
- 対応ブラウザ: Google Chrome・Microsoft Edge、そしてBrave・Arc・Vivaldi・OperaなどChromiumベースの他ブラウザ(拡張機能を検出して接続を試みます)
- WSL(Windows Subsystem for Linux)では使えません
- Claude in Chrome拡張機能のバージョン1.0.36以上
- 最新のClaude Code
- Pro・Max・Team・Enterpriseのいずれかの直接契約プラン(APIキーや長期トークンでの認証では有効になりません)
/loginでclaude.aiアカウントにサインインしていること
ログイン方式の違いはClaude Codeログイン方法3種の使い分けで確認できます。
コンソールログを読ませてバグを見つける手順
claude --chrome起動したら、調べたいページを開いてコンソールを確認するよう指示します。
ダッシュボードページを開いて、読み込み時にコンソールにエラーが出ていないか確認してくださいClaudeはコンソールメッセージを読み取り、特定のパターンやエラー種別で絞り込むこともできます。すべてのコンソール出力を確認させるのではなく、探したいパターンを具体的に伝えるのがコツです。ログは冗長になりがちで、全件を渡すとコンテキストを無駄に消費します。「TypeError関連のログだけ見て」のように対象を絞ると、無駄なく原因にたどり着けます。
ローカル開発サーバーの動作確認に使う
コードを変更した直後に、実際の挙動をブラウザで確かめる用途にも向きます。
ログインフォームのバリデーションを更新しました。localhost:3000を開いて、
不正な値でフォームを送信し、エラーメッセージが正しく表示されるか確認してくださいClaudeはローカルサーバーへ移動し、フォームを操作した上で観察結果を報告します。コンソールにエラーが出ていれば、その場でコードを直す提案に進めます。UIの見た目まで確認したい場合は、スクリーンショットを撮らせて保存することもできます(save_to_diskオプションはv2.1.211以降で正しくファイルを書き出すようになりました)。モックアップと実装を突き合わせる作業はClaude Codeスクリーンショット実装で扱っています。
Figmaのモックと実装を突き合わせて確認する
コンソールログの確認だけでなく、見た目の検証にも同じ連携を使えます。Figmaのモックからコードを実装したあと、そのままブラウザで開かせて見比べる流れです。フォーム入力の自動化など別の使い方はClaude CodeでChromeのフォームに自動入力する手順でも扱っています。
このFigmaのモックを元にヘッダーコンポーネントを実装しました。
localhost:3000を開いて、モックと見た目が一致しているか確認してくださいClaudeはブラウザでページを開き、実装がデザイン意図とずれていないかを確認します。コーディングとブラウザでの見た目確認を、コンテキストを切り替えずに1つの会話で往復できるのがこの連携の強みです。
つまずきやすいポイント
モーダルダイアログによる操作停止が最初のつまずきどころです。alert・confirm・promptのようなJavaScriptダイアログが出ているとブラウザのイベントがブロックされ、Claudeの操作が届かなくなります。ダイアログを手動で閉じてから、Claudeに続行するよう伝えます。
長時間セッションでは、拡張機能のサービスワーカー(service worker)がアイドル状態になり接続が切れることがあります。しばらく操作していない後にブラウザツールが反応しなくなったら、/chromeから「Reconnect extension」を選びます。「Receiving end does not exist」というエラーは、まさにこのサービスワーカーのアイドル状態が原因で出ます。
拡張機能が検出されないときは、chrome://extensionsで有効になっているか、claude --versionでClaude Codeが最新かを確認し、それでも直らなければ/chromeから再接続します。
組織のIP許可リストがbridge.claudeusercontent.comへの接続を拒否していると「Browser extension is not connected」というエラーになります。この場合はネットワーク管理者に許可リストの見直しを依頼します。
Windows環境では、複数のClaude Codeセッションが同じ名前付きパイプを使おうとしてEADDRINUSEエラーになることもあります。他のセッションを閉じてからClaude Codeを再起動すれば直ります。
読み取り専用の操作は確認なしで進む
プランモードでは、状態を変えない呼び出しは承認プロンプトなしで実行され、状態を変える呼び出しだけ承認を求められます。コンソールログのデバッグはこの区分と相性がよく、読み取り中心の作業は止まらずに進みます。
| 操作の種類 | 該当する呼び出し | プランモードでの扱い |
|---|---|---|
| 読み取り専用 | 該当する呼び出しread_page、get_page_text、find、コンソール/ネットワークメッセージの読み取り | プランモードでの扱い確認なしで実行 |
| 読み取り専用(条件付き) | 該当する呼び出しスクリーンショット撮影(save_to_disk指定時)、tabs_context_mcpのcreateIfEmpty | プランモードでの扱い承認プロンプトが出る |
| 状態変更 | 該当する呼び出しクリック、入力、ナビゲーション、タブ・ウィンドウ操作、GIF録画 | プランモードでの扱い承認プロンプトが出る |
読み取り専用の呼び出しでも、clearのように状態を変えるフラグを一緒に指定すると承認が必要になります。コンソールやネットワークの読み取りツールで履歴をクリアする場合や、スクリーンショットをディスクに保存するsave_to_disk、新規タブ作成を伴うtabs_context_mcpのcreateIfEmptyもこれに当たります。複数の操作をまとめて実行するbrowser_batchは、中身がすべて読み取り専用のときだけ確認なしで動きます。
VS Code拡張機能でも同じデバッグができます。プロンプト欄で@browserに続けて「localhost:3000を開いてコンソールのエラーを確認して」のように指示すると、フラグなしでそのまま動きます。詳しい使い方はClaude Code VS Code拡張機能の使い方にまとめています。エラーの再現条件や原因の切り分け方など、デバッグ依頼全般のコツはClaude Codeデバッグの精度は、渡す情報の質で決まるで扱っています。
よくある質問
ネットワークリクエストも読ませられますか
はい。コンソールメッセージだけでなくネットワークリクエストの読み取りも読み取り専用の呼び出しに含まれ、APIレスポンスの中身やステータスコードを確認する用途にも使えます。
会話をクリアすると開いていたタブはどうなりますか
/clearを実行すると、そのセッションで開いたタブグループは閉じられます。ただし/clearをまたいで動き続けている作業がある場合は閉じません。/resumeでセッションを切り替えたときは、空の新規タブしか残っていない場合だけグループが閉じられ、読みかけのページは残ります。
Computer Useとの違いは何ですか
Chrome連携はブラウザ内の操作に特化しています。ブラウザで完結しない、macOS上のネイティブアプリを直接操作したい場合はDesktop Computer Useが候補になります。
Bedrock・Google CloudのAgent Platform・Foundry経由でも使えますか
使えません。Chrome連携はAmazon Bedrock・Google CloudのAgent Platform・Microsoft Foundryといったサードパーティプロバイダー経由では提供されておらず、これらの経路だけでClaudeを使っている場合は、コンソールログのデバッグに別途claude.aiアカウントが必要です。
録画したデモをそのまま共有してよいですか
ブラウザ操作をGIFとして記録する機能もありますが、記録範囲にはログイン中のページのアカウント情報も含まれます。チーム外に共有する前に内容を確認する必要があります。
まとめ
Claude CodeのChromeコンソールログ連携は、エラーメッセージのコピー&ペーストを省き、ブラウザで見えている状態をそのままデバッグ依頼に使える機能です。使うにはPro・Max・Team・Enterpriseのいずれかのプランで/login済みであることと、Claude in Chrome拡張機能のバージョン1.0.36以上が必要です。読み取り専用の操作はプランモードでも止まらずに進むため、まずは「エラーが出ていないか確認して」から気軽に試せます。長時間セッションで反応が鈍ったら、拡張機能のサービスワーカーがアイドル化している可能性を疑い、/chromeから再接続します。