【Chrome Devtools MCP】はじめてのChrome DevTools MCP

はじめに

みなさんは、Chrome DevTools MCPがあるのを知っていますか？

Chrome DevTools MCPを使うと、AIエージェントがDevToolsのコンテキストを受け取れたり、DevToolsを操作できるようになります。

ただ、実際に「何ができるのか？」「どうやってAIエージェントにお願いするのか？」は少し分かりにくい部分もあると思います。

この記事では、Chrome DevTools MCPでできることと、AIエージェントにChrome DevTools MCPを使わせる方法をまとめて紹介します。

セットアップ

↑こちらのリンクから、ご自身が使っているAIエージェントのセクションを見ながらセットアップしてください。

Chrome DevTools MCPで使えるツール

Input automation

click

指定された要素をクリックする

• パラメーター
  • uid: ページコンテンツのスナップショット内の要素のUID
  • dbIClick: ダブルクリックする場合は true に設定する

---

drag

要素を別の要素の上にドラッグする

• パラメータ
  • from_uid: ドラッグする要素のUID
  • to_uid: ドロップ先となる要素のUID

---

fill

inputやtextarea要素にテキストを入力したり、select要素からオプションを選択する

• パラメータ
  • uid:ページコンテンツスナップショット内の要素のUID
  • value: 入力または選択する値

---

fill_form

複数のフォーム要素に一度に入力する

• パラメータ
  • elements: スナップショット内の入力対象となる要素の配列

---

handle_dialog

ブラウザのダイアログが開かれた場合は、このコマンドを使用して処理する

• パラメーター
  • action: ダイアログを閉じるか受け入れるか
  • promptText: ダイアログに入力するオプションのプロンプトテキスト

---

hover

指定された要素にホバーする

• パラメーター
  • uid: ページコンテンツのスナップショット内の要素のUID

---

press_key

キーや複数のキーを押す
キーボードショートカット、ナビゲーションキー、または特殊なキーの組み合わせなど、fill ツールのような他の入力方法が使用できない場合に使用します。

• パラメーター
  • key : キーや複数のキー（例：Enter, Control+A）

---

upload_file

ファイルをアップロードする

• パラメーター
  • filePath: アップロードするファイルのローカルパス
  • uid: ページコンテンツのスナップショット内のファイル入力要素のUID、またはファイル選択ダイアログを開く要素のUID

Navigation automation

close_page

Indexで指定されたページを閉じる
最後に開いているページは閉じることができない

• パラメーター
  • pageIdx: 閉じるページのインデックス

---

list_pages

ブラウザで開いているページのリストを取得する

• パラメーター
  • なし

---

navigate_page

現在のページから指定したURLに遷移する

• パラメーター
  • ignoreCache: リロード時にキャッシュを無視するかどうか
  • timeout: 最大待機時間（ミリ秒）
  • type: 履歴の戻るまたは進む、またはリロードを指定
    • 値: url, back, forward, reload
  • url: ターゲットURL（typeがurlの場合のみ）

---

new_page

新しいページを作成する

• パラメーター
  • timeout: 最大待機時間（ミリ秒）
  • url: 新しいページで読み込むURL

---

select_page

今後ツールを呼び出すためのコンテキストとしてページを選択する

• パラメーター
  • pageIdx: 選択するページのインデックス。ページのリストを取得するには、list_pages ツールを呼び出す。

---

wait_for

指定したページにテキストが表示されるまで待機する

• パラメーター
  • text: ページに表示されるテキスト
  • timeout: 最大待機時間（ミリ秒）

---

Emulation

emulate

選択したページでさまざまな機能をエミュレートする

• パラメーター
  • cpuThrottlingRate : CPUのスローダウン係数を設定する
  • networkConditions: ネットワークをスロットリングする
    • 値： No emulation, Offline, Slow 3G, Fast 3G, Slow 4G, Fast 4G

---

resize_page

選択したページのウィンドウをリサイズする

• パラメーター
  • height: ページの高さ
  • width: ページの幅

---

Performance

performance_analyze_insight

トレース記録の結果から、特定のパフォーマンスインサイトに関する情報を取得する

• パラメーター
  • insightName : 詳細情報を取得したいインサイトの名前
    • 例: DocumentLatency or LCPBreakdown
  • insightSetId : 特定のインサイトセットのID

---

performance_start_trace

選択したページでパフォーマンストレースの記録を開始する
これを使用して、パフォーマンスの問題を探し、ページのパフォーマンスを向上させるためのインサイトやページのCore Web Vitalが取得できる

• パラメーター
  • autoStop : トレース記録を自動的に停止するかを指定する
  • reload : トレースが開始された後、ページを自動的にリロードするかを指定する

---

performance_stop_trace

選択中のページで実行中のパフォーマンストレース記録を停止する

• パラメーター
  • なし

---

Network

get_network_request

ネットワークリクエストを取得する

• パラメーター
  • reqid: ネットワークリクエストのreqid

---

list_network_requests

現在選択中のページで、直前のナビゲーション以降に発生したすべてのリクエストを一覧表示する

• パラメーター
  • includePreservedRequests: trueを設定すると、直近の3回のナビゲーションで保存されたリクエストを返す
  • pageIdx: 取得するページ番号
  • pageSize: 返す最大リクエスト数
  • resourceTypes: 返すリクエストのタイプを指定する

---

Debugging

evaluate_script

現在選択中のページ内で、指定した JavaScript 関数を実行する

• パラメーター
  • args: 関数に渡す引数の配列
  • function: 現在選択中のページで実行されるJavaScript関数
    • 引数なしの例: () => { return document.title }
    • 非同期処理の例: async () => { return await fetch("example.com") }
    • 引数ありの例: (el) => { return el.innerText; }

---

get_console_message

指定されたIDのコンソールメッセージを取得する

• パラメーター
  • msgid: 取得するコンソールメッセージのmsgid

---

list_console_messages

現在選択中のページのすべてのコンソールメッセージを取得する

• パラメーター
  • includePreservedMessages: trueを設定すると、直近の3回のナビゲーションで保存されたメッセージを返す
  • pageIdx: 取得するページ番号
  • pageSize: 返す最大メッセージ数
  • types: 返すメッセージのタイプを指定する

---

take_screenshot

ページまたは要素のスクリーンショットを撮る

• パラメーター
  • filePath: 保存するスクリーンショットの絶対パス
  • format: スクリーンショットを保存する形式のタイプ
    • 値: png, jpeg, webp
  • fullPage: trueを指定すると、ページ全体のスクリーンショットを撮る
  • quality: JPEG および WebP 形式の圧縮品質
  • uid: ページコンテンツスナップショットからの要素のuid

---

take_snapshot

現在選択中のページのアクセシビリティツリーに基づいて、テキストスナップショットを取得する
このスナップショットには、ページ内の各要素と、それぞれに対応する一意の識別子（UID）が含まれる

• パラメーター
  • filePath: スナップショットを保存する絶対パス or 現在の作業ディレクトリに対する相対パス
  • verbose : アクセシビリティツリーの全情報を含めるかどうか。デフォルトはfalse

まとめ

このようにChrome DevTools MCPは、AIエージェントとブラウザをつなぐための強力な仕組みです。
これまで人が手動で行っていた操作（クリック・入力・ナビゲーション・パフォーマンス解析など）をAIエージェントがDevTools経由で直接制御できるようになります。

この記事を参考にDevTools MCPを使ってみてください。

---

最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドについてQiitaで記事を書いています。
ぜひQiitaのフォローと、X（Twitter）のフォローもお願いします。