株式会社CAENのロゴ

Chrome DevTools MCPでAIにブラウザを自動操作させる｜AI駆動開発の新常識

この記事で分かること

Chrome DevTools MCP は、Google が2025年9月26日に公式公開した MCP サーバーです。これを入れるだけで、Claude / Cursor / Codex などの AI コーディングエージェントが 実際の Chrome を開いて、ページを触り、DOM を読み、エラーを拾う ようになります。

  • 自然言語で「このページを開いてフォーム入力して送信、エラーが出たら教えて」と頼める
  • E2E テストの自作コードを書かずに AI 任せで回せる
  • 他社サイトの PDF や表データを AI が構造化してくれる

僕（大森翔吾）が自分のアプリのデバッグと QA で毎日回している実運用レベルの使い方を、Playwright MCP との違いも含めて初心者向けにまとめます。

そもそも MCP とは？（30秒おさらい）

MCP（Model Context Protocol） は「AI に手が生える仕組み」。AI が外部のサービスやアプリを自分で覗いたり操作したりできる、標準化された USB ケーブルみたいなプロトコル です。2024年11月に Anthropic が提唱し、2025年から各社が一気に対応を進めました。

詳細は別記事にまとめています。知らない人はまずこちらから。

Chrome DevTools MCP とは

Chrome DevTools MCP は、AI エージェントを Chrome DevTools Protocol（CDP） 経由で Chrome に直接つなぐ MCP サーバーです。Google Chrome チームが提供しており、2025年9月26日に公開されました。

ブラウザの右クリックメニューにある「検証」機能、あれを AI が自分で開いて、DOM・ネットワーク・コンソールを見に行くイメージです。

AI から触れるもの

種別例
ページ操作URL を開く / クリック / フォーム入力 / スクロール
DOM要素の取得・検索・CSS セレクタでの特定
ネットワークリクエスト / レスポンス / ステータス / ペイロード
コンソールログ / エラー / 警告
パフォーマンスLCP / CLS などの Core Web Vitals 計測
視覚確認スクリーンショット

今までは「AI が書いたコードが動くかどうか、人間が Chrome を開いて目で見る」必要がありました。Chrome DevTools MCP を入れたあとは AI が自分で見て、自分で直して、もう一度自分で確認する ループが回ります。ここが本質的に革命的です。

何が変わるか：E2E テストが「物理で」できる

僕自身、以前 E2E テスト（エンドツーエンドテスト：実ブラウザでユーザー操作を再現する自動テスト）を自作しようとして、何度か挫折していました。Playwright のコードを書いて、セレクタを特定して、待機処理を書いて……というのが 地味にめんどくさい。

Chrome DevTools MCP 以降はこうなります。

「/products/dystopia を開いて、CTA ボタンを押して、遷移先のページでレイアウト崩れとコンソールエラーが無いか確認して。崩れてたらスクショ付きで教えて」

これだけ。AI が Chrome を自分で開いて、指示通りに回遊して、崩れを見つけたらスクショを貼って報告してきます。E2E テストが コードではなく自然言語で書けるようになった、というのが体感として一番大きい変化です。

僕は半年前に E2E テスト自作を一旦諦めて「これ多分そのうち AI 側ができるようになるだろ」と思って放置していたんですが、本当にその通りになりました。未来予測が当たって気持ちいい案件です。

大森翔吾の実運用3パターン

1. 自分のアプリのデバッグ・QA

株式会社CAEN で出している DYSTOPIA や CATS診断 などの Web プロダクトは、毎週のように Cursor / Claude Code でアップデートしています。その度に Chrome DevTools MCP にレグレッションチェックを任せています。

  • 「TOP から各プロダクト詳細までリンクを辿って、404 と JavaScript エラーがないか確認」
  • 「お問い合わせフォームにダミー値を入れて送信ボタン直前まで、バリデーションをテスト」
  • 「LCP と CLS を計測して、重い画像とレイアウトシフトの原因をリストアップ」

人間の QA に頼むほどでもない「軽い自己点検」が、AI 任せで数分で回ります。

2. 他社サイトの PDF・表データの構造化

決算 PDF や IR 資料のように、機械で集計しにくい形のまま置かれているデータ を AI が開いて、文字データとして抽出して、CSV や Markdown にしてくれます。

今までは人間が頑張ってコピペするしかなかった作業が、「このページの PDF を開いて、表を CSV にして」 の一言で終わります。個人事業主・一人法人レベルの業務効率化にも刺さる使い方です。

3. 既存 Web サイトの改善提案

クライアントワークやコンサル文脈でも便利です。「このサイトを開いて、ファーストビューと Lighthouse スコアから改善点を3つ出して」とやると、AI が実ブラウザでページを見た上で、画像圧縮・CLS 対策・メタタグ不備などを具体的に指摘してきます。

経験の少ない人でも、実ブラウザ + AI の視点 で Web 改善提案ができる。僕自身、コンサル的な相談を受けたときに最初のたたき台を作るツールとして多用しています。

Chrome DevTools MCP vs Playwright MCP

ブラウザ自動操作系 MCP は他にもあります。代表格は Playwright MCP。使い分けを整理します。

Chrome DevTools MCPPlaywright MCP
提供元Google Chrome チームMicrosoft（Playwright プロジェクト）
対象ブラウザChrome（Chromium 系）中心Chromium / Firefox / WebKit
強みDevTools そのもの（ネットワーク・パフォーマンス・DOM 検査）クロスブラウザ・堅牢なセレクタ・テストランナー連携
向き日常の QA・デバッグ・データ抽出本格的な自動テストスイート・CI 連携
セットアップ簡単（Chrome があれば動く）Playwright のインストール前提

最初に入れるのは Chrome DevTools MCP で良い と思っています。日常の AI駆動開発で欲しい「AI がブラウザを覗いて直して検証する」は Chrome DevTools MCP でほぼ足りる。本格的な E2E スイートや CI 組み込みに進みたくなったら Playwright MCP を足す、くらいの温度感で十分です。

導入方法（Claude Desktop / Cursor / Claude Code 共通）

  1. Google Chrome をインストール（すでに使っている人は OK）
  2. MCP クライアント（Claude Desktop・Cursor・Claude Code など）の設定ファイルに chrome-devtools-mcp を追加
  3. クライアントを再起動
  4. AI に「このページを開いて」と頼む

具体的な JSON 設定は公式 README が最新なので、検索して最新のものを参照してください。2026年4月時点ではまだバージョンが若いので、仕様が変わる可能性あり。

他の MCP との導入全体像は、姉妹記事にまとめています。

つまずきポイントと注意点

  • 権限は最小に：AI に渡すブラウザプロファイルはログイン情報が入っていないものを推奨。業務アカウントに勝手にアクセスされる事故を防ぐ
  • 初期は監視しながら触る：AI の操作は速いので、想定外の遷移で課金操作・送信操作をしないように、最初は人間が見ていること
  • 情報の鮮度：2025年末〜2026年前半は仕様変更・バグ修正が激しい時期。ドキュメントとバージョン番号を都度確認する

Chrome DevTools MCP が引き起こす「AI駆動開発のハードル低下」

AI駆動開発で一番怖いのは 「AI が書いたコードが本当に動くか分からない」 という不安でした。

Chrome DevTools MCP 以降は、その不安を AI 自身が自分で検証してくれる 時代に入ります。人間がやることは、最後のレビューと方針判断だけで良い。これは、プログラミング歴のない人が AI駆動開発に入ってくるハードルを 一段まるごと下げる 変化です。

この辺の記事と合わせて読むと、「どの AI に何をやらせて、どう検証させるか」 という AI駆動開発の全体像が見えてくるはずです。

関連する記事

AI駆動開発のご相談・お仕事のご依頼

株式会社CAEN（代表：大森翔吾）では、Chrome DevTools MCP を活用した E2E テスト自動化・Web サイト QA 自動化・AI 駆動開発チームの立ち上げ支援を承ります。

「自社サイトの QA を AI で自動化したい」「Chrome DevTools MCP を使って E2E テストを導入したい」「AI 駆動開発前提のチームを作りたい」など、お気軽にご相談ください。