ホームMCPChromeDevTools/chrome-devtools-mcp
// archived 2026-04-18
ChromeDevTools

chrome-devtools-mcp

AI#MCP#Chrome DevTools#Puppeteer#Automation#Browser Debugging
GitHub で見る →
83

// 概要

Chrome DevTools for Agents は、AI コーディングアシスタントが実行中の Chrome ブラウザインスタンスを制御および検査できるようにする MCP サーバーです。ブラウザの自動化、パフォーマンス分析、詳細なデバッグのための包括的なツールスイートを提供します。このプロジェクトは、信頼性の高いブラウザ操作を通じて開発者のワークフローを強化するため、さまざまな AI コーディングプラットフォームとのシームレスな統合をサポートしています。

// 技術解説

Chrome DevTools for Agents (chrome-devtools-mcp) は、AI コーディングアシスタントと Chrome ブラウザの橋渡しをするために設計された Model-Context-Protocol サーバーです。Puppeteer と Chrome DevTools protocol を活用することで、エージェントは複雑なブラウザ自動化、パフォーマンス分析、デバッグタスクをワークフロー内で直接実行できます。このアーキテクチャにより、開発者はブラウザをインタラクティブなツールとして扱うことが可能になり、AI モデルはネットワークトラフィックの検査、スクリーンショットのキャプチャ、スクリプトの実行を行って、現実の Web 開発の課題を解決できるようになります。

// 主要ハイライト

01
Chrome DevTools を使用してトレースを記録し、実用的なデータを抽出することで、包括的なパフォーマンスの洞察を提供します。
02
ネットワークリクエストの分析や、ソースマップ付きスタックトレースを用いたコンソールメッセージの検査など、高度なブラウザデバッグを可能にします。
03
Puppeteer を介した信頼性の高いブラウザ自動化を促進し、アクション結果の自動待機機能を含みます。
04
幅広い入力およびナビゲーションツールをサポートしており、エージェントはフォーム、ボタン、ドラッグ&ドロップインターフェースなどの Web 要素を操作できます。
05
ヘッドレスモードや、特殊なワークフローのために既存のブラウザインスタンスに接続する機能など、柔軟な設定オプションを提供します。
06
標準化された Model Context Protocol を通じて、さまざまな AI コーディングアシスタントや IDE とシームレスに統合します。

// ユースケース

01
Puppeteer を使用したブラウザ操作とナビゲーションの自動化
02
ネットワークリクエストと console メッセージを分析することによる詳細なデバッグの実行
03
Web アプリケーションのパフォーマンスに関するインサイトとトレースの生成

// クイックスタート

開始するには、Node.js v20.19 以降と最新バージョンの Chrome がインストールされていることを確認してください。コマンド 'npx' に引数 'chrome-devtools-mcp@latest' を指定して、MCP クライアント設定にサーバーを追加します。設定が完了したら、AI アシスタントに特定の Web サイトのパフォーマンスチェックなどのタスクを実行させることで、統合をテストできます。