公開日: 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 は、本日リリースする一般公開プレビュー版から段階的に構築していきます。次にどの機能を追加すべきかについて、ユーザーとコミュニティからのフィードバックを積極的に求めています。AI コーディング アシスタントを使用するデベロッパーでも、次世代の AI 開発ツールを構築するベンダーでも、皆様のインサイトは非常に貴重です。不足している点や機能しない点がある場合は、GitHub で問題を報告してください。