AIによるコーディング支援（ChatGPT, Claude, GitHub Copilot など）が当たり前になってきましたが、1つ大きな限界があります。

AIは“コード”は生成できても、それが“ブラウザ上でどう動いているか”を自分の目で見ることができない。

例えば、CSSが崩れていたり、コンソールエラーが出ていたり、画像の読み込みが遅かったりしても、AIはそれを知ることができません。
これが、「AIが完全に開発者を代替できない最大の理由」とも言えます。

そこで登場したのが Chrome DevTools MCP（Model Context Protocol Server）。

Googleが公式ブログで公開したこの仕組みは、一言で言うと…

「AIがChromeのDevToolsを直接操作し、ページの状態を“見て判断できるようにする技術」です。

Google公式サイト：https://developer.chrome.com/blog/chrome-devtools-mcp?hl=ja

Chrome DevTools MCPとは何か？

Chrome DevTools MCPは、AIエージェント（ChatGPT / Claudeなど）とChromeブラウザのDevToolsをつなぐ“通訳サーバーです。

AIクライアント（Claude Desktopなど）からの指示を受け、

「このボタンをクリックして」
「コンソールログを見せて」
「CSSが崩れてないかチェックして」
「LCPが遅い原因を調べて」

といった操作を 人間の代わりに Chrome DevTools に命令して実行させる ことができます。

できることの例

分類	AIができるようになる操作
✅ ページ操作	ページ遷移 / リロード / タブ追加
✅ ユーザー操作	クリック / フォーム入力 / ドラッグ
✅ コンソール解析	`console.log` やエラーの取得
✅ ネットワーク監視	APIリクエスト一覧の取得
✅ パフォーマンス解析	LCP / FCP / スクリプトブロッキング診断
✅ DOM / CSS取得	要素構造やスタイルの確認

セットアップ方法（ClaudeCode）

Claude Code に Chrome DevTools MCP サーバーを追加するたけで利用可能です。

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

利用例

> https://www.youtube.com/

MCP経由でこれのコンソールエラー確認して

⏺ YouTubeのコンソールエラーを確認します。
  ⎿  # list_pages response
     ## Pages
     0: about:blank [selected]

⏺ YouTubeにアクセスします。

⏺ chrome-devtools - navigate_page (MCP)(url: "https://www.youtube.com/")
  ⎿  # navigate_page response
     ## Pages
     0: https://www.youtube.com/ [selected]

⏺ コンソールメッセージを確認します。
  ⎿  # list_console_messages response
     ## Console messages
     Info> rs=AGKMywFD5qwcFhfs-NI9IxTGjC3H5xAICQ:9750:8: LegacyDataMixin will be applied to all legacy elements.
     … +41 lines (ctrl+o to expand)

⏺ YouTubeのコンソールには以下のエラーが検出されました:

  主なエラー

  1. 動画再生エラー (403 Forbidden)

  - エラー: videoplayback リソースの読み込みに失敗（ステータス403）
  - 原因: 動画再生URLに対するアクセスが拒否されています
  - 頻度: 複数回（6回以上）同じエラーが発生

  2. プリロードリソース未使用

  - 警告: https://i.ytimg.com/generate_204 がプリロードされたが、ウィンドウのloadイベント後数秒以内に使用されていない
  - 推奨: 適切なas値を設定し、意図的にプリロードされているか確認が必要

  その他の情報メッセージ

  - LegacyDataMixin: レガシー要素に適用される警告（機能的な問題ではない）
  - Install Banner: インストールプロンプトイベントがpreventDefault()で呼ばれたため、バナーが表示されていない

  分析

  403エラーが繰り返し発生しているのは、動画再生URLの署名検証やアクセス制御に関連している可能性があります。これはYouTube側の仕様またはbot検出による制限かもしれません。

人間の代わりにコンソールのエラーを発見してくれましたね！便利

なぜこれは革命的なのか？

従来	Chrome DevTools MCP導入後
AIはコードを書くが、動作確認は人間がする必要がある	AIがブラウザ上で動作を観察し、自分で判断して修正できる
CSSの崩れやJSエラーは「見えない」	AIが自動で「見える」→分析できる
パフォーマンス調査は手作業	AIがトレース→原因→改善案まで提案

まとめ

項目	内容
何の技術？	AIとChrome DevToolsをつなぐMCPサーバー
何が嬉しい？	AIが“実行環境を見ながらデバッグ”できるようになる
誰が得する？	Webエンジニア / QA / E2Eテスト / パフォーマンス改善担当
未来はどうなる？	AIが「コードを書く」だけでなく「動かして直す」時代へ

Chrome DevTools MCP — AIに「目」を与えるデバッグ革命

Chrome DevTools MCPとは何か？

できることの例

セットアップ方法（ClaudeCode）

利用例

なぜこれは革命的なのか？

まとめ

お気軽にご相談ください

この記事をシェア