MCP

Chrome DevTools MCP

AIにChromeの開発者機能を使わせる

イメージアート（当サイト作成）

Google公式。AIがWebページの中身や通信を調べられるようになる。

#Google公式#デバッグ

これは何？AIに道具を持たせる接続部品（MCP）

できること

「このページが重い理由を調べて」と頼むと、AIが実際にChromeでページを開き、表示速度やエラー、通信の中身を確認して答えてくれる。人がF12の画面を見て調べていた作業を任せられる。

誰に効く？

Web開発のデバッグをAIに手伝わせたい人

用意するもの

と、ClaudeやCursorなどに対応したAI。Chromeも必要

時間のめやす

10〜20分

使うとこうなる

1Node.jsを入れる
2claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest のように、使っているAIに登録する
3AIとの会話で「このページの表示が遅い原因を調べて」のように頼む

作れるもの・できることの例

表示が遅い原因の切り分け、リンク切れやエラーの洗い出し、スマホ表示での崩れの確認

使えるようになるまでの手順をひらく

こんな人には向かないかも

迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。

むずかしそう？同じジャンルで、もっと始めやすいのはこちら

注意点

Web制作をする人向け。AIが実際にブラウザを操作して外部サイトを開くため、社内システムなど見せたくないページでは使わないこと。

Google（Chrome開発チーム）の公式提供。動作は手元のChromeで、AI側には調べた結果が渡る。

このツールが活躍する場所

Chrome DevTools MCPは無料で使えますか？: 無料で使えます。自分のパソコンの中で動くタイプなので、使った量に応じた料金もかかりません。
Chrome DevTools MCPを使うのに、インストールや専門知識は必要ですか？: Claude などMCPに対応したAIアプリに接続して使います。単体では動きません。
Chrome DevTools MCPはスマホでも使えますか？: スマホには対応していません。パソコンが必要です。
Chrome DevTools MCPは仕事（商用）で使えますか？: ライセンスは Apache-2.0 で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。