Claude CodeでChromeのコンソールログをデバッグする — 開始バナーの意味も

「Claudeがこのブラウザのデバッグを開始しました」と出たら

Chromeの上部に出るこのバーは、拡張機能がタブのデバッグ機能に接続したときにChromeが表示するものとみられます。Claude in Chromeがタブに接続し、ページを読み取ったり操作したりしている状態です。

読み取り対象はコンソールのメッセージ、ネットワークリクエスト、DOMの状態です。同じ拡張機能は複数の入口から動くので、見覚えのない場面で出たときは次の3つを順に確かめます。

• Claude Chrome拡張機能のサイドパネルで、直前に依頼したタスクが動いていないか。手順はClaude Chrome拡張機能でできることにあります
• Claude Desktop(Chat・Cowork・Claude Code)から、ブラウザ操作を頼んでいないか
• Claude Codeを--chrome付きで動かしていないか、/chromeで「Enabled by default」を選んでいないか

どの入口にも心当たりがなければ、拡張機能の設定でClaudeが操作できるサイトの権限を見直す選択肢があります。

Claude CodeのChrome連携のページには、このバナー自体の説明が載っていません。

Claude CodeでChromeのコンソールログを読ませるとは

Claude CodeはChromeブラウザと連携し、コンソールに出たエラーやDOMの状態を直接読み取ってから、その原因になったコードを直します。エラーメッセージをコピー&ペーストで渡す手間がなくなり、ブラウザで再現している問題をそのままターミナルの会話に持ち込めます。

この連携はClaude in Chromeというブラウザ拡張機能を介して動きます。同じ拡張機能をサイドパネル単体で使う方法はClaude Chrome拡張機能でできることで扱っており、そちらは思い立ったときにその場のページを読ませる用途向けです。Claude Code経由の連携は、開発中のアプリをターミナルからビルドし、そのままブラウザで動作確認するデバッグの流れに向いています。

Claudeは新しいタブを開いてブラウザ操作を行い、ログイン状態を引き継ぎます。ログインページやCAPTCHAに当たると処理を止めて手動対応を求めます。

使えるかどうかは4つの条件で決まる

手順を見直す前に、次の4条件を満たしているかを確かめます。条件を外れていると、手順どおりでもつながりません。

• 対応ブラウザ: Google Chrome・Microsoft Edge、そしてBrave・Arc・Vivaldi・OperaなどChromiumベースの他ブラウザ(拡張機能を検出して接続を試みます)
• 拡張機能: Claude in Chromeのバージョン1.0.36以上
• プラン: Pro・Max・Team・Enterpriseのいずれかの直接契約プラン
• 認証: /loginでclaude.aiアカウントにサインインしていること

WSL(Windows Subsystem for Linux)では使えません。APIキーやclaude setup-tokenで作る長期トークンで認証している場合も、--chromeを付けてもChrome連携はオフのままです。ブラウザ拡張機能がその認証情報では接続できないためで、v2.1.216より前はこの状態でも連携を有効にでき、接続のたびに403エラーで失敗していました。

Amazon Bedrock・Google CloudのAgent Platform・Microsoft Foundryなどサードパーティプロバイダー経由でしかClaudeを使っていない場合も、この機能は提供されません。別途claude.aiアカウントが必要になります。ログイン方式の違いはClaude Codeログイン方法3種の使い分けで確認できます。

起動から最初のコンソール確認まで

起動は--chromeフラグを付けるだけです。手元のv2.1.287では、claude --helpに次の2行が出ます。

claude --version
claude --help | grep -i chrome

2.1.287 (Claude Code)
  --chrome                              Enable Claude in Chrome integration
  --no-chrome                           Disable Claude in Chrome integration

無効にする--no-chromeも用意されています。流れは次の4段階です。

起動したら、調べたいページを開いてコンソールを確認するよう指示します。

ダッシュボードページを開いて、読み込み時にコンソールにエラーが出ていないか確認してください

Claudeはコンソールメッセージを読み取り、特定のパターンやエラー種別で絞り込むこともできます。コンソール出力に加えて、ネットワークリクエストとDOMの状態も読み取れます(Claude in Chromeのヘルプ記事に記載)。公式の例でも、すべての出力を求めるのではなく探すパターンを伝えるよう勧められています。ログは冗長になりがちなためです。「TypeError関連のログだけ見て」のように対象を絞ると、無駄なく原因にたどり着けます。

/chromeは状態確認のほか、権限の管理、拡張機能の再接続、接続中のブラウザの選択にも使います。複数のブラウザが接続されていると、最初のブラウザ操作の前に使うブラウザを選ぶよう促されます。あとから切り替えるときは/chromeの「Select browser…」を選びます。

毎回フラグを付けたくないときのコスト

/chromeで「Enabled by default」を選ぶと、--chromeなしでもChromeが有効になります。ただしブラウザツールが常にロードされるため、コンテキストの使用量が増えます。使う頻度が低いなら、既定では無効のままにして必要なセッションだけ--chromeを付ける運用が、公式の説明に沿った選び方です。

ローカル開発サーバーの動作確認に使う

コードを変更した直後に、実際の挙動をブラウザで確かめる用途にも向きます。

ログインフォームのバリデーションを更新しました。localhost:3000を開いて、
不正な値でフォームを送信し、エラーメッセージが正しく表示されるか確認してください

Claudeはローカルサーバーへ移動し、フォームを操作した上で観察結果を報告します。コンソールにエラーが出ていれば、その場でコードを直す提案に進めます。

UIの見た目まで確認したいときは、スクリーンショットをファイルに保存させることもできます。「チェックアウトページのスクリーンショットを撮ってディスクに保存して」と頼むと、画像を保存してファイルのパスを報告します。スクリーンショットツールのsave_to_diskはv2.1.211より前だとファイルを書き出さなかったので、保存されないときはまずバージョンを確認します。モックアップと実装を突き合わせる作業はClaude Codeスクリーンショット実装で扱っています。

Figmaのモックと実装を突き合わせて確認する

コンソールログの確認だけでなく、見た目の検証にも同じ連携を使えます。Figmaのモックからコードを実装したあと、そのままブラウザで開かせて見比べる流れです。フォーム入力の自動化など別の使い方はClaude CodeでChromeのフォームに自動入力する手順でも扱っています。

このFigmaのモックを元にヘッダーコンポーネントを実装しました。
localhost:3000を開いて、モックと見た目が一致しているか確認してください

Claudeはブラウザでページを開き、実装がデザイン意図とずれていないかを確認します。コーディングとブラウザでの見た目確認を、コンテキストを切り替えずに1つの会話で往復できるのがこの連携の強みです。

動かないときは症状から原因をたどる

対話セッションで拡張機能が見つからないと、「Claude wants to use your browser」という案内が1セッションに1回まで出ます。選択肢はInstall extension・Not now・Don't ask againの3つです。deniedMcpServersやmanaged-mcp.jsonの管理ポリシーがある環境では、この案内自体が出ません。

症状ごとに、疑う場所と最初の一手が違います。

画面に出たエラー文言から引くこともできます。公式のエラー一覧にある4件は次のとおりです。

初回の接続で検出されないときは、Chromeの再起動が効くことがあります。Chromeは起動時にネイティブメッセージングホストの設定ファイルを読み込み、その設定ファイルは初めてChrome連携を有効にしたときにClaude Codeが作るためです。macOSのChromeなら、ファイルは~/Library/Application Support/Google/Chrome/NativeMessagingHosts/の下にあります。Braveなど他のブラウザは、それぞれの設定ディレクトリにある同名のフォルダを読みます。

Windowsでは、複数のClaude Codeセッションが同じ名前付きパイプを使おうとしてEADDRINUSEエラーになることがあります。他のセッションを閉じてからClaude Codeを再起動します。

連携まわりの変更が入ったバージョンも、症状と照らし合わせる材料になります。

プランモードで承認が出る操作

コンソールログのデバッグは、ページを読む操作が中心です。プランモードでは、ブラウザツールのうち承認を求められる操作が公式に挙げられています。

バイパス権限モードが使えるセッションで、フィーチャーフラグの取得がオフなら、これらの呼び出しもプロンプトなしで実行されます。表にない操作の扱いは公式の説明に書かれていないため、読み取り中心の作業が止まらずに進むかどうかは実際に流して確かめるのが確実です。使えるツールの一覧は、/mcpでclaude-in-chromeを選び「View tools」で見られます。

サイトごとの許可は、Chrome拡張機能の設定から引き継がれます。オートモードでは、分類器が特定サイトへのブラウザ呼び出しを承認すると、拡張機能のサイト単位の確認がその呼び出しに限って省かれます。ただし、権限ルールでClaude in Chromeへのサイトを拒否している場合は省かれません。

VS Code拡張機能でも同じデバッグができます。プロンプト欄で@browserに続けて「localhost:3000を開いてコンソールのエラーを確認して」のように指示すると、フラグなしでそのまま動きます。詳しい使い方はClaude Code VS Code拡張機能の使い方にまとめています。エラーの再現条件や原因の切り分け方など、デバッグ依頼全般のコツはClaude Codeデバッグの精度は、渡す情報の質で決まるで扱っています。

よくある質問

会話をクリアすると開いていたタブはどうなりますか

拡張機能は、Claudeが開いたタブをセッションに紐づくタブグループにまとめます。ローカルのセッションでは、/clearを実行するとそのグループが開いていたページごと閉じられます。/clearをまたいで動き続けている作業がある場合は、空の新規タブしか入っていないときだけ閉じられます。/resumeでのセッション切り替えやClaude Codeの終了でも同じで、読みかけのページは残ります。

Computer Useとの違いは何ですか

Chrome連携はブラウザ内の操作に特化しています。ブラウザで完結しない、macOS上のネイティブアプリを直接操作したい場合はDesktop Computer Useが候補になります。

録画したデモをそのまま共有してよいですか

ブラウザ操作をGIFとして記録する機能もありますが、記録にはブラウザに見えているものがすべて入り、ログイン中のページのアカウント情報も含まれます。チーム外に共有する前に内容を確認します。

まとめ

エラー文言が出ているなら表から、出ていないなら症状のカードから当たると、再インストールのような重い手を打つ前に原因に届きます。