【Chrome DevTools MCP】とりあえず触ってみた

2025-10-28Chrome DevTools MCP, MCP

はじめに

システム開発推進部システム開発第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ならではの網羅具合ですかね。

カテゴリ	ツール名	目的	主な使いどころ
入力操作	click	クリック	ボタン/リンクの押下
入力操作	drag	ドラッグ	スライダー移動、D&D
入力操作	fill	テキスト入力	検索欄/フォーム入力
入力操作	fill_form	複数項目入力	ログイン/詳細フォーム
入力操作	handle_dialog	ダイアログ制御	alert/confirm/prompt
入力操作	hover	ホバー	メニュー展開/ツールチップ
入力操作	press_key	キーボード操作	Enter/Tab/ショートカット
入力操作	upload_file	ファイル選択	画像/CSVアップロード
ナビゲーション	close_page	ページを閉じる	タブ整理/終了処理
ナビゲーション	list_pages	ページ列挙	複数タブ管理
ナビゲーション	navigate_page	URLへ遷移	画面移動/テスト開始
ナビゲーション	new_page	新規ページ作成	新しいタブ/ウィンドウ
ナビゲーション	select_page	ページ選択	操作対象切替
ナビゲーション	wait_for	条件待ち	要素/ネット完了待ち
エミュレーション	emulate_cpu	CPU再現	パフォ計測/再現
エミュレーション	emulate_network	回線状態再現	3G/遅延/帯域制限
エミュレーション	resize_page	ビューポート変更	レスポンシブ確認
パフォーマンス	performance_analyze_insight	トレース解析	ボトルネック抽出
パフォーマンス	performance_start_trace	計測開始	収集範囲指定
パフォーマンス	performance_stop_trace	計測終了	トレース取得/保存
ネットワーク	get_network_request	リクエスト詳細取得	API検証/ヘッダ確認
ネットワーク	list_network_requests	リクエスト一覧	依存関係把握
デバッグ	evaluate_script	スクリプト実行	変数検証/DOM操作
デバッグ	get_console_message	最新ログ取得	直近エラー確認
デバッグ	list_console_messages	すべてのログ取得	監査/履歴確認
デバッグ	take_screenshot	スクリーンショット	画面キャプチャ
デバッグ	take_snapshot	DOM/状態スナップショット	変更比較/保存

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

あえて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でした。
現時点では公開レビュー段階なので今後の拡張にも期待です！