概要
https://qiita.com/makoto-ogata@github/items/6d2171661519029154dd
詳細内容
## Chrome DevTools MCPを試す
https://qiita.com/makoto-ogata@github/items/6d2171661519029154dd
Chrome DevTools MCPの検証により、AIがブラウザ上で直接デバッグやパフォーマンス・アクセシビリティ分析を実行できる可能性が明らかになり、同時に現在の技術的限界も提示された。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 86/100 | **Annex Potential**: 84/100 | **Overall**: 84/100
**Topics**: [[Chrome DevTools, AI Coding Assistant, デバッグ, Webパフォーマンス最適化, Webアクセシビリティ]]
本記事は、2025年9月23日に発表された「Chrome DevTools MCP (Multi-Control Protocol)」をフロントエンドエンジニアの視点から実際に試した結果を報告するものです。著者は、AIコーディングエージェントが生成したコードのブラウザ上での実際の動作を確認できないという根本的な課題に対し、DevTools MCPが解決策を提供すると指摘しています。これにより、AIアシスタントがChromeでWebページを直接デバッグし、DevToolsのデバッグ機能やパフォーマンス分析を活用できるようになり、問題特定と修正の精度が向上すると説明しています。
DevTools MCPは、入力操作（クリック、ドラッグ、フォーム入力）、ページナビゲーション、CPU/ネットワークエミュレーション、パフォーマンス計測、ネットワークリクエストの取得、JavaScript実行、コンソールメッセージ表示、スクリーンショット撮影、DOMスナップショット取得といった多岐にわたる機能を提供します。導入はGemini CLIを使って容易に行え、設定ファイルに`chrome-devtools`が追加されます。
著者はまず、検証用のChromeブラウザが立ち上がることを確認し、「QiitaのLCPをチェック」というプロンプトでパフォーマンス計測が成功したことを報告。また、「ページのスクリーンショットをデスクトップに保存」というプロンプトで、PC版およびモバイル版のスクリーンショット取得も問題なく行えることを確認しました。
しかし、特定の要素（例：`id="GlobalHeader-react-component"`）を対象とした部分的なスクリーンショットを試みた際には、AIから「要素が単一の撮影可能な要素として認識されないため、直接撮影できない」という回答が得られました。著者がさらに「Capture Node Screenshot」の可能性や`uid`の取得方法について問い詰めたところ、AIは`uid`がツールの内部的な処理で主要な要素に自動割り当てされるものであり、ユーザーやAIが任意に付与・変更できないため、コンテナ要素であるヘッダーには`uid`が付与されず、直接の撮影は困難であると詳細に説明。このやり取りは、現在のAIツールの限界と、その背後にある技術的な制約を明確に示しています。
最後に、著者は「Webアクセシビリティに準拠していない箇所があるか」と質問し、画像に`alt`属性がない、一部のリンクがスクリーンリーダーで目的を理解しにくい、検索入力フィールドに`<label>`がないといった改善点をAIが的確に指摘したことを報告。
これらの検証を通じて、著者はChrome DevTools MCPがパフォーマンス、アクセシビリティ、コンソールエラーの原因調査など、多くの開発タスクを一つでカバーできる可能性を感じています。特定の機能にはまだ限界があるものの、AIコーディングアシスタントがブラウザと直接連携することで、今後の開発プロセスがより便利になるだろうと期待を寄せています。Webアプリケーションエンジニアにとって、日々のデバッグや改善作業をAIに委ねる未来を垣間見せる、実践的なレポートです。</label>