devtools-mcp について
devtools-mcp は、LLM に Chrome DevTools Protocol へのアクセスを提供する MCP サーバーです。AI アシスタントからローカルの Chrome を操作したい開発者向けで、スクリーンショットや PDF などの大きなバイナリデータはファイルに保存されます。
主な機能
- 01単一の cdp_command ツールによる任意の CDP コマンドの実行
- 02スクリーンショットなどのバイナリデータのファイル保存
- 03生データではなくファイルパスを返却
活用シーン
- 01AI アシスタントによるページ遷移とスクリプト評価
- 02スクリーンショットや PDF の取得によるページ状態の確認
MCP 対応
本プロジェクトは MCP サーバーであり、cdp_command ツールを MCP クライアントに公開します。クライアントはこのツールを通じて CDP のメソッド名とパラメータを送信します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
インストール方法は未掲載です
このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。
ツール
ツール一覧はまだ取得されていません
ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。
詳細
devtools-mcp
LLM に Chrome DevTools Protocol へのアクセスを提供する MCP サーバーです。
cdp_commandツールを通じて任意の CDP コマンドを実行できます- バイナリデータの自動処理 - 大きなレスポンス（スクリーンショット、PDF）はファイルに保存されます
セットアップ
- リモートデバッグを有効にして Chrome を起動します:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--remote-debugging-port=9222 \
--remote-debugging-address=127.0.0.1 \
--user-data-dir=/tmp/chrome-debug \
--no-first-run \
--disable-default-apps
- 依存関係をインストールします:
npm install
- ローカル MCP サーバーとして追加します。たとえば Claude Code の場合:
claude mcp add devtools-server -- npx tsx ~/projects/devtools-mcp/src/index.ts
使い方
このサーバーは、以下のパラメータを受け付ける単一の cdp_command ツールを公開します:
method: 任意の CDP コマンド（例: "Page.navigate"、"Runtime.evaluate"）params: コマンドパラメータの JSON 文字列（省略可能）
バイナリデータ（スクリーンショットなど）は自動的に ./cdp-output/ に保存され、生データの代わりにファイルパスの参照が返されます。
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。