ターミナルで Claude Code に「このページのコンソールエラー読んで」とお願いしても、これまでは自分で開いた DevTools のスクリーンショットを貼るか、エラーを手で書き写すしかありませんでした。Google が 2026 年 5 月 22 日に Chrome DevTools for agents 1.0 を安定版として公開したことで、その手間がいよいよ消えそうです。
私は 2014年から iOS/Android アプリ事業を続けている個人開発者で、Lab 4 サイト（Claude/Gemini/Antigravity/Rork）の本番デプロイは Cloudflare Workers で毎日のように回しています。リリース当日に Claude Code から触ってみました。MCP 経由と CLI 経由のどちらでも動きましたが、初見でつまずきやすいポイントがいくつかあったので、Antigravity 2.0 にバンドルされている版との挙動差も含めて手順をまとめます。
Chrome DevTools for agents 1.0 とは
ざっくり言うと、AI エージェントが Chrome を操作するための公式デバッグツール です。Forest Watch のニュース記事によると、ユーザー操作の再現、Web サイトの品質評価（Lighthouse 監査）、デバイス・位置情報シミュレーション、拡張機能のデバッグ、メモリリーク検出までを安定版でカバーしました。
これまで似た用途では Playwright MCP、Claude in Chrome、社外製の Chrome 操作 CLI などが乱立していて、はてなブックマークのコメント欄でも「使い分けが難しい」という声が出ていました。今回の安定版で「Google が出した公式ツール」というステータスが乗ったので、Claude Code の標準的な選択肢として置き換わっていくと思っています。
Claude Code からのインストール手順
Claude Code には MCP サーバーを管理する内部コマンドがあるので、ターミナルから一発で導入できます。
# MCP として登録（推奨：ツール呼び出しが整理される）
claude mcp add chrome-devtools \
--command "npx" \
--args "-y" "chrome-devtools-mcp@latest"
# CLI として直接利用する場合
npm install -g chrome-devtools-cli
chrome-devtools --helpClaude Code を再起動すると、/mcp コマンドで chrome-devtools が一覧に出てきます。/mcp chrome-devtools tools でツール一覧を確認できるので、最初に何が呼べるかを把握しておくと迷いません。Antigravity 2.0 を使っている人は、こちらは既定でバンドル済みなので追加インストールは不要です。
MCP と CLI どちらで使うか
両方触った感触で言うと、Claude Code の常用なら MCP 一択です。理由は3つあります。
- ツール一覧が Claude Code に自動で渡るので、「このページのパフォーマンスを見て」と自然言語で頼める
- 各ツールのスキーマが整理されていて、Claude が引数を組み立て間違えにくい
- MCP 経由のレスポンスはモデルが直接読める形式（JSON）で返ってくる
CLI が向くのは、CI に組み込んで Lighthouse スコアをデプロイのゲートに使うようなケースです。これは AI エージェントが間に入る必要がない処理なので、シンプルな npm スクリプトで完結させたほうが運用が軽くなります。私の場合、4 サイトとも Cloudflare Pages のビルド時に CLI で Lighthouse を回し、開発中の挙動調査は MCP に任せる、という二段構えで運用しています。
個人開発で実際に効いた使いどころ
新しいツールを入れたら、まずどこで効くか3つくらい当てておくのが私の流儀です。リリース後の数日で「これは時短になった」と確信できた使い方を共有します。
1. ペイウォール周りの動作検証
Stripe Checkout 経由でメンバーシップを売っている関係で、Claude Lab には premium: true の記事に対する Cookie 判定が走ります。Claude Code に「/articles/claude-code/xxx を開いて Premium Cookie が無い状態で何が表示されるか教えて」と頼むと、Chrome DevTools for agents が実際にページを開き、HTML をクリーンに返してくれます。これまではローカルでシークレットウィンドウを開いて目視確認していたので、検証時間が体感で 3 分の 1 になりました。
2. デプロイ後のコンソールエラー自動拾い出し
pageshow + event.persisted 対応（bfcache 周り）を本番に出した直後など、コンソールに JS エラーが出ていないか確認したいことがあります。「本番の /membership を開いて、コンソールに出たエラーと警告だけ列挙して」とお願いすると、Claude Code が Chrome DevTools for agents 経由で取得して整形して返してくれます。気になったエラーがあれば、そのままその場で fix の差分を出してもらう流れに繋げられます。
3. iPhone 表示と desktop 表示の差分チェック
6_5inch、5_8inch などの解像度ごとに見え方をチェックしたい場合に、デバイスシミュレーション機能が便利です。emulateDevice 系のツールで iPhone 15 Pro Max にして、続けてレスポンシブブレークポイントを切り替えてもらうと、CSS のメディアクエリ境界線を一気にあぶり出せます。壁紙アプリの解像度別 .htaccess リダイレクトを書いている人は、Servers 側のリダイレクト結果を本番 URL でクロールする用途にも使えます。
落とし穴と回避策
数日触って踏んだ細かい罠も書いておきます。
- CAPTCHA や Cloudflare Turnstile は突破できない — はてなブックマークでも指摘されていますが、ボット判定の強いページは普通にブロックされます。Lab 4 サイトの本番では Cloudflare の Bot Fight Mode を緩めにしてある（自分で踏むため）ので問題なしですが、お客様の本番サイトを触るときは事前に IP 許可リスト等の調整が必要です。
- 拡張機能の状態が見えない — 拡張機能デバッグ機能はありますが、デフォルトでは User Profile が空のクリーンセッションで起動します。普段 Chrome に入れている拡張機能込みで検証したい場合は、起動時に
--user-data-dirを明示する必要があります。 - メモリリーク検出は時間がかかる — Performance monitor を継続的に走らせて結果を返してもらう構成だと、1 回の調査で 30 秒〜1 分は待たされます。CI で回すなら並列度を下げないと予算が飛びます。
Antigravity 2.0 バンドル版との違い
Antigravity 2.0 を使っている人向けに、Claude Code 経由との差分をまとめます。
| 項目 | Claude Code + MCP | Antigravity 2.0 バンドル |
|---|---|---|
| インストール手順 | claude mcp add で手動 | 既定で利用可能 |
| 呼び出し方 | MCP プロトコル経由 | Antigravity 内部の Agent Manager から |
| 設定の永続化 | ~/.claude/mcp.json | ワークスペース単位 |
| 複数プロジェクトでの共有 | グローバル設定で共有可 | プロジェクトごとに設定 |
Claude Code を CLI のメイン環境にしている私の運用では、グローバルにひとつ入れておけば全プロジェクトから使えるのが楽でした。Antigravity をエディタとして使う場面では、ワークスペース単位で設定が分かれているほうが安全（プロジェクトごとに権限スコープを変えられる）なので、用途で使い分けると良いと思います。
まず試すならどのコマンドか
最初に呼んでみると感触がつかみやすいのは、Lighthouse 監査です。Claude Code から npx chrome-devtools-mcp lighthouse https://example.com の意図で「example.com の Lighthouse スコアを取って、Performance と SEO だけ詳細を見せて」と頼んでみてください。スコアと改善提案が JSON で戻ってきて、Claude がそのまま分析してくれます。AdMob 収益型の個人開発アプリのランディングを持っている人は、CWV 改善の入り口として効きます。
公式リリースとはいえ似たツールが乱立している領域なので、Playwright MCP / Claude in Chrome / Chrome DevTools for agents の3つを並べて、ご自身のワークフローに一番馴染むものを選ぶのが良いと思っています。私は当面、汎用ブラウジングは Claude in Chrome、E2E テスト的な用途は Playwright MCP、デバッグ系は Chrome DevTools for agents、という3つの使い分けで運用していくつもりです。
導入してみてつまずいたら、Antigravity Lab 側で Antigravity 2.0 バンドル版の運用記事も書いているので、そちらと併読すると全体像が掴みやすいはずです。