安定版がリリースされたChrome DevTools for agentsをClaude Codeから使ってみた

Posted at 2026-05-24

Supershipの名畑です。「海が走るエンドロール」が京都アニメーション制作で映画化されるというニュース、本当に嬉しくて、公開される来年まで元気に過ごせそうです。

はじめに

GoogleからChrome DevTools for agentsのv1がリリースされました。

AI コーディングツールはコードの作成に非常に強力ですが、多くの場合、実行とは切り離されています。複雑なウェブアプリを生成できますが、ライブブラウザで動作を観察したり、出力を検査したりすることはできません。

エージェント向け Chrome DevTools を使用すると、コーディングエージェントは、コードをリアルタイムで検証、デバッグ、最適化するために必要な可視性を得ることができます。数か月前に初めてご紹介しましたが、エージェント向け Chrome DevTools が安定版 1.0 リリースとして提供開始されました。

参考：エージェント 1.0 向けの Chrome DevTools で AI コーディングワークフローを効率化 | Blog | Chrome for Developers

機能についての概要は「エージェント向けの Chrome DevTools | Chrome for Developers」に記載されています。

機能	概要
品質監査の自動化	Lighthouse監査でアクセシビリティ・SEO・ベストプラクティスを評価
ユーザー体験のエミュレート	デバイスサイズ・位置情報・ネットワーク/CPU速度を切り替えて挙動を再現
Chrome拡張機能の開発・デバッグ	拡張機能のインストール・再読み込み・トリガーを自動化
WebMCPツールのデバッグ・テスト	WebMCPで公開された構造化ツールと直接やり取り（DOM推測不要）
メモリリーク検出	ヒープスナップショット取得で切り離されたDOMノードを特定
セッション引き継ぎ（自動接続）	既存ブラウザのログイン状態を保持したまま調査を委譲
サードパーティ開発者ツール連携	ウェブアプリケーションの内部状態をエージェントに直接共有

詳細はGitHubリポジトリにあります。

今回はこのChrome DevTools for agentsのうちLighthouse監査を試してみましたので、記事に残します。

環境

MacBookです。

Claude Code、Python、Chromeはインストール済みです。
バージョン確認をしておきました。

Claude Code

% claude --version 
2.1.150 (Claude Code)

Python

% python --version
Python 3.14.3

Chrome

% /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --version
Google Chrome 148.0.7778.179

インストール

まず、Claude Codeでマーケットプレイスレジストリの追加をします。

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

無事に終われば以下のように表示されます。

  ⎿  Successfully added marketplace: chrome-devtools-plugins

続けてマーケットプレイスレジストリからプラグインのインストールを行います。

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

インストールの範囲が聞かれます。
私は今回は3番目のlocal scopeとしました。

    Install for you (user scope)
    Install for all collaborators on this repository (project scope)
  > Install for you, in this repo only (local scope)
    Back to plugin list

無事に終わると以下のように表示されます。

  ⎿  ✓ Installed chrome-devtools-mcp. Run /reload-plugins to apply.

設定を反映させるために再起動します。

mcpコマンドで接続されているか確認できます。

/mcp

略

    plugin:chrome-devtools-mcp:chrome-devtools · ✔ connected · 29 tools

検証用ローカルHTML

以下のHTMLをbad.htmlというファイル名で保存しました。
検証で引っ掛かるように、あえて問題をいくつか含めてあります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>キャンペーンのお知らせ</title>
  <script>
    console.log(userName);
  </script>
</head>
<body>
  <h1>夏のキャンペーンのお知らせ</h1>

  <img src="https://placehold.jp/300x200.png">

  <p style="color: #cccccc; background: #ffffff;">期間限定で割引キャンペーンを実施します。</p>
</body>
</html>

含めた問題は以下の通りです。

<img> に alt 属性が指定されていない（アクセシビリティ）
<p> のテキスト色と背景色のコントラスト比が不足している（アクセシビリティ）
定義されていない変数 userName を console.log で参照している（コンソールエラー / ベストプラクティス）
<meta name="description"> が指定されていない（SEO）

bad.htmlが置かれたフォルダで以下を実行します。

% python -m http.server 8000

ブラウザで http://localhost:8000/bad.html にアクセスすると、以下の通り表示されます。

実行

http.serverを起動したままで、Claude Codeに指示を出します。

http://localhost:8000/bad.html に対してLighthouse監査を実行してください

chrome-devtools-mcpの呼び出し実行が表示されます。

Calling plugin:chrome-devtools-mcp:chrome-devtools

Claude Codeは通常通り、環境設定(settings.jsonなど)に従って許可を求めてきます。

問題ないことを確認しつつ進めると、最終的に結果が表示されます。

⏺ Lighthouse監査を実行しました。http://localhost:8000/bad.html のスコアは以下の通りです:
 
  カテゴリスコア

  ┌──────────────────┬────────┐
  │     カテゴリ     │ スコア │
  ├──────────────────┼────────┤
  │ Accessibility    │ 63     │                                                                                                                                  
  ├──────────────────┼────────┤
  │ Best Practices   │ 96     │
  ├──────────────────┼────────┤
  │ SEO              │ 82     │
  ├──────────────────┼────────┤
  │ Agentic Browsing │ 100    │
  └──────────────────┴────────┘

  監査サマリー
  
  - ✅ Passed: 30
  - ❌ Failed: 5
  - 総処理時間: 約 3.98 秒

  レポート出力先

  - JSON: /hoge/report.json
  - HTML: /fuga/report.html

  特に Accessibility(63点) が低めで改善余地があります。失敗した監査項目の詳細を確認したい場合は、HTMLレポートを開くか、具体的にどの観点を深掘りするか教えてください(例: a11y
  debugging スキルで詳しく調査することも可能です)。

以下の指示をしてみます。

失敗した監査項目の中身を教えてください。

すると詳細が提示されます。

失敗した5項目の詳細です。

  ❌ 失敗した監査項目

  1. errors-in-console — コンソールにエラー [Best Practices]
  
  - 内容: ReferenceError: userName is not defined
  - 場所: bad.html:7:17
  - 修正: 該当箇所で未定義の変数 userName を参照しています。宣言を追加するか、参照を削除してください。

  2. color-contrast — コントラスト比不足 [Accessibility]

  - 要素: <p style="color: #cccccc; background: #ffffff;">(「期間限定で割引キャンペーンを実施します。」)
  - 現状: コントラスト比 1.6:1(基準は 4.5:1 以上)
  - 修正: 文字色をもっと濃くする(例: #595959 以上)。

  3. image-alt — 画像に alt 属性なし [Accessibility]

  - 要素: <img src="https://placehold.jp/300x200.png">
  - 修正: alt="..." を追加。装飾画像なら alt="" で可。

  4. landmark-one-main — <main> ランドマークなし [Accessibility]

  - 要素: <html lang="ja"> (= ドキュメント全体に main がない)
  - 修正: 主要コンテンツを <main>...</main> で囲む。

  5. meta-description — メタディスクリプションなし [SEO]

  - 修正: <head> に <meta name="description" content="ページの概要"> を追加。

  ---
  bad.html を修正する場合はそのまま続行できます。修正案を適用しますか？

意図通りです。

さらにlandmark-one-mainまで指摘してくれました。

素晴らしい。

最後に

これまでも似たようなことはできましたが、公式に用意されるとかなりありがたいですね。
役立つケースが多そうです。

宣伝

SupershipのQiita Organizationを合わせてご覧いただけますと嬉しいです。他のメンバーの記事も多数あります。

Supershipではプロダクト開発やサービス開発に関わる方を絶賛募集しております。
興味がある方はSupership株式会社採用サイトよりご確認ください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up