browser-devtools-cli

Browser DevTools CLI

Playwright を使用したブラウザー自動化、デバッグ、テスト用のコマンドラインインターフェイスです。この CLI はブラウザープラットフォーム向けです。Node.js バックエンドのデバッグには、node-devtools-cli を使用してください（node-devtools-cli スキルを参照）。

インストール

npm install -g browser-devtools-mcp

クイックスタート

# Navigate to a URL
browser-devtools-cli navigation go-to --url "https://example.com"

# Take a screenshot
browser-devtools-cli content take-screenshot --name "homepage"

# Get page content as text
browser-devtools-cli content get-as-text

参照ベースのワークフロー（AI エージェントに推奨）：最初に a11y take-aria-snapshot を呼び出して参照（e1、e2、...）を取得し、その参照を interaction click --selector "e1" で使用するか、content take-screenshot --annotate を使って番号付きの要素ラベルを表示します。

グローバルオプション

オプション	説明	デフォルト
--port <number>	デーモンサーバーのポート	2020
--session-id <string>	ブラウザーの状態を保持するセッション ID	自動
--json	結果を JSON で出力します（AI に推奨）	false
--quiet	ログメッセージを抑制します	false
--verbose	デバッグ出力を有効にします	false
--timeout <ms>	操作のタイムアウト	30000
--headless	ヘッドレスモードでブラウザーを実行します	true
--no-headless	ウィンドウを表示してブラウザーを実行します	-
--persistent	Cookie／localStorage を保持します	false
--no-persistent	セッション終了時に状態を消去します	-
--user-data-dir <path>	ブラウザーのユーザーデータディレクトリ	OS の一時ディレクトリ
--use-system-browser	システムの Chrome を使用します	false
--browser-path <path>	カスタムブラウザーパス	自動

AI エージェント向けの推奨オプション：

# JSON output for parsing, quiet mode for clean output, session for state persistence
browser-devtools-cli --json --quiet --session-id "my-session" <command>

ツールドメイン

CLI は、ドメインごとに整理されたツールを提供します。

ドメイン	説明	リファレンス
navigation	ページのナビゲーション（移動、戻る、進む、再読み込み）
content	コンテンツの抽出（スクリーンショット、PDF、HTML、テキスト）
interaction	ユーザー操作（クリック、入力、ホバー、スクロール）
a11y	アクセシビリティスナップショット（ARIA、AX ツリー）
o11y	オブザーバビリティ（Web Vitals、コンソール、HTTP、トレース）
debug	ノンブロッキングデバッグ（トレースポイント、ログポイント、例外）
stub	HTTP モック（インターセプト、モック、クリア）
sync	同期（ネットワークアイドル状態の待機）
react	React DevTools との連携
figma	Figma デザインの比較
execute	JavaScript のバッチ実行（execute を実行。VM には page、callTool があります）

Execute は CLI と MCP の両方で利用できます。JavaScript の実行やツール呼び出しの一括処理に使用します。CLI では run execute --code "<js>"（任意で --timeout-ms）を実行します。MCP では同じパラメーターでツール execute を使用します。VM 内では、page（ブラウザーのみ）は Playwright Page です。await page.title()、await page.evaluate(...) などを使用します。callTool(name, input, returnOutput?) は任意のツールを呼び出します。必ず await を使用してください。name はアンダースコア形式（例：'navigation_go-to'）、input はオブジェクト（キーは camelCase）です。returnOutput: true を指定すると、結果がレスポンスの toolOutputs に追加されます。バインディングと引数の詳細は、execute リファレンスを参照してください。

CLI 管理コマンド

デーモン管理

browser-devtools-cli daemon status      # Check daemon status
browser-devtools-cli daemon info        # Show daemon info (version, uptime, sessions)
browser-devtools-cli daemon start       # Start daemon
browser-devtools-cli daemon stop        # Stop daemon
browser-devtools-cli daemon restart     # Restart daemon

セッション管理

browser-devtools-cli session list                  # List active sessions
browser-devtools-cli session info <session-id>     # Show session details
browser-devtools-cli session delete <session-id>   # Delete a session

ツールの検出

browser-devtools-cli tools list              # List all available tools
browser-devtools-cli tools search <query>    # Search tools by name or description
browser-devtools-cli tools info <tool-name>  # Show tool details and parameters

設定

browser-devtools-cli config    # Show current configuration

更新

browser-devtools-cli update --check   # Check for updates
browser-devtools-cli update           # Check and install updates

例

基本的なナビゲーションとスクリーンショット

# Navigate to URL
browser-devtools-cli navigation go-to --url "https://example.com"

# Take screenshot
browser-devtools-cli content take-screenshot --name "homepage"

# Get page text
browser-devtools-cli content get-as-text

フォームの自動化

# Use same session for state persistence
SESSION="--session-id login-test"

# Navigate to login page
browser-devtools-cli $SESSION navigation go-to --url "https://app.example.com/login"

# Fill form fields
browser-devtools-cli $SESSION interaction fill --selector "#email" --value "[email protected]"
browser-devtools-cli $SESSION interaction fill --selector "#password" --value "password123"

# Submit form
browser-devtools-cli $SESSION interaction click --selector "button[type=submit]"

# Wait for navigation
browser-devtools-cli $SESSION sync wait-for-network-idle

# Capture result
browser-devtools-cli $SESSION content take-screenshot --name "dashboard"

パフォーマンス分析

# Navigate
browser-devtools-cli navigation go-to --url "https://example.com"

# Get Web Vitals metrics
browser-devtools-cli --json o11y get-web-vitals

# Check console for errors
browser-devtools-cli --json o11y get-console-messages --type warning

# Analyze HTTP requests
browser-devtools-cli --json o11y get-http-requests

アクセシビリティ監査

# Navigate
browser-devtools-cli navigation go-to --url "https://example.com"

# Get ARIA snapshot
browser-devtools-cli a11y take-aria-snapshot

# Get detailed AX tree
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link,textbox

バッチ実行（execute）

# Run JavaScript in session VM (page + callTool available)
browser-devtools-cli run execute --code "return await page.title();"

# Batch multiple tools in one call (fewer round-trips)
browser-devtools-cli run execute --code "await callTool('a11y_take-aria-snapshot', {}, true); await callTool('content_take-screenshot', {}, true);"

API モック

# Mock API response
browser-devtools-cli stub mock-http-response \
  --pattern "**/api/users" \
  --body '[{"id": 1, "name": "Test User"}]'

# Navigate and test
browser-devtools-cli navigation go-to --url "https://app.example.com"

# Clear mocks
browser-devtools-cli stub clear

ノンブロッキングデバッグ

SESSION="--session-id debug-session"

# Navigate to app
browser-devtools-cli $SESSION navigation go-to --url "http://localhost:3000"

# Set tracepoint on a function
browser-devtools-cli $SESSION debug put-tracepoint \
  --url-pattern "app.js" \
  --line-number 42

# Add watch expression
browser-devtools-cli $SESSION debug add-watch --expression "this"

# Enable exception catching
browser-devtools-cli $SESSION debug put-exceptionpoint --state uncaught

# Interact with app (triggers probes)
browser-devtools-cli $SESSION interaction click --selector "#submit-btn"

# Get captured snapshots
browser-devtools-cli $SESSION --json debug get-probe-snapshots
browser-devtools-cli $SESSION --json debug get-probe-snapshots --types tracepoint,exceptionpoint

CI/CD 用シェルスクリプト

#!/bin/bash
set -e

CLI="browser-devtools-cli --json --quiet --session-id ci-test-$$"

# Navigate
$CLI navigation go-to --url "https://example.com"

# Wait for load
$CLI sync wait-for-network-idle

# Take screenshot
$CLI content take-screenshot --name "ci-test"

# Get Web Vitals
VITALS=$($CLI o11y get-web-vitals)
echo "Web Vitals: $VITALS"

# Check for console errors
ERRORS=$($CLI o11y get-console-messages --type error)
if [ "$ERRORS" != "[]" ]; then
  echo "Console errors found: $ERRORS"
  exit 1
fi

# Cleanup
$CLI session delete "ci-test-$$"

対話モード（人間のユーザー向け）

手動での調査には、対話型 REPL モードを利用できます。

browser-devtools-cli interactive
browser-devtools-cli --no-headless interactive   # With visible browser

コマンド	説明
help	利用可能なコマンドを表示します
exit、quit	対話モードを終了します
<domain> <tool>	ツールを実行します

シェル補完

# Bash
browser-devtools-cli completion bash
echo 'eval "$(browser-devtools-cli completion bash)"' >> ~/.bashrc

# Zsh
browser-devtools-cli completion zsh
echo 'eval "$(browser-devtools-cli completion zsh)"' >> ~/.zshrc