chrome-devtools-cli

chrome-devtools-mcp CLI を使用すると、ターミナルからブラウザと対話できます。

セットアップ

注: CLI を初めて使用する場合は、references/installation.md を参照してセットアップしてください。インストールは 1 回限りの前提条件であり、通常の AI ワークフローの一部ではありません。

AI ワークフロー

1. 実行: ツールを直接実行します（例: chrome-devtools list_pages）。バックグラウンド サーバーは暗黙的に起動します。各使用前に start/status/stop を実行しないでください。
2. 検査: take_snapshot を使用してエレメントの <uid> を取得します。
3. 操作: click、fill などを使用します。状態はコマンド全体で保持されます。

スナップショットの例:

uid=1_0 RootWebArea "Example Domain" url="https://example.com/"
  uid=1_1 heading "Example Domain" level="1"

コマンドの使用方法

chrome-devtools <tool> [arguments] [flags]

任意のコマンドで --help を使用してください。出力はデフォルトで Markdown 形式です。JSON の場合は --output-format=json を使用してください。

入力オートメーション(スナップショットから取得した <uid>)

chrome-devtools take_snapshot --help # コマンドのヘルプメッセージ、すべてのコマンドで使用可能です
chrome-devtools take_snapshot # ページのテキスト スナップショットを取得し、エレメントの UID を取得します
chrome-devtools click "id" # 指定されたエレメントをクリックします
chrome-devtools click "id" --dblClick true --includeSnapshot true # ダブルクリックしてスナップショットを返します
chrome-devtools drag "src" "dst" # エレメントを別のエレメントにドラッグします
chrome-devtools drag "src" "dst" --includeSnapshot true # エレメントをドラッグしてスナップショットを返します
chrome-devtools fill "id" "text" # 入力またはセレクトにテキストを入力します
chrome-devtools fill "id" "text" --includeSnapshot true # エレメントに入力してスナップショットを返します
chrome-devtools handle_dialog accept # ブラウザ ダイアログを処理します
chrome-devtools handle_dialog dismiss --promptText "hi" # プロンプト テキスト付きダイアログを閉じます
chrome-devtools hover "id" # 指定されたエレメント上にマウスを置きます
chrome-devtools hover "id" --includeSnapshot true # エレメント上にマウスを置いてスナップショットを返します
chrome-devtools press_key "Enter" # キーまたはキーの組み合わせを押します
chrome-devtools press_key "Control+A" --includeSnapshot true # キーを押してスナップショットを返します
chrome-devtools type_text "hello" # フォーカスされた入力にキーボードを使用してテキストを入力します
chrome-devtools type_text "hello" --submitKey "Enter" # テキストを入力して送信キーを押します
chrome-devtools upload_file "id" "file.txt" # 指定されたエレメント経由でファイルをアップロードします
chrome-devtools upload_file "id" "file.txt" --includeSnapshot true # ファイルをアップロードしてスナップショットを返します

ナビゲーション

chrome-devtools close_page 1 # インデックスでページを閉じます
chrome-devtools list_pages # ブラウザで開いているページのリストを取得します
chrome-devtools navigate_page --url "https://example.com" # 現在選択されているページを URL に移動します
chrome-devtools navigate_page --type "reload" --ignoreCache true # キャッシュを無視してページを再読み込みします
chrome-devtools navigate_page --url "https://example.com" --timeout 5000 # タイムアウト付きで移動します
chrome-devtools navigate_page --handleBeforeUnload "accept" # ページを離れる前のダイアログを処理します
chrome-devtools navigate_page --type "back" --initScript "foo()" # 戻って初期化スクリプトを実行します
chrome-devtools new_page "https://example.com" # 新しいページを作成します
chrome-devtools new_page "https://example.com" --background true --timeout 5000 # バックグラウンドで新しいページを作成します
chrome-devtools new_page "https://example.com" --isolatedContext "ctx" # 分離されたコンテキストで新しいページを作成します
chrome-devtools select_page 1 # 今後のツール呼び出しのコンテキストとしてページを選択します
chrome-devtools select_page 1 --bringToFront true # ページを選択してフロントに持ってきます

エミュレーション

chrome-devtools emulate --networkConditions "Offline" # ネットワーク条件をエミュレートします
chrome-devtools emulate --cpuThrottlingRate 4 --geolocation "0x0" # CPU スロットリングと地理情報をエミュレートします
chrome-devtools emulate --colorScheme "dark" --viewport "1920x1080" # カラー スキームとビューポートをエミュレートします
chrome-devtools emulate --userAgent "Mozilla/5.0..." # ユーザー エージェントをエミュレートします
chrome-devtools resize_page 1920 1080 # 選択されたページのウィンドウをリサイズします

パフォーマンス

chrome-devtools performance_analyze_insight "1" "LCPBreakdown" # 特定のパフォーマンス インサイトの詳細を取得します
chrome-devtools performance_start_trace true false # パフォーマンス トレースの記録を開始します
chrome-devtools performance_start_trace true true --filePath t.gz # トレースを開始してファイルに保存します
chrome-devtools performance_stop_trace # アクティブなパフォーマンス トレースを停止します
chrome-devtools performance_stop_trace --filePath "t.json" # トレースを停止してファイルに保存します
chrome-devtools take_memory_snapshot "./snap.heapsnapshot" # メモリ ヒープスナップショットをキャプチャします

ネットワーク

chrome-devtools get_network_request # 現在選択されているネットワーク リクエストを取得します
chrome-devtools get_network_request --reqid 1 --requestFilePath req.md # ID でリクエストを取得してファイルに保存します
chrome-devtools get_network_request --responseFilePath res.md # レスポンス ボディをファイルに保存します
chrome-devtools list_network_requests # すべてのネットワーク リクエストをリストします
chrome-devtools list_network_requests --pageSize 50 --pageIdx 0 # ページネーション付きでネットワーク リクエストをリストします
chrome-devtools list_network_requests --resourceTypes Fetch # リソース タイプでリクエストをフィルタリングします
chrome-devtools list_network_requests --includePreservedRequests true # 保持されたリクエストを含めます

デバッグと検査

chrome-devtools evaluate_script "() => document.title" # ページ上で JavaScript 関数を評価します
chrome-devtools evaluate_script "(a) => a.innerText" --args 1_4 # UID 引数で JavaScript を評価します
chrome-devtools get_console_message 1 # ID でコンソール メッセージを取得します
chrome-devtools lighthouse_audit --mode "navigation" # ナビゲーション用 Lighthouse 監査を実行します
chrome-devtools lighthouse_audit --mode "snapshot" --device "mobile" # モバイル上のスナップショット用 Lighthouse 監査を実行します
chrome-devtools lighthouse_audit --outputDirPath ./out # Lighthouse 監査を実行してレポートを保存します
chrome-devtools list_console_messages # すべてのコンソール メッセージをリストします
chrome-devtools list_console_messages --pageSize 20 --pageIdx 1 # ページネーション付きでコンソール メッセージをリストします
chrome-devtools list_console_messages --types error --types info # タイプでコンソール メッセージをフィルタリングします
chrome-devtools list_console_messages --includePreservedMessages true # 保持されたメッセージを含めます
chrome-devtools take_screenshot # ページ ビューポートのスクリーンショットを取得します
chrome-devtools take_screenshot --fullPage true --format "jpeg" --quality 80 # 品質 80 で JPEG として全ページ スクリーンショットを取得します
chrome-devtools take_screenshot --uid "id" --filePath "s.png" # エレメントのスクリーンショットを取得します
chrome-devtools take_snapshot # アクセシビリティ ツリーからページのテキスト スナップショットを取得します
chrome-devtools take_snapshot --verbose true --filePath "s.txt" # 詳細なスナップショットを取得してファイルに保存します

エクステンション

chrome-devtools list_extensions # ブラウザにインストールされているすべての Chrome 拡張機能をリストします
chrome-devtools install_extension "/path/to/extension" # 指定されたパスから Chrome 拡張機能をインストールします
chrome-devtools uninstall_extension "extension_id" # ID で Chrome 拡張機能をアンインストールします
chrome-devtools reload_extension "extension_id" # ID でアンパックされた Chrome 拡張機能を再読み込みします
chrome-devtools trigger_extension_action "extension_id" # ID で拡張機能のデフォルト アクションをトリガーします

実験的機能

実験的ツールはデフォルトで無効です。start 時に対応するフラグで有効にしてください。

chrome-devtools click_at 100 200 # 指定された座標をクリックします(--experimentalVision=true が必要)
chrome-devtools screencast_start # スクリーンキャスト録画を開始します(--experimentalScreencast=true と ffmpeg が必要)
chrome-devtools screencast_stop # アクティブなスクリーンキャストを停止します
chrome-devtools list_webmcp_tools # すべての WebMCP ツールをリストします(--categoryExperimentalWebmcp=true が必要)

サービス管理

chrome-devtools start   # chrome-devtools-mcp を開始または再起動します
chrome-devtools status  # chrome-devtools-mcp が実行中かどうかを確認します
chrome-devtools stop    # chrome-devtools-mcp を停止します