Chrome DevTools MCPとは

Chrome DevTools MCPは、AIエージェントに実際のChromeブラウザを操作・検査させるためのツールです。GoogleのChromeチームが開発し、Apache-2.0ライセンスで公開されています。

MCP（Model Context Protocol）は、AIエージェントと外部ツールをつなぐ共通規格です。Chrome DevTools MCPは、この規格に沿って提供されるMCPサーバーの一つにあたります。

導入すると、Claude CodeやCursorなどのAIエージェントが、ページを開いてパフォーマンスを計測したり、コンソールのエラーを読んだりできるようになります。生成したコードが実際にどう動くかを確認できない、という制約がなくなります。

更新の頻度が高く、提供されるツールや起動オプションはバージョンによって変わります。本記事は2026年7月時点のv1.6系で確認した内容です。

事前準備

Chrome DevTools MCPは、Node.jsの上で動きます。対応しているのは、20.19以上、22.12以上、23以上のいずれかとなるため、ターミナル（Windowsの場合はPowerShell）で以下のコマンドを実行し、バージョンを確認してください。

node -v

対応バージョンを下回る場合、もしくはNode.jsが入っていない場合は、Node.js公式サイトからLTS版をインストールしてください。インストール後にターミナルを開き直すと、新しいバージョンが反映されます。

設定の共通フロー

多くのAIツールでは、次のJSONを登録すれば動きます。違うのは登録場所だけです。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--no-usageStatistics",
        "--no-performanceCrux"
      ]
    }
  }
}

Chrome DevTools MCPは既定で、利用状況の統計を送信します。さらにパフォーマンス計測を行うと、計測したページのURLをGoogleのCrUX APIに送ります。

業務で使用する場合、計測対象が公開前のページになることがあります。開発中の画面や社内のステージング環境、未公開の機能を含むURLが、意図せず外部のサービスに渡ることになります。URLにプロジェクト名や機能名が含まれていれば、それだけで社外に知られたくない情報が伝わってしまいます。

末尾の--no-usageStatisticsが統計の送信を、--no-performanceCruxがURLの送信を止めます。

次に紹介するコマンドで追加する場合も、同じ2つのフラグを末尾に付けられます。

AIツール別の設定手順

コマンドを打たずに画面の操作で済ませたい場合は、Claude DesktopかCursorの項目に進みます。

Claude Code

ターミナルで次のコマンドを実行します。

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

--scope userは、プロジェクト単位ではなくユーザー全体で使えるようにする指定です。追加後にClaude Codeを再起動し、/mcpで「connected」と表示されれば成功です。

Claude Desktop

設定画面（Settings）のDeveloperタブで「Edit Config」を押すと、設定ファイルのあるフォルダが開きます。claude_desktop_config.jsonをテキストエディタで開いて共通設定JSONを貼り付け、保存後にClaude Desktopを完全に終了して起動し直すと反映されます。

設定ファイルは次の場所にもあります。

• Windows: %APPDATA%\Claude\
• macOS: ~/Library/Application Support/Claude/

Cursor

設定画面（Settings）のMCP項目に共通設定JSONを貼り付けて保存すると、どのプロジェクトでも使えます。特定のプロジェクトだけで使う場合は、そのフォルダ直下の.cursor/mcp.jsonに同じ内容を書きます。

VS Code（GitHub Copilot）

コマンドで追加できます。GUIのMCP設定画面から共通設定JSONを登録する方法もあります。

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","chrome-devtools-mcp@latest"]}'

Gemini CLI

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

--より後ろが、実際に起動するコマンドです。Windowsで環境変数や起動の待ち時間を調整したいときは、.codex/config.tomlに直接記述します。

[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot = "C:\\Windows", PROGRAMFILES = "C:\\Program Files" }
startup_timeout_ms = 20_000

なお、ChatGPTは、Web版とデスクトップアプリ（Windows・Mac）のいずれも、この方法では利用できません。ChatGPTのMCP対応は公開されたリモート型のサーバー専用で、Chrome DevTools MCPのように手元のPCで動くローカル型のサーバーを直接起動できないためです。

設定できたか確かめる

AIツールを再起動し、以下の内容で指示をだしてみましょう。

example.comのパフォーマンスを計測して

Chromeが自動で立ち上がり、LCPなどの計測結果が返ってくれば成功です。

Chrome DevTools MCPでできること

DevToolsの機能が種類ごとにツールとして提供され、エージェントが指示に応じて組み合わせて使います。指示例のexample.comは、調べたいページのURLに読み替えてください。

パフォーマンス計測

表示速度のトレースを記録し、Core Web Vitals（LCP＝主要コンテンツの表示時間、INP＝操作への反応速度、CLS＝表示のずれ）の要因を分析します。

example.comのパフォーマンスを計測して、LCPの内訳を教えて

ネットワーク検査

送受信されたリクエストの一覧と、個別リクエストの詳細を取得します。

example.comで失敗しているリクエストを一覧にして

コンソールメッセージの取得

コンソールに出たメッセージやエラーを、発生箇所をたどれる形で読みます。

example.comを開いて、コンソールに出ているエラーを教えて

画面の把握

スクリーンショットや、DOM構造のスナップショットを取得します。

example.comのスクリーンショットを撮って

入力自動化

クリック、フォーム入力、ファイルのアップロードなどを実行します。

example.comの問い合わせフォームに入力して送信して

環境エミュレーション

CPUやネットワークの速度制限、画面サイズの変更を行います。

CPUを4倍遅くして、幅375pxでexample.comを表示して

ページ操作

複数のタブやページを開いて切り替えます。

example.comを新しいタブで開いて、一覧ページと詳細ページを行き来して

監査とメモリ解析

Lighthouse（ページ品質を自動採点するツール）による監査や、ヒープスナップショット（メモリ使用状況の記録）によるメモリ調査を行います。

example.comをLighthouseで監査して、改善点を教えて

提供されるツールの数や名前はバージョンで変わります。正確な一覧は、公式のツールリファレンスにまとまっています。

実際の活用例

生成コードの実挙動を即検証する

AIにコードを書かせたあと、「変更がブラウザで期待どおり動くか確認して」と指示します。エージェントがページを開いて操作し、結果を報告するため、自分でブラウザを開いて確かめる往復が減ります。

パフォーマンスを計測してLCPを改善する

「example.comの読み込みが遅いので、原因を調べて速くして」と指示すると、エージェントがパフォーマンストレースを記録します。

このときエージェントは、LCP（主要コンテンツの表示時間）の内訳を分析します。描画をブロックしているCSSやJavaScriptがあるのか、サーバーからの応答が遅いのか、画像の読み込み開始が遅れているのか、といった要因に分解されます。そのうえで、どこを直せば速くなるかの具体案まで提示されます。

コンソールとネットワークのエラーを調査する

「example.comで画像が数枚読み込めない。何が起きているか調べて」と指示します。エージェントがコンソールメッセージとネットワークリクエストを突き合わせ、404や500、CORSエラーといった原因を特定します。ソースマップ（変換前のコードと実行コードの対応情報）に対応しているため、エラーの発生箇所を元のコードで追いやすくなります。

フォーム操作の失敗を再現しUIを自動検証する

「メールアドレスを入力したあと、送信ボタンを押すと失敗する。原因を調べて」と指示すると、エージェントが入力と送信を再現し、発生したエラーやネットワークの失敗を確認します。入力から結果画面までを自動でたどらせ、スクリーンショットで見た目の崩れを確認する使い方もできます。

設定がうまくいかないときの確認ポイント

設定を書いたのに認識されない

設定は再起動後に読み込まれます。AIツールを完全に終了してから起動し直したかを確かめます。

それでも認識されない場合は、JSONを見直します。多いのは、カンマの付け忘れと、波かっこの数が合っていないことの2つです。Claude Codeなら/mcpで接続状態を確認できます。

「node」が見つからないと表示される

Node.jsが入っていないか、ターミナルがNode.jsを見つけられていません。事前準備に戻り、node -vで番号が表示されるかを確認します。ターミナルを開き直しても表示されない場合は、パソコン自体の再起動で認識されることがあります。

「Could not find Chrome」と表示される

対応するChromeが見つかっていません。公式にサポートされるのは、通常のGoogle ChromeとChrome for Testingの2つです。

入れているのに表示される場合は、共通設定JSONのargsに次の1行を足して、Chromeの場所を直接指定します。パスは環境に合わせて変えます。

• Windows: --executablePath=C:\Program Files\Google\Chrome\Application\chrome.exe
• macOS: --executablePath=/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

ブラウザの画面を出したくない

既定ではブラウザ画面を表示して起動します。argsに--headless=trueを足すと、画面を出さずに動きます。

"args": ["-y", "chrome-devtools-mcp@latest", "--headless=true"]

画面を持たないサーバーやCI環境で動かす場合も、この指定か仮想ディスプレイが必要になります。

業務利用で押さえておきたい注意点

実際のブラウザを操作させるリスク

Chrome DevTools MCPは、ブラウザで表示中の内容やCookie、セッションをAIクライアントに渡し、閲覧や変更を許します。ログイン済みのプロファイルを使えば、エージェントは認証済みの状態で操作します。公式も、共有したくない機微な情報や個人情報を扱うブラウザでは使わないよう案内しています。

専用プロファイルで隔離する

argsに--isolated=trueを加えると、一時的なプロファイルで起動し、終了時にその内容を破棄します。普段使いのブラウザと切り離せます。

送信される情報を止める

共通フローで加えた--no-usageStatisticsと--no-performanceCruxが、統計とURLの送信を止めています。使用統計は環境変数CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICSでも無効にできます。フラグ名はバージョンで変わることがあるため、最新の名称はREADMEで確認できます。

仕様が変わりやすい点

ツール構成や起動オプションは更新で変わります。チームで使うときは、動作確認したバージョンを記録しておくと、後から挙動が変わったときに原因を追いやすくなります。

Playwright MCP・Puppeteer MCPとの違いと使い分け

操作の自動化が主目的ならPlaywright系、パフォーマンスやエラーを計測して原因を調べたいならChrome DevTools MCPです。

PlaywrightとPuppeteerを使うMCPサーバーは、ページ遷移やクリックの再現が得意で、E2Eテスト（画面操作を通した一連の動作確認）のような用途に向きます。

Chrome DevTools MCPの強みは、DevTools本来の計測と分析です。パフォーマンストレース、ネットワークやコンソールの検査、Lighthouse監査、ヒープメモリ解析など、DevToolsのパネルで行う調査をエージェントに任せられます。

まとめ

• パフォーマンス計測、エラー調査、UI自動検証など、DevTools本来の調査をエージェントに任せられる
• 導入は共通のJSON設定かコマンドで行い、ツールごとに登録場所が違うだけ
• 実際のブラウザを触らせるため、専用プロファイルでの隔離と送信情報のオプトアウトを前提にする

まずは、普段使っているAIエージェントに導入し、気になるページを指定して「このページの読み込みが遅い理由を調べて」と指示してみてください。