Google公式Chrome DevTools MCPで、AIとブラウザーの調査を進める

AIを使って何ができるようになるか

Web画面の不具合をAIに相談するとき、スクリーンショットだけでは原因を絞れないことがあります。ボタンの見た目は分かっても、クリック後にエラーが出たのか、通信が失敗したのかまでは画像に写らないためです。

Chrome DevTools MCPは、AIクライアントがChromeやDevToolsの情報を扱えるようにするための仕組みです。ブラウザー上のページ構造や表示、コンソール、通信の情報を調べたり、ページを操作したりする作業を支援できます。AIに調査を頼みやすくなりますが、結果の確認や原因の判断は人が行います。

1章 ブラウザーとAIをつなぐ仕組み

MCPは道具をつなぐ共通の窓口

MCP（Model Context Protocol）は、AIクライアントと外部のツールやデータをつなぐための共通の取り決めです。ここでは、AIクライアントが依頼を出し、MCPサーバーが対応する機能を仲介し、ChromeやDevToolsから情報を得たり操作を依頼したりする、と捉えると分かりやすいでしょう。

たとえば「このボタンを押した後に何が起きるか調べて」と頼むと、対応する環境ではAIがページの状態を確認し、操作やログの取得を行えます。利用には対応するAIクライアントと設定が必要です。どのクライアントでも設定なしに使える、という意味ではありません。

AIに任せるのは観察と作業の一部

AIはブラウザーから得られる情報をもとに、状況の整理や確認作業を進めます。人は調査の目的と対象を伝え、AIが見た情報や実施した操作を確認します。ブラウザーを操作できることは、AIの推測が常に正しいことを意味しません。

2章 AIがブラウザーから得られる情報

情報の種類で分かることが変わる

DOMは、HTMLなどで作られたページの要素を木のような関係で表したものです。画面キャプチャでは似たボタンを区別しづらくても、DOMには要素のテキストや属性が含まれる場合があります。一方、DOMだけでは実際の見た目や、画面上で隠れている事情が分からないこともあります。

画面を人が見て対象を選び、DevToolsで選択中の要素とCSSを確認する方法もあります。AIが扱える情報と人が見ている画面を組み合わせると、対象を具体的に伝えやすくなります。

ページ上で選択した要素と、DevToolsのElements・Stylesパネルを並べて確認する画面例。配置は環境によって異なります。

Google / Chrome for Developers / Kayce Basques, Sofia Emelianova / 画像の出典 / CC BY 4.0 / 公式教材の画面例。HTMLスライドの画面ではありません。OS・バージョンで配置は異なります。改変なし。

3章 調査をAIに頼むときの進め方

「何を確かめたいか」から依頼する

例として、ログイン画面の送信ボタンを押しても先へ進まない場合を考えます。いきなり「直して」と頼むより、まず観察する範囲と目的を伝えます。

1. 症状と再現条件を伝える：「テスト環境で、入力後に送信ボタンを押しても画面が変わらない。原因の候補を調べてください」
2. 対象を特定する：ページ上のボタンや入力欄を、画面やページ構造から確認してもらいます。
3. 操作後の変化を確認する：クリック前後の画面、コンソールのエラー、関連する通信を調べてもらいます。
4. 観察と推測を分けて報告してもらう：失敗した通信があった、という観察と、認証処理が原因かもしれない、という推測を分けます。

DevToolsで要素を選択してからAIに対象を説明するときは、「選択中のボタンを調べて」のように指示できます。利用環境が選択状態をAIに渡せるかは構成によって異なるため、対象が正しく認識されたかを確認しましょう。

実際の依頼では、調査用アカウントやテスト環境を使い、機密情報を入力しないようにします。画面やログに個人情報、セッション情報、社内データが含まれる場合は、共有範囲を確認してから扱います。

4章 結果を確かめ、安全に活用する

AIの説明を観察結果と照らす

AIの報告を受けたら、再現条件が合っているか、どの画面・ログ・通信を根拠にしたかを確認します。たとえば「通信エラーが原因」と報告された場合は、対象の操作に関連するリクエストが実際に失敗しているかを見ます。別の通信のエラーを取り違えていたり、環境固有の問題だったりする可能性もあります。

調査結果は、少なくとも「観察した事実」「そこから考えた原因」「次に確かめること」に分けて読むと、推測を確定事項として扱いにくくなります。修正を依頼する場合も、まず原因候補と変更案を確認し、必要なら小さな変更から試します。

ブラウザー操作をAIに任せると、ページの入力やクリックが実際に行われる場合があります。共有環境への投稿、購入、削除、送信など、影響がある操作は対象と結果をよく確認してから進めてください。AIは調査の手間を減らす助けになりますが、最終的な判断は再現条件と証拠に基づいて行いましょう。