FIXER Tech Blog - Development

FIXER cloud.config Tech Blog

Chrome DevTools MCPとは？ Claude Codeとの連携でWebアプリ開発体験が劇的に変わった

　本記事はFIXERが提供する「cloud.config Tech Blog」に掲載された「Chrome DevTools MCPで実現した次世代Web開発体験」を再編集したものです。

　最近、GoogleからChrome DevTools MCPがリリースされたという話を聞いて、実際に自分のWebアプリケーションで試してみました。

　結果、AIがブラウザを操作しながらアプリケーションを理解し、パフォーマンスやエラーの確認までしてくれるようになりました。

Chrome DevTools MCPって何？

　Chrome DevTools Model Context Protocol（MCP）サーバーは、2025年9月23日にGoogleから公開プレビューとしてリリースされたツールです。

　AIがChrome DevToolsを直接操作できるようになる仕組みです。

　つまり、Google公式のChrome DevTools MCPによって、簡単な設定だけで、Claude CodeがブラウザをDevTools経由で操作・分析できるようになったのです。

　筆者は Claude Code で利用しているため、以降は Claude Code として書いていきます。

自然言語指示による、アプリケーション自動分析

　最初は本当にシンプルな指示から始めました。

「MCPのChrome DevToolsを使って、修正対応が必要そうな箇所がないか分析してほしい。
`http://localhost:3000`で開いているので確認してください。」

　たったこれだけの指示で、Claude Codeは以下のような分析を自動で実行してくれました

・ページのパフォーマンス測定（Core Web Vitalsなど）
・コンソールエラーのチェック
・ネットワークリクエストの分析
・レイアウトの問題検出

　単に数値を報告するだけでなく、問題点と改善提案まで提供してくれています。

Chrome DevTools MCPで利用可能な操作一覧

　9/26日現在、Chrome DevTools MCPでは以下の操作が可能になっています（参考: GitHub）

「色々操作してみて」という曖昧な指示でも理解してくれた

　次に、こんな曖昧な指示を出してみました。

「`http://localhost:3000`上で色々な操作を行って、その分析を行ってほしい。
まずは分析結果から、この画面上でどのような操作が可能かを考えて番号を付けて提案してください。」

　Claude Codeの反応は期待以上でした。自動的にページを分析して、以下のような操作リストを作成してくれました。

Phase 1: 基本的なUI要素の検証
・ナビゲーション要素のテスト
・入力フォームの動作確認
・各種ボタンの反応確認

Phase 2: 動的要素の検証
・ポップアップ要素の開閉
・ドロップダウンの展開
・非同期処理の確認

Phase 3: パフォーマンス負荷テスト
・大量データの処理確認
・連続操作での応答性確認

　各フェーズを実行しながら、新たに発見した操作可能な要素を操作リストに追加していく、ということも可能でした。

動的に発見された要素への対応

　こんな指示を出してみました。

「現状の分析結果で追加で発覚した操作がたくさんあると思うので、それを検討するのを先に行いたい。
Phase 1やPhase 2に追加すべき内容の操作があれば、先にそれを分析してから、Phase 3に移ってほしい。」

　Claude Codeは実行中に以下のような発見をしてくれました。

・特定の操作後にのみ表示される隠れたメニュー項目
・状態遷移のパターン（通常→処理中→完了）
・動的に生成される要素の存在

　これらは手動で確認する際には見逃しやすい要素で、AIが網羅的に探索してくれたことで発見できました。

段階的な実行でより深い分析へ

　複雑な操作も、段階的な指示で実現できました。

「Phase毎に操作を実行し、分析してください。
操作によって、追加操作が必要になったら、逐次それを追加していってほしい。」

　Claude Codeは各フェーズで、

1．計画した操作をブラウザ上で実行
2．結果をDevToolsで分析
3．新たに発見した操作可能要素を検出
4．必要に応じて追加調査を実施

　という流れを自動的に繰り返してくれました。

実際にブラウザで何をやってくれたか

　Claude Codeが実際にブラウザを操作している様子を見ているのは、なかなか面白い体験でした。

　以下のような操作を次々と実行してくれます。

・パフォーマンス計測の開始
・各種UI要素の自動発見とクリック
・動的に出現する要素の検出
・フォームへの自動入力
・状態変化の待機と検証
・パフォーマンス結果の取得と分析

　実際のブラウザ上で、ボタンがクリックされ、フォームに文字が入力され、画面が遷移していく様子を見ながら、同時にDevToolsでパフォーマンスや通信状況が分析されていくのは、まるでAIがアプリケーションを理解しようとしているような感覚でした。

AIがアプリケーションを理解するということ

　今回の検証で最も興味深かったのは、Claude Codeが単に指示されたことを実行するだけでなく、アプリケーションの構造や動作を理解しようとしていることでした。

　これまでAIは、コードを読んで静的に分析することはできました。

　しかし、Chrome DevTools MCPによって、実際に動いているアプリケーションからも理解できるようになったのです。

コードからの理解と動作からの理解

従来のAIツール

・ソースコードを解析して構造を理解
・静的解析によるバグの検出
・コードパターンからの改善提案

Chrome DevTools MCP導入後

・実際の動作を確認しながら挙動を理解
・ユーザー視点での問題発見
・動的に生成される要素や状態遷移の把握
・パフォーマンスの実測値に基づく分析

　例えば、コードを見ただけでは分からない以下のような点も理解できるようになりました。

・非同期処理のタイミングと実際の待機時間
・動的に生成されるUIの存在と挙動
・ユーザー操作に対する実際のレスポンス
・ネットワーク通信の実態

　これは、まさに「コードの意図」と「実際の動作」の両方を理解できるようになったということです。

今後の可能性

　今回の経験から、Chrome DevTools MCPには大きな可能性を感じました。AIが「コードからの理解」に加えて「実際の動作からの理解」もできるようになったことで、以下のような発展が期待できます：

実際のアプリケーションに沿ったテストケースの自動生成

　AIがアプリケーションの実際の動作を理解した上で、PlaywrightやCypressなどのE2Eテストコードを自動生成できる可能性があります。コードの構造だけでなく、実際の動作を知っているからこそ、より実践的なテストケースが書けるはずです。

動的な品質監視

　コードレビューだけでなく、実際に動かしながらの品質チェックが可能になります。「このコード変更が実際にどう動作に影響するか」をAIが事前に確認してくれる世界が来るかもしれません。

ドキュメントとコードと動作の一致確認

　仕様書、コード、実際の動作の3つが一致しているかを、AIが自動で確認できるようになる可能性があります。

使ってみた感想

　正直、ここまで簡単な指示でAIがブラウザを操作し、アプリケーションを理解してくれるとは思っていませんでした。特に良かったのは。

1．指示が自然言語で書ける
・複雑なAPIやコマンドを覚える必要なし
・「色々操作してみて」のような曖昧な指示も理解

2．AIがアプリケーションを探索的に理解
・事前の定義なしに、動的に要素を発見
・文脈を理解した上での分析

3．実際のブラウザ操作を通じた検証
・DevToolsのパフォーマンス分析
・コンソールエラーの検出
・ネットワーク通信の監視

まとめ

　Chrome DevTools MCPは、AIに「コードからの理解」だけでなく「実際に動いているアプリケーションからの理解」という新しい能力を与えてくれました。

　これはまだ始まりに過ぎません。

　AIがコードと実際の動作の両方を理解できるようになったことで、将来的にはより実践的なテストコードの自動生成や、動的な品質保証など、今までにない開発支援が可能になるのではないでしょうか。

　もし興味がある方は、是非実際に使ってみてください。

　AIがあなたのアプリケーションを「動かしながら理解する」様子は、きっと新しい発見をもたらしてくれるはずです。

参考リンク

・Chrome DevTools MCP公式ブログ（Google）
・Chrome DevTools MCP GitHubリポジトリ
・Model Context Protocol（MCP）ドキュメント

稲永 然／FIXER
稲永 然（いななが ぜん）です。
2024年に高専専攻科の機械工学科より入社しました。
学んだことや誰かのためになりそうなことを細々とブログにしていきます。

■関連サイト

• cloud.config Tech Blogのエントリー
• cloud.config Tech Blog
• FIXER