はじめに

システム開発推進部 システム開発第2グループでWeb開発をしている笹野です。 今さらながらですが、最近アニメ「CLANNAD」を見返しました。高校生の頃に見たときとは大違いでとんでもなく嗚咽泣きしてしまいました。(成長したってこと…？)

さて、今回は最近発表されたChrome DevTools MCPについてです。 どうやらWeb開発において幅広く活躍してくれそうなMCPということで、早速簡単にですが触ってみたので紹介します。

Chrome DevTools MCPについて

AIエージェントがChrome検証ツールを使えるようにするMCPです。 コンソールログを見たり、ネットワーク状況やパフォーマンスを見たりなどなど、、、
とにかくChromeでの動きをAIが見られるようになります。指示すればChromeでのブラウザ操作もしてくれます。

今回やること

今回はAIくんによるChromeでの、

• コンソールログ調査
• パフォーマンス測定
• 動作テスト

といったところを実際に使って挙動を見てみます。 AIにVue.jsで作ってもらった簡素なTODOリストを対象に使ってみます。 こんな感じ↓

今回の実行環境

AI関連

• Claude Code 2.0.27
• Node.js v22.20.0 (Claude Code)
• npm 10.9.3

確認対象のサイト(TODOリスト)

• Vue.js 3.5.22 (+JavaScript)
• Vite 7.1.12
• Node.js周りはAI関連の環境と同じ

セットアップ

一瞬なのでセットアップから残します。が、みなさんはリポジトリのREADMEを確認しましょう。 直接JSONを編集する場合↓

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

Claude Codeでのセットアップをコマンドで行う場合↓

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

動作一覧

定義されている動作一覧は以下になります(同じくREADME参照) 大体の操作ができるようです。Chromeに特化したMCPならではの網羅具合ですかね。

コンソールログ調査で使ってみた

あえてTODO追加ボタン押下時の処理にタイポを仕込んで、AIにそのエラーを確認してもらいます。

TODO追加ボタンを押下したときのエラーについて、実際に動作確認して調査して
---

(省略)
あれ、TODOが追加されていないようです。統計は「全体: 1」のままで、入力フィールドの値も「テスト用TODO」がクリアされていません。これは異常な動作です。コンソールメッセージを確認してエラーを調査します。
⎿  # list_console_messages response
## Console messages
Showing 1-4 of 4 (Page 1 of 1).
… +5 lines (ctrl+o to expand)
⏺ エラーを発見しました！コンソールに以下のエラーが表示されています：
[error] todos.value.pushtypo is not a function
これは App.vue の TODO追加処理で push メソッドの代わりに pushtypo
という存在しないメソッドが呼ばれているためです。コードを確認してみます。

実際にブラウザが立ち上がり、TODO追加を試みて動作確認してくれました。 動作一覧にあった list_console_messagesを使ってコンソールログを確認してくれたようです。 この後、問題のコードを特定して直してくれました。

パフォーマンス測定で使ってみた

公式ブログを真似て、LCP確認をお願いしてみました。 ※LCP（Largest Contentful Paint）とは、ページ内で最も大きなコンテンツ要素が表示されるまでの時間を測るGoogleが提唱する指標の一つです。(詳細はこちら)

LCPを確認して。
---
ページを読み込みました。次にパフォーマンストレースを実行してLCPを測定します。
⏺ chrome-devtools - performance_start_trace (MCP)(reload: true, autoStop: true)
⎿  # performance_start_trace response
The performance trace has been stopped.
## Summary of Performance trace findings:
… +100 lines (ctrl+o to expand)
⏺ パフォーマンス測定が完了しました！LCPの結果をお知らせします。
LCP（Largest Contentful Paint）測定結果
LCP: 212 ms ✓
これは非常に良好なスコアです！Googleの推奨値では：
- 良好（Good）: 2.5秒以下
- 改善が必要: 2.5〜4.0秒
- 不良: 4.0秒以上

LCPの内訳
- TTFB（Time to First Byte）: 28 ms
- Render delay（レンダー遅延）: 184 ms
その他のCore Web Vitals
- CLS（Cumulative Layout Shift）: 0.02（良好）
パフォーマンスインサイト
1. LCP Breakdown - レンダー遅延が184msありますが、全体的には良好です
2. CLS Culprits - わずかなレイアウトシフトが発生していますが、許容範囲内です
3. Network Dependency Tree - ネットワーク依存関係の最適化余地があります
4. Third Parties - サードパーティコードの影響があります

現在のVueアプリケーションは非常に高速に読み込まれており、LCPスコアは優秀です。さらに詳しい情報が必要であれば、各インサイトの詳細を確認できます。

実際にブラウザを開き、 performance_start_traceからLCPを調べて評価してくれました。 あまりにも簡素なサイトのため優秀と評価されてしまいました。 現実的な数値だった場合にどんな評価をしてくれるのか、どんな改善案を提案してくれるか今後見てみたいところです。

動作テストで使ってみた

以下の一連の動作を確認し、すべて終えた後にスクリーンショットを撮って保存して
TODOを5つ追加
TODOを2つ削除
TODOを1つ編集
TODOを1つ完了にする

シンプルな機能とはいえ、表示されているボタンなどの要素を自らに理解して動作確認してくれました。 デフォルト設定では実際にブラウザを開いて動作確認をしているので、動きを目視で確認することもできます。 この簡単な指示だけで、それらしい自動テストを実行してくれるのはなかなか便利ですね。 保存してくれたスクリーンショット↓

最後に

今回は突貫的でしたがChrome DevTools MCPを使ってみました。 特に自動テストとパフォーマンス分析に有用そうだと思いました。 強いて言えば、開発の観点ではこのMCPは新たにブラウザを開く仕様のため、既に開いているブラウザを操作・確認できる他のMCPのほうが便利に感じる場面もありそうです。細かいですが、そのへんは使い分けになりますかね。 とはいえ総じて今後の開発に取り入れていきたいと思ったMCPでした。 現時点では公開レビュー段階なので今後の拡張にも期待です！

参考

AI エージェント用の Chrome DevTools（MCP） https://developer.chrome.com/blog/chrome-devtools-mcp chrome-devtools-mcpリポジトリ https://github.com/ChromeDevTools/chrome-devtools-mcp Largest Contentful Paint（LCP） https://web.dev/articles/lcp?hl=ja