エージェント向け Chrome DevTools には、コーディング エージェントまたはユーザーが DevTools ツールを標準のシェルコマンドとして実行できるコマンドライン インターフェース（CLI）が含まれています。エージェントは、MCP サーバーを介してツールを動的に呼び出すのではなく、同じアクションをシェルコマンドとして記述し、いつでも再実行できるスクリプトにチェーンできます。たとえば、エージェントは次のようなスクリプトを生成します。
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
MCP サーバーと CLI の両方が同じエンジンに接続します。このエンジンは、Chrome DevTools Protocol（CDP）を介して Chrome と通信する永続的なバックグラウンド デーモンです。違いは、エージェントがそのエンジンに到達する方法です。
- MCP サーバー: エージェントは JSON-RPC を使用して標準入出力経由で接続し、すべてのブラウザツールをインタラクティブな関数呼び出しとして扱います。
- CLI: エージェントは、同じバックグラウンド デーモンに対してシェルコマンドを直接実行します。
CLI を使用して、次のことができます。
- ワークフローを保持する: 探索的デバッグ セッション中にエージェントが実行したアクションを、再利用可能なスクリプトに変換します。
- アプリケーションの状態を再現する: スクリプトを再実行して、ブラウザを既知の状態に戻してから、再度デバッグします。
- バッチ アクション: 各ステップ間で会話のターンを挟まずに、ナビゲーション、入力、エミュレーション、検査コマンドを順番に実行します。
- AI エージェントなしでスクリプトを実行する: 生成されたスクリプトは、シェル スクリプトを実行できる任意のターミナル、サブシェル、CI コンテナから実行できます。アクティブな LLM セッションや MCP クライアントは必要ありません。
CLI と MCP サーバーのどちらかを選択する
CLI と MCP サーバーのどちらを選択するかは、費用、コンテキスト、ワークフローに関するエンジニアリング上の決定です。
- コンテキスト ウィンドウのコスト: MCP サーバーを登録すると、すべてのツール定義と JSON スキーマが、すべての会話で LLM のシステム プロンプトに挿入されます。CLI スキルを使用すると、エージェントはコンパクトな Markdown の概要のみを読み込み、スキル全体を読み込んで必要なコマンドを構築することを決定したときにトークン費用を支払います。長いマルチターン エージェント セッションの場合、この差は費用とレイテンシの両方に影響します。
- 探索と実行: MCP ツールは、ユーザーもエージェントも何を検査する必要があるかわからない場合に、動的で探索的なデバッグに優れています。エージェントは、利用可能なすべてのツールを事前に把握しているため、目標を達成するためにそれらのツールを使用する可能性が高くなります。パスがすでにわかっている場合は、CLI を使用して必要なステップのみを実行できます。
- 再利用性: CLI スクリプトを保存して、スキルで再利用したり、エージェント ループ外で手動で実行したりできます。MCP ツール呼び出しでは、この操作はできません。
| MCP サーバーを使用するケース | CLI を使用するケース |
|---|---|
| 不明な問題を調査しており、利用可能なツールボックス全体が必要である。 | 手順をすでに把握しており、確実に繰り返したい。 |
| ライブで動的な問題解決と、ブラウザの深いイントロスペクションが必要な場合。 | トークン効率の高いエージェント スキルまたはターミナルベースの自動化が必要な場合。 |
| エージェントが MCP をサポートする IDE またはクライアントで実行されている。 | お使いの環境は MCP クライアントをサポートしていません。 |
CLI を使用する場合は、次の点に注意してください。
- ツールのカバレッジ: CLI は、シェルベースの自動化用のエージェント向け Chrome DevTools ツールのほとんどをサポートしています。コマンドの完全なリストについては、CLI スキル リファレンスをご覧ください。
- 暗黙的な起動: バックグラウンド サーバーは、最初の使用時に自動的に起動します。各コマンドの前に
start、status、stopを実行する必要はありません。 - 永続的な状態: ブラウザの状態はコマンド間で保持されるため、1 つのコマンドで開いたページは、明示的に閉じない限り、次のコマンドでも使用できます。
- ページ ID と要素 UID: ほとんどのコマンドは、最初の引数としてページ ID を受け取ります。
chrome-devtools list_pagesを実行して見つけ、chrome-devtools take_snapshotを実行して操作する要素の UID を取得します。 - 出力形式: 出力はデフォルトで、プレーンな Markdown 形式のテキストになります。他のスクリプトまたは CI パイプラインで結果を使用する場合は、
--output-format=jsonを渡します。 - ファイル アクセス: デフォルトでは、CLI にはファイル保存パラメータと
upload_fileのファイル システムへのフルアクセス権があります。--allowUnrestrictedPaths=falseを渡して、ファイル アクセスを OS の一時ディレクトリに制限します。 - CI での Lighthouse: CLI から
lighthouse_auditを実行できますが、CI で Lighthouse スコアのみが必要な場合は、スタンドアロンの Lighthouse CLI とその GitHub Actions の方が軽量です。 - ブラウザ自動化スクリプトよりもシンプルな抽象化: JavaScript または TypeScript で完全な Puppeteer または Playwright スクリプトを作成する場合とは異なり、DevTools CLI は、限定された、高度にターゲットを絞った API サーフェスを提供します。このシェル構文は、人間にとって読みやすく、保守しやすく、ハルシネーションなしで信頼性の高い生成を行うことが、低レベルのモデルでもはるかに容易になります。
前提条件
CLI を使用する前に、次のものが揃っていることを確認してください。
- エージェント向け Chrome DevTools がインストールされている場合: スタートガイドに沿って操作します。エージェント固有のプラグインと拡張機能（Gemini CLI 拡張機能など）には、MCP サーバーとともにエージェント スキルが含まれています。
- シェルで使用可能な CLI: インストールは 1 回限りのステップであり、通常のエージェント ワークフローの一部ではありません。インストール リファレンスをご覧ください。
chrome-devtools-cliスキル（エージェント向け Chrome DevTools と一緒にインストール）: このスキルは、CLI を使用してシェル スクリプトを作成する方法やシェルコマンドを実行する方法をエージェントに教えます。
コマンドの構造
コマンドは chrome-devtools <tool> [arguments] [flags] のパターンに従います。必須の引数は位置引数で、オプションの引数はフラグを使用します。詳細については、任意のコマンドで --help を使用してください。
次に例を示します。
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
Chrome DevTools CLI のユースケース
エージェントに、セッションごとに同じブラウザフローを再解決するのではなく、すでに特定した手順をスクリプトとしてキャプチャするように指示します。
デバッグ セッションを再利用可能なスクリプトとして保持する
MCP を介した探索的なデバッグ セッションの後、同じ問題が再び発生しないことを保証できないことがよくあります。次回、再現手順を再度説明するのではなく、エージェントに、実行したフローを書き留めるよう依頼します。
プロンプトの例:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
エージェントの実行例: エージェントは、セッション中に行ったナビゲーション、入力、検査の手順を確認し、chrome-devtools コマンド（new_page、take_snapshot、fill、click、list_console_messages など）のシーケンスに変換します。スクリプトを test.sh として保存します。次回この領域をデバッグするときに、エージェントをスクリプトにポイントして同じ状態に再度到達させるか、エージェント ループの外部で実行して手動でデバッグできます。
調査前にアプリケーションの状態を再現する
複数ステップのチェックアウトやフィルタされたダッシュボードなどの複雑な状態は、エージェントが会話ごとに再構築するにはコストがかかります。保存したスクリプトを新しい調査の出発点として使用します。
プロンプトの例:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
エージェントの実行例: エージェントがスクリプトを実行し、購入手続きに移動して、住所フォームに入力し、配送オプションを選択します。ブラウザの状態はコマンド間で保持されるため、エージェントは同じページで take_snapshot と evaluate_script を使用して、ボタンの状態と支払いセレクタにアタッチされたイベント ハンドラを検査します。
複数のビューポートにわたるバッチの視覚的チェック
複数の画面サイズでレイアウトの変更を検証する作業は、繰り返しが多く、通常は手動で行われます。エミュレーション設定を適用し、1 回の実行でそれぞれの証拠をキャプチャするスクリプトをエージェントに依頼します。
プロンプトの例:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
エージェントの実行例: エージェントは、各ビューポートに対して chrome-devtools emulate 1 --viewport "<size>" を呼び出し、その後に chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" を呼び出すループを記述します。会話を開かずに、CSS の変更ごとにスクリプトを再実行できます。
MCP クライアントが利用できないフローのスモークテスト
CI コンテナやロックダウンされたエンタープライズ設定など、一部の環境では MCP クライアントがサポートされていません。ほぼすべてのターミナル、サブシェル、CI コンテナ、エージェント フレームワークは、標準のシェル スクリプトの実行と stdout の読み取りをサポートしています。そのため、CLI はこれらの場所での軽量なチェックに適しています。
プロンプトの例:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
エージェントの実行例: エージェントは、new_page、take_snapshot、fill、click を使用するスクリプトを作成し、list_console_messages 1
--types error --output-format=json を呼び出して JSON 出力を解析し、終了コードを決定します。
ワークフローを軽量なスキルとしてパッケージ化する
フローがプロジェクトやチームメイト間で有用な場合は、エージェントがスクリプトをスキルにラップできます。これが DevTools CLI スキルです。これは、すべてのツールのトークン費用を事前に支払うことなく、エージェントが特定のブラウザ コマンドを実行できるようにする軽量なリファレンスです。
プロンプトの例:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
エージェントの実行例: エージェントは、名前、スキルが適用されるタイミングの 1 行の説明、スクリプトを参照する指示を含む SKILL.md を作成します。以降のセッションでは、エージェントはタスクが説明と一致する場合にのみ、スキル全体を読み取ります。
次のステップ
- CLI コマンドとフラグの完全なリストについては、CLI スキル リファレンスをご覧ください。
- 基盤となるサーバー（ヘッドレス モード、チャンネル、試験運用版カテゴリ）を構成するには、構成をご覧ください。