Chrome_DevTools_MCP_を使い倒す

Chrome DevTools MCPを活用したAIエージェントによるブラウザ操作とデバッグの方法についての紹介です。

以下、要約です。

Chrome DevTools MCPの特徴
Chrome DevTools MCPは、AIエージェントがChromeブラウザを制御・検査するためのサーバーです。 ​

Puppeteerを活用し、自動化とデバッグを実現。
26個のツールがあり、6つのカテゴリに分類されている。
入力自動化、ナビゲーション自動化、エミュレーション、パフォーマンス分析、ネットワーク、デバッグの機能を提供。 ​

主要なツールと機能の分類
Chrome DevTools MCPには、さまざまなブラウザ操作・デバッグツールが含まれています。 ​

入力自動化（7ツール）: click, drag, fillなど。 ​
ナビゲーション自動化（7ツール）: close_page, navigate_pageなど。 ​
エミュレーション（3ツール）: emulate_cpu, resize_pageなど。 ​
パフォーマンス（3ツール）: performance_analyze_insightなど。 ​
ネットワーク（2ツール）: get_network_requestなど。
デバッグ（4ツール）: evaluate_script, take_screenshotなど。 ​

通常の使用方法と利点
Chrome DevTools MCPは、開発ワークフローを効率化し、品質向上を実現します。 ​

フロントエンドのエラーを即座に特定し修正可能。
パフォーマンス分析を行い、ページの読み込み速度を最適化。
スクリーンショットを取得し、UI/UXの崩れを検証。

ストリートファイター6のウェブサイト分析
ストリートファイター6のウェブサイトのパフォーマンスを評価した結果です。

初期表示パフォーマンス: TTFB 395ms, FCP 1.06s, Load Event 2.55s。 ​
モバイル再計測では、TTFB 376ms, FCP 0.45sを記録。
リソース総数155件、合計転送量約12.3MB。
大判画像がボトルネックで、最適化が必要。

RPA的な使い方と設定方法
Chrome DevTools MCPを使用して、業務処理の自動化が可能です。 ​

2025年10月17日11:00-12:00に予定を登録する例。
Googleドライブのドキュメントを基に進捗共有ボードを作成。
プロファイルを永続化し、ログイン状態を保持する設定が必要。 ​

まとめと今後の展望
Chrome DevTools MCPは、AIエージェントにブラウザの制御能力を提供し、フロントエンド開発を快適にします。 ​

26個のツールにより、幅広い機能を実現。
LLMを活用した柔軟なブラウザ自動化が可能。

Transcript

1. Chrome DevTools MCP を使い倒す AIエージェントで ブラウザ操作とデバッグ 第1回 Fukuoka MCP Community 2025/10/16 （木）
2. 自己紹介 高田尚幸 SNS: エヌハチ 生成AIを使ったプロダクト開発やAI駆動開発のメンターとして活動しています。 開発者はもちろん、誰でもAIを活用して生産性を大幅に向上させる取り組みをしています。 最近の趣味: SF6の大会を見る、MHWs
3. AI用の USB-C ポート MCPとは Model Context Protocol（MCP）は、 LLMと外部システムを接 続するためのオープンプロトコル。 2024年11月に Anthropicが発表し、 AIと外部データソースやツールの連携を 標準化しました。 アーキテクチャ クライアント・サーバモデルに基づき、 MCPホスト、MCPクライアント、 MCPサーバで構成されます。通信は JSONRPC 2.0プロトコルを使用 します。 主要機能 リソース（データ参照）、ツール（アクション実行）、プロンプト（応答テン プレート）の 3つの機能を提供し、 AIの能力を大幅に拡張します。
4. Chrome DevTools MCP Chrome DevTools MCPは、 AIエージェントがライブの Chrome ブラウザを制御・検査 するための MCPサーバーです。 Puppeteer を活用し、信頼性の高い自動化と詳細なデバッグを実現します。 パフォーマンスインサイトの取得 高度なブラウザデバッグ 信頼性の高い自動化 26個の豊富なツール
5. Chrome DevTools MCP 26個のツール 6つのカテゴリに分類された強力なブラウザ操作・デバッグツール群 01 入力自動化（ 7ツール） click, drag, fill, fill_form, handle_dialog, hover, upload_file 02 ナビゲーション自動化（ 7ツール） close_page, list_pages, navigate_page, navigate_page_history, new_page, select_page, wait_for 03 エミュレーション（ 3ツール） emulate_cpu, emulate_network, resize_page 04 パフォーマンス（ 3ツール） performance_analyze_insight, performance_start_trace, performance_stop_trace 05 ネットワーク（ 2ツール） get_network_request, list_network_requests 06 デバッグ（ 4ツール） evaluate_script, list_console_messages, take_screenshot, take_snapshot
6. 通常の使い方 Chrome DevTools MCPは、 開発ワークフローを効率化 し、品質向上を実現します。 01 フロントエンドのエラー確認と修正 コンソールメッセージを取得し、 JavaScriptエラーやネットワークエ ラーを即座に特定して修正できます。 02 パフォーマンス分析 トレースを記録し、実用的なパフォーマンスインサイトを抽出して、 ページの読み込み速度やレンダリング性能を最適化します。 03 UI/UXの崩れチェック スクリーンショットを取得し、異なる画面サイズやデバイスでのレ イアウト崩れを検証します。
8. chrome devtools mcp を使って、予定を登録 して。
 
 日付は2025/10/17 11:00-12:00で、内容は googleドライブを開いて「日次進捗会議テンプ レート」というドキュメントの、進捗共有ボードを 基に作成して。
 
 参加者も同ドキュメントに書いてある メンバーを 招待して。
 RPA的な使い方 Chrome DevTools MCPは、 LLMによるRPAを実現 柔軟な業務処理を可能にします。が、遅い！ LLMによる判断 状況に応じた柔軟な処理を自動実行 ログイン状態の維持 認証済みセッションでの自動操作 反復タスクの自動化 フォーム入力、データ収集を自動実行 複雑なワークフロー 複数ページにまたがる業務処理を実現 プロンプト 

9. ログイン保持と注意点 chrome-devtools-mcpの設定で、プロファイル、ログイン情報を保持 したまま、何度でも自動操作可能。 [mcp_servers.chrome-devtools] command = "npx" args = ["-y", "chrome-devtools-mcp@latest", "--chromeArg=--user-data-dir=/Users/takadanaoyuki/.chro me-profiles/automation-stable", "--headless=false"] 01 --user-data-dir= を明示 プロファイルを永続化することができる。最初の 1回だけ必要なロ グインを済ませることで、その後はログイン状態で操作可能。 02 既存のプロファイルは使えない 既存のデータディレクトリに対し、 --remote-debugging-port で 接続するのは禁止された。代わりに専用プロファイルを 1回だけロ グインして使い回すのが現実的。 03 １つのウィンドウしか開けない 専用プロファイルのウィンドウが既に開いている状態で、新しい セッションで mcpを使おうとすると、ウィンドウを閉じないと何もで きないと文句を言われる。
10. まとめ Chrome DevTools MCPは、AIエージェントにブラウザの制御と検査能力を提供する 26個のツールにより、入力自動化からパフォーマンス分析まで幅広い機能を実現する RPA的な使い方により、LLMを活用した柔軟なブラウザ自動化が可能になる（だが遅い） AIエージェント x Chrome DevTools で快適なフロントエンド開発を！
11. Codexでの設定方法 Codexエディタでchrome-devtools-mcpを設定し、 AIエージェントにブ ラウザ操作機能を追加します。 CLIコマンド codex mcp add chrome-devtools 設定ファイル .codex/config.toml に追記 インストール npxで最新版を自動取得 即座に利用可能 再起動後すぐに使用開始 [mcp_servers.chrome-devtools] command = "npx" args = ["-y", "chrome-devtools-mcp@latest", "--chromeArg=--user-data-dir=/Users/takadanaoyuki/.chro me-profiles/google-ads-stable", "--headless=false"]