公開日: 2025 年 9 月 23 日
本日、新しい Chrome DevTools Model Context Protocol（MCP）サーバーの公開プレビューを開始します。これにより、Chrome DevTools の機能を AI コーディング アシスタントに導入できます。
コーディング エージェントには根本的な問題があります。生成したコードがブラウザで実行されたときに実際に何をするのかを確認できないことです。目隠しをしてプログラミングしているようなものです。
Chrome DevTools MCP サーバーはこれを変更します。AI コーディング アシスタントは、Chrome でウェブページを直接デバッグし、DevTools のデバッグ機能とパフォーマンス分析情報を活用できます。これにより、問題の特定と修正の精度が向上します。
仕組みを実際に確認してみましょう。
Model Context Protocol（MCP）とは
Model Context Protocol（MCP）は、大規模言語モデル（LLM）を外部ツールやデータソースに接続するためのオープンソース標準です。Chrome DevTools MCP サーバーは、AI エージェントにデバッグ機能を追加します。
たとえば、Chrome DevTools MCP サーバーは performance_start_trace というツールを提供します。ウェブサイトのパフォーマンスを調査するよう指示された場合、LLM はこのツールを使用して Chrome を起動し、ウェブサイトを開き、Chrome DevTools を使用してパフォーマンス トレースを記録できます。LLM は、パフォーマンス トレースを分析して、改善の可能性を提案できます。Chrome DevTools MCP サーバーは、MCP プロトコルを使用して、コーディング エージェントに新しいデバッグ機能を提供し、ウェブサイトの構築をより効率的に行えるようにします。
MCP の仕組みについて詳しくは、MCP のドキュメントをご覧ください。
どのような使い道がありますか？
Gemini CLI などの AI アシスタントで試すことができるプロンプトの例をいくつか示します。
コードの変更をリアルタイムで検証する
AI エージェントで修正を生成し、Chrome DevTools MCP でソリューションが意図したとおりに動作することを自動的に確認します。
プロンプトの例:
Verify in the browser that your change works as expected.
ネットワーク エラーとコンソール エラーを診断する
エージェントがネットワーク リクエストを分析して CORS の問題を特定したり、コンソールログを調べて機能が想定どおりに動作しない理由を把握したりできるようにします。
プロンプトの例:
A few images on localhost:8080 are not loading. What's happening?
ユーザー行動をシミュレートする
ランタイム環境を検査しながら、ナビゲーション、フォームの入力、ボタンのクリックを行ってバグを再現し、複雑なユーザーフローをテストできます。
プロンプトの例:
Why does submitting the form fail after entering an email address?
ライブ スタイリングとレイアウトの問題をデバッグする
AI エージェントにライブページへの接続、DOM と CSS の検査を依頼し、ブラウザのライブデータに基づいて、要素のオーバーフローなどの複雑なレイアウトの問題を解決するための具体的な提案を得ます。
プロンプトの例:
The page on localhost:8080 looks strange and off. Check what's happening there.
パフォーマンス監査を自動化する
AI エージェントにパフォーマンス トレースを実行し、結果を分析して、LCP の数値が高いなどの特定のパフォーマンスの問題を調査するよう指示します。
プロンプトの例:
Localhost:8080 is loading slowly. Make it load faster.
使用可能なツールの一覧については、ツール リファレンス ドキュメントをご覧ください。
始める
これを試すには、MCP クライアントに次の構成エントリを追加します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
動作を確認するには、コーディング エージェントで次のプロンプトを実行します。
Please check the LCP of web.dev.
詳しくは、GitHub の Chrome DevTools MCP のドキュメントをご覧ください。
参加する
Chrome DevTools MCP は、本日リリースする一般公開プレビュー版から段階的に構築していきます。Google では、次にどの機能を追加すべきかについて、ユーザーとコミュニティからのフィードバックを積極的に求めています。AI コーディング アシスタントを使用しているデベロッパーでも、次世代の AI 開発ツールを構築しているベンダーでも、皆様のフィードバックは非常に貴重です。不足している点や機能しない点がある場合は、GitHub で問題を報告してください。