MCP

Chrome DevTools MCP

クロームデブツールズエムシーピー

Chrome 専用の MCP Server です。ログ取得やパフォーマンス計測を AI から操作できます。

体験区分：触った推奨読者レベル：Level 3-5

Google 公式の `chrome-devtools-mcp` が CDP でブラウザを操作します。コンソールログとパフォーマンストレースを AI の指示で取得できます。

フロントエンドのバグ調査や LCP（最大コンテンツ描画）計測を AI に任せる場面です。`npx chrome-devtools-mcp@latest` で起動し CDP で接続します。

構造図

2026.04·ready

「LCP の遅さを Chrome DevTools MCP で計測してもらえると助かります。」

Chrome DevTools MCPの見方

541

この用語の見どころ

役割

Chrome を AI から操作し、低レベルな計測データを取得する仲介役です。

うれしさ

パフォーマンストレースやコンソールログを AI が自動収集できます。

注意点

Chrome 専用のため、Firefox や Safari の動作確認には使えません。

どこで役立つか

フロントエンドの速度改善やバグ調査の作業で役立ちます。

はじめに

Playwright MCP との違いは「クロスブラウザか Chrome 特化計測か」です。

深掘り先

MCP Server、Playwright MCP、Chrome DevTools Protocol

非エンジニアのつまずき

私のコメント

開発フローでの位置

環境準備

→

接続確立

→

AI に指示

→

結果受け取り

→

修正と再計測