Chrome DevTools for agents 1.0 が出た — Claude Codeの表示確認フローに何を足せるか

開発claude-code-tools

Chrome DevTools for agents 1.0 が出た — Claude Codeの表示確認フローに何を足せるか

Googleが「Chrome DevTools for agents」の安定版1.0を発表した。中身はChrome DevTools MCPサーバーの安定版に、CLIとエージェント向けスキル集を加えたパッケージだ。このサイトの開発では表示確認にChrome DevTools MCPを毎日使っているので、何が増えたのかをClaude Codeに調べさせた。

結論を先に書く。

  • MCPサーバーを npx chrome-devtools-mcp@latest で登録している環境なら、Lighthouse監査・デバイスエミュレーション・ヒープスナップショットの新ツールは既に導入済みだった。追加作業はない
  • 新しく導入する意味があるのはClaude Code向けプラグインで、パフォーマンス改善やメモリリーク調査のスキル6本が同梱される。コマンド2行で入る
  • このサイトの運用に一番効きそうなのはデバイスエミュレーションで、スマホ表示の確認をエージェントに任せられるようになる

Chrome DevTools for agents 1.0 とは

2026年5月19日付の→ Chrome for Developersブログで発表された。AIコーディングエージェントにブラウザのデバッグ能力を渡すための3点セットだ。

  1. MCPサーバー（chrome-devtools-mcp）の安定版1.0。ツール数は45以上
  2. CLI。MCPを話さない環境からもコマンドラインでDevToolsを叩ける
  3. エージェント向けスキル。ツールを「いつ・どう使うか」をエージェントに教える手順書

ブログでは「ランタイムを理解するリンター」という位置づけで説明されている。コードを書いたエージェント自身が、実際にブラウザで動かして品質を確かめるところまでやる、という思想だ。「書いたら自分の目で描画確認する」をエージェントにやらせるための道具立てと言い換えてもいい。

1.0で増えた主なツール

→ GitHubリポジトリとブログ記事から、今回の目玉を4つ拾った。

Lighthouse監査（lighthouse_audit）

パフォーマンス・アクセシビリティ・SEO・ベストプラクティスの監査をエージェントが自分で実行できる。今まではLighthouseを人間がDevToolsパネルから手で回していたが、「デプロイしたらLighthouseを回して、スコアが落ちていたら原因を調べて」という頼み方ができるようになる。

デバイス・地域エミュレーション（emulate）

ウィンドウサイズの変更に加えて、デバイスや位置情報のシミュレーションができる。ブログの例は「手でブラウザをリサイズせずに、ハンバーガーメニューのようなモバイル固有の動作をテストする」というもの。

ヒープスナップショット（take_heapsnapshot）

メモリリークの調査用。スナップショットを取って比較する一連の流れをエージェントが実行できる。プラグイン同梱のメモリリーク調査スキルとセットで使う想定になっている。

Chrome拡張機能のデバッグ

拡張機能のインストール・リロード・アクションの発火をエージェントが直接実行できる。拡張機能を開発しているなら、編集→リロード→動作確認のループをエージェントに閉じてもらえる。

このほか、ページ側が構造化ツールをエージェントに直接公開する「WebMCP」のオリジントライアルも始まっている。DOMを推測しながら操作する代わりに、ページが用意したツールを直接呼ぶ仕組みだ。ただしこちらは提供側（サイト側）の話なので、静的サイトの運用ではまだ様子見でいい。

導入方法

Claude Codeの場合

Claude Code向けには、プラグインとして入れる方法が公式ブログで案内されている。マーケットプレイスを登録してインストールするだけ。

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

このプラグインにはMCPサーバー本体とスキル6本が同梱される。リポジトリの skills/ ディレクトリにあるのは次の6つ。

スキル用途
chrome-devtoolsDevToolsツール全般の使い方
chrome-devtools-cliCLI経由の操作
debug-optimize-lcpLCP（最大コンテンツの描画）の調査と改善
memory-leak-debuggingメモリリークの調査
a11y-debuggingアクセシビリティの調査
troubleshooting接続まわりのトラブル対応

注意点がひとつ。 すでに claude mcp add などで chrome-devtools MCPサーバーを手動登録している場合、プラグインを入れるとサーバー登録が二重になる。プラグイン導入後は手動登録側を claude mcp remove で外すか、どちらか片方に寄せる。

MCPサーバーだけでよければ従来どおり

スキルが不要なら、これまでどおりMCPサーバーの直接登録で足りる。

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

@latest で登録していれば、サーバー本体は起動のたびに最新版が使われる。ツールを3本に絞る --slim モードも用意された。

Gemini CLIの場合

gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

自分の環境を確認したら、半分は導入済みだった

Claude Codeにこの環境の登録状況を確認させたところ、次のことが分かった。

  • MCPサーバーは npx -y chrome-devtools-mcp@latest --autoConnect でグローバル登録済み。@latest 指定なので、セッションのツール一覧には lighthouse_audit・emulate・take_heapsnapshot がもう生えていた。1.0の新ツール側は、気づかないうちに導入が終わっていたことになる
  • 一方、プラグイン（スキル6本）は未導入。こちらが今回の実質的な追加分

つまり @latest 運用なら「導入方法」はプラグインのコマンド2行に集約される。

このサイトの運用にどう効くか

このサイトでは、表示に触れる変更をしたら報告前にChrome DevTools MCPで実際の描画を確認する、という運用ルールを敷いている。1.0の新ツールはこのフローの拡張として使える。

  • スマホ表示の確認を検証フローに組み込める。 過去にホバー依存のツールチップを作ってしまい、スマホで内訳が見えないと指摘を受けたことがある。emulateでモバイルビューポートの確認まで検証手順に入れれば、この種の見落としをエージェント側で拾える
  • デプロイ後のLighthouse監査を定型化できる。 記事1,000本超のSSGサイトなので、デプロイ後にトップと主要ページで監査を回し、スコアの劣化を検知する使い方が合う
  • 重いチャートページの調査にLCPスキルが使える。 財務データのチャートを大量に載せたページの表示速度を調べるとき、debug-optimize-lcpスキルが調査の型を提供してくれる

逆に、ヒープスナップショットとWebMCPは静的サイトの運用では出番が少ない。長時間開きっぱなしにするSPAを作るときに思い出せばいい。

まとめ

  • Chrome DevTools for agents 1.0の実体は、MCPサーバーの安定版＋CLI＋スキル6本
  • @latest でMCP登録済みなら新ツールは自動で入っている。確認するだけでいい
  • 追加で入れる価値があるのはClaude Codeプラグインのスキル。ただしMCPサーバーの二重登録に注意
  • 表示確認フローを持っているなら、emulateによるスマホ確認とデプロイ後のLighthouse監査は組み込む価値がある