はじめに
GoogleからChrome DevTools Model Context Protocol（MCP）サーバーの公開プレビューが2025年9月23に発表された。
これまでAIコーディングアシスタントは「生成したコードがブラウザで実際に何をするのか確認できない」という根本的な問題があった。まさに目隠しをしてプログラミングしているような状況である。
Chrome DevTools MCPはこの問題を解決し、AIがブラウザを直接デバッグできるようになるツールである。
今回はVisual Studio Code + GitHub Copilot で試してみた。
環境
Windows 11 Professional
WSL2 (Ubuntu 24.04 LTS)
Visual Studio Code
GitHub Copilot
node v22.17.0Chrome DevTools MCPとは
- ChromeDevTools / chrome-devtools-mcp
https://github.com/ChromeDevTools/chrome-devtools-mcp
Model Context Protocol（MCP）について
Model Context Protocol（MCP）は、大規模言語モデル（LLM）を外部ツールやデータソースに接続するためのオープンソース標準である。
Chrome DevTools MCPサーバーは、AIエージェントにChromeのデバッグ機能を提供する
- リアルタイム検証: コード変更の即座な確認
- ネットワーク診断: CORS問題やAPIエラーの特定
- パフォーマンス分析: LCPやCore Web Vitalsの測定
- DOM操作: 要素の検査とスタイル調整
- ユーザー行動シミュレーション: フォーム入力やクリック操作
従来の問題
# 従来のAIコーディングアシスタント
1. コード生成
2. 人間がブラウザで確認
3. 問題があれば再度AIに依頼
4. 繰り返し...MCPによる改善
# Chrome DevTools MCP使用時
1. コード生成
2. AIが自動でブラウザ検証
3. 問題検出と修正提案
4. 最適化された解決策を提供環境設定
前提条件
# 必要な環境
- Visual Studio Code
- GitHub Copilot（または他のMCP対応AIアシスタント）
- Chrome ブラウザ（stable/beta/dev/canary）
- Node.js v20.19以上（最新のLTSバージョン推奨）
- npmインストール手順
1. VSCode設定ファイルの編集
GitHub CopilotでMCPを使用するため、設定ファイルに以下を追加
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest"
]
}
}
}オプション
| オプション | 説明 | デフォルト値 |
|---|---|---|
--headless | ヘッドレスモード（UI非表示） | false |
--channel | Chromeチャンネル | stable |
--viewport | 初期ビューポートサイズ | - |
--isolated | 一時的なユーザーデータディレクトリ | false |
--browserUrl | 既存Chromeインスタンスに接続 | - |
--executablePath | カスタムChrome実行ファイルパス | - |
--proxyServer | プロキシサーバー設定 | - |
--acceptInsecureCerts | 不正な証明書を許可 | false |
--logFile | ログファイル出力パス | - |
実際にHugoのブログに使ってみた
ローカルで localhost:1313でHugoサーバを起動して下記のプロンプトを投げる。
localhost:1313にアクセスして、ブログで問題点を挙げてみてください。結果
ブログ分析結果：localhost:1313の問題点
Chrome DevTools MCPを使用してブログを詳細に分析しました。以下が主要な問題点と改善提案です：
📊 パフォーマンス指標
LCP（Largest Contentful Paint）: 402ms - 良好 ✅
CLS（Cumulative Layout Shift）: 0.00 - 優秀 ✅
TTFB（Time to First Byte）: 2ms - 非常に良好 ✅
🚨 特定された問題点
1. 画像最適化の問題 - 97KB削減可能
問題: avatar.pngが最適化されていない
影響: 97KBの無駄なダウンロード
改善策:
WebPまたはAVIF形式への変換（89.1KB削減）
レスポンシブ画像の実装（81.6KB削減）
表示サイズに適したサイズへのリサイズ
2. キャッシュ戦略の問題 - 80.2KB削減可能
問題: livereload.jsのキャッシュ期間が0秒
影響: リピート訪問時の不要なダウンロード
改善策: 適切なCache-Controlヘッダーの設定
3. テキスト圧縮の未実装 - 24.2KB削減可能
問題: HTMLドキュメントでgzip/brotli圧縮が無効
影響: ドキュメント転送サイズの増加
改善策: サーバーレベルでの圧縮有効化
4. 外部フォント読み込みの課題
問題: Google Fontsから大量のwoff2ファイル（18個）を読み込み
影響:
ネットワークリクエスト数の増加
外部サービス依存
改善策:
フォントのサブセット化
font-display: swapの適用
重要でないフォントの遅延読み込み
5. Third-party依存
問題: 外部CDN（jsdelivr, Google Fonts）への依存
影響: 外部サービス障害時のリスク
改善策:
重要なライブラリのローカル化
フォールバック機能の実装
6. DOMサイズ
問題: 比較的大きなDOM構造
影響: スタイル計算とレイアウト処理の負荷
改善策: 不要な要素の削除とHTML構造の最適化
🎯 優先度別改善提案
高優先度（すぐに実装可能）
画像最適化: avatarをWebP形式に変換し、適切なサイズにリサイズ
テキスト圧縮: Hugo設定でgzip圧縮を有効化
キャッシュ設定: 静的アセットのキャッシュ期間を延長
中優先度（計画的に実装）
フォント最適化: Google Fontsのサブセット化とfont-display: swap
レスポンシブ画像: srcset属性を使用した画像の最適化
Third-party削減: 重要でないライブラリのローカル化
低優先度（長期的改善）
DOM構造の見直し: HTML構造の最適化
CSS最適化: 未使用CSSの削除
Service Worker: オフライン対応とキャッシュ戦略の強化
✅ 現在良好な点
優秀なLCP: 402msは非常に高速
レイアウト安定性: CLS 0.00で完璧
サーバー応答速度: TTFB 2msは理想的
レスポンシブ対応: モバイルでも適切に表示
JavaScriptエラー: コンソールエラーなし
📈 改善効果予測
上記の改善を実装することで：
転送量削減: 200KB以上の削減が可能
ページ速度向上: すでに高速だが、さらなる最適化
ユーザー体験向上: 特にモバイルユーザーの体験改善
SEO効果: Core Web Vitalsスコアの維持・向上
この分析結果は、Chrome DevTools MCPの実際の活用例として非常に有効で、記事の内容を裏付ける実証データとなっています。実際の使用例
1. パフォーマンス分析
プロンプト例
web.devのLCP（Largest Contentful Paint）をチェックしてください。AIの実行プロセス
- Chromeブラウザを起動
- web.devに移動
- パフォーマーストレースを開始
- LCP値を測定
- 結果分析と改善提案
実行結果
成功です！web.devのページが開きました。次にパフォーマンス測定を開始します。
素晴らしい！web.devのパフォーマンス測定が完了しました。結果を要約すると：
web.dev のLCP（Largest Contentful Paint）分析結果
主要指標
LCP: 1,125ms（1.1秒）
CLS: 0.00（優秀）
TTFB（Time to First Byte）: 658ms
レンダリング遅延: 468ms
LCP構成要素
TTFB（Time to First Byte）: 658ms - サーバーからの最初の応答時間
レンダリング遅延: 468ms - ブラウザでの描画処理時間
パフォーマンス改善提案
Chrome DevTools MCPが特定した主要な改善ポイント：
DocumentLatency（推定改善: LCP -556ms）
リダイレクトの回避
サーバー応答速度の向上
テキスト圧縮の有効化
RenderBlocking（推定改善: LCP -89ms）
レンダリングブロックリソースの遅延読み込み
インライン化の検討
LCPBreakdown
各フェーズの最適化戦略
リソース読み込み時間の改善
ThirdParties
サードパーティコードの影響軽減
遅延読み込みの実装
結論
web.devのLCPは1.125秒で、Core Web Vitalsの「良好」しきい値（2.5秒以下）を満たしています。しかし、最適化により600ms以上の改善が期待できることがわかりました。
この測定は、作成した記事で説明したChrome DevTools MCPの実際の動作例となっており、VSCodeから直接ウェブパフォーマンスの詳細分析が可能であることを実証しています。2. ネットワークエラー診断
診断プロンプト例
localhost:8080で一部の画像が読み込まれません。何が起きているか調査してください。診断プロセス例
- 指定URLにアクセス
- Networkタブでリクエスト分析
- 失敗したリクエストを特定
- CORS設定やパスエラーを検出
- 修正方法を提案
3. レイアウト問題のデバッグ
デバッグプロンプト例
localhost:8080のページが変に見えます。何が問題か確認してください。デバッグプロセス例
- ページの視覚的検査
- DOM構造の分析
- CSS計算値の確認
- レイアウトエラーの特定
- 修正用CSSコードの生成
4. フォーム機能のテスト
テストプロンプト例
メールアドレスを入力してフォーム送信すると失敗する理由を調べてください。テストプロセス例
- フォーム要素の特定
- 入力値のシミュレーション
- 送信プロセスの監視
- エラーログの分析
- 修正コードの提案
利用可能なツール一覧
Chrome DevTools MCPは 26個のツール を7つのカテゴリで提供
入力自動化（7つのツール）
| ツール | 機能 | 使用例 |
|---|---|---|
click | 要素クリック | ボタン押下、リンククリック |
drag | ドラッグ&ドロップ | ファイル移動、要素配置 |
fill | フォーム入力 | テキスト入力、選択操作 |
fill_form | 複数要素一括入力 | フォーム全体の自動入力 |
handle_dialog | ダイアログ操作 | アラート、確認ダイアログ |
hover | マウスオーバー | ツールチップ表示、UI検証 |
upload_file | ファイルアップロード | 画像、ドキュメント送信 |
ナビゲーション自動化（7つのツール）
| ツール | 機能 | 使用例 |
|---|---|---|
close_page | ページクローズ | タブ管理、リソース解放 |
list_pages | ページ一覧表示 | 開いているタブの確認 |
navigate_page | ページ移動 | URL指定でのページ遷移 |
navigate_page_history | 履歴ナビゲーション | 戻る・進む操作 |
new_page | 新規ページ作成 | 新しいタブでページ開く |
select_page | ページ選択 | 特定タブへの切り替え |
wait_for | 要素・状態待機 | 動的コンテンツの読み込み |
エミュレーション（3つのツール）
| ツール | 機能 | 使用例 |
|---|---|---|
emulate_cpu | CPU スロットリング | 低性能端末のパフォーマンス |
emulate_network | ネットワーク制限 | 3G/4G環境でのテスト |
resize_page | ビューポートサイズ | レスポンシブデザインの確認 |
パフォーマンス（3つのツール）
| ツール | 機能 | 使用例 |
|---|---|---|
performance_analyze_insight | パフォーマンス洞察分析 | 詳細な改善提案の取得 |
performance_start_trace | パフォーマンス測定開始 | LCP、FID、CLS測定 |
performance_stop_trace | パフォーマンス測定終了 | 結果取得と分析 |
ネットワーク（2つのツール）
| ツール | 機能 | 使用例 |
|---|---|---|
get_network_request | 特定リクエスト詳細取得 | APIエラーの詳細分析 |
list_network_requests | ネットワーク一覧表示 | 全リクエストの監視 |
デバッグ（4つのツール）
| ツール | 機能 | 使用例 |
|---|---|---|
evaluate_script | JavaScriptの実行 | 動的な値取得、関数呼び出し |
list_console_messages | コンソールログ取得 | エラー、警告の確認 |
take_screenshot | スクリーンショット | 視覚的な問題の記録 |
take_snapshot | ページ構造スナップ | DOM構造の詳細分析 |
実践的な活用シーン
開発フロー改善
# 従来の開発フロー
1. コード修正
2. ブラウザ確認
3. 問題発見
4. 再修正
5. 繰り返し
# MCP活用フロー
1. AIに問題報告
2. 自動診断・修正
3. 検証完了
4. 本格実装注意点と制限事項
現在の制限
- ブラウザ依存: Chrome限定
- プレビュー版: 機能が限定的
- ネットワーク要件: インターネット接続必須
- リソース消費: メモリ使用量増加
セキュリティ考慮事項
# 注意が必要な点
- 機密情報の画面キャプチャ
- 内部ネットワークへのアクセス
- 認証情報の取り扱いまとめ
Chrome DevTools MCPは、AIコーディングアシスタントとブラウザデバッグツールを橋渡しする革新的な技術である。
主要メリット
- 自動化: 手動デバッグ作業の削減
- 精度向上: AIによる正確な問題特定
- 効率化: 開発サイクルの高速化
- 学習効果: デバッグ技術の向上
推奨する使用者
- フロントエンド開発者: UI/UX最適化
- パフォーマンスエンジニア: 速度改善
- QAエンジニア: 自動テスト強化
- 初心者: デバッグ技術習得
まだプレビュー版だが、将来的にはweb開発において必須のツールになりそうだ。
参考
Chrome DevTools MCP 公式ブログ
https://developer.chrome.com/blog/chrome-devtools-mcp?hl=jaChrome DevTools MCP GitHubリポジトリ
https://github.com/ChromeDevTools/chrome-devtools-mcpツールリファレンス（完全版）
https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.mdトラブルシューティングガイド
https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md貢献ガイド
https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/CONTRIBUTING.mdModel Context Protocol ドキュメント
https://modelcontextprotocol.io/docs/getting-started/intro変更履歴（Changelog）
https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/CHANGELOG.md
おわりに
Chrome DevTools MCPは、Web開発+AI開発でかなり使えそうな雰囲気がある。
現在はプレビュー版だが、今後の発展に期待したい。
Visual Studio CodeとGitHub Copilotとの組み合わせにより、効率的な開発フローが実現できそうだ。
今まではChromeのDevToolsを目で見て解析としてやっており、本人の能力により見落としがあることがあったが、MCPサーバにより解析できるようになったので、これで開発における品質が向上しそう。
業務では簡単な診断から始めて、徐々に高度な機能を活用をしてみようかと考えている。
