DevTools MCP サーバーまたはその専用の CLI とスキルを使用して、コーディング エージェントに DevTools の機能を提供します。

詳しくは、GitHub をご覧ください。
Chrome DevTools は、MCP サーバーをサポートするすべてのエージェント（Gemini CLI、Antigravity、Claude Code、Codex など）と連携します。MCP サーバーを使用して、セッションごとに DevTools の機能をエージェントに通知します。
MCP サーバーの代わりに、トークン効率の高い Chrome DevTools CLI を使用することもできます。Chrome DevTools MCP サーバー パッケージには、MCP サーバーと同じ強力なツールを使用してスクリプトを作成する方法をコーディング エージェントに教える専用のスキルが含まれています。

今すぐインストール

MCP サーバーと CLI は同じパッケージに含まれています。選択したコーディング エージェントのコードを取得します。よく使用されるエージェントの手順については以下をご覧ください。20 種類以上のエージェントの手順については、GitHub をご覧ください。

  # Either MCP only:
  gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
  # Or as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
 
  # Either MCP only:
  claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
  # Or as a plugin (MCP+Skills):
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  /plugin install chrome-devtools-mcp
 
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

DevTools MCP サーバーまたは CLI をインストールしたら、いくつかのプロンプトを試して、使ってみましょう。エージェントから Lighthouse 監査を依頼したり、フォームに記入したり、スクリーンショットを依頼したりできます。これらの機能を実際に試すには、たとえば次のようなプロンプトを入力します。

  Visit developer.chrome.com and run a search for "devtools",
  while recording a performance trace.
  Let me know how I can improve the website's performance.

このプロンプトでは、ツールを使用して新しいページを作成し、検索バーを操作して、CrUX データを含むパフォーマンス トレースを実行します。


利用可能なすべてのツールを表示する