Browser Tools MCP — ユースケース, インストール & ライブデモ

Name: Browser Tools MCP Server
Author: AgentDeskAI

なぜ使うのか

主な機能

ヘッドレスではなく、あなたのChromeを読み取る — ログイン済みの認証、拡張機能、Cookieがそのまま利用可能
コンソールログ、ネットワークリクエスト、選択要素のインスペクション
組み込み監査機能: Lighthouse形式のパフォーマンス、a11y、SEO、ベストプラクティス、Next.js
すべてのデータはローカルに保持 — クラウドへの通信なし

ライブデモ

実際の動作

browser-tools.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "browser-tools",
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "browser-tools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@agentdeskai/browser-tools-mcp@latest"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latest

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Browser Tools

実際のコンソール＋ネットワークコンテキストを使ってフロントエンドのバグをデバッグする

👤 フロントエンドエンジニア ⏱ ~15 min intermediate

使うタイミング： バグが実際のセッション（ログイン済み、特定のデータ）でしか再現しない場合。エージェントにコンソールとネットワークタブを読み取らせたいとき。

前提条件

Chrome拡張機能のインストール＋ブリッジサーバーの起動 — リリースページから拡張機能をインストールし、ターミナルで npx @agentdeskai/browser-tools-server@latest を実行
MCPサーバーをクライアントに接続 — npx -y @agentdeskai/browser-tools-mcp@latest

フロー

DevToolsを開いた状態でバグを再現する

拡張機能が有効な状態でChromeで対象ページを開き、バグを発生させてください。タブは閉じないでください。✓ コピーしました

→ バグが表示され、拡張機能アイコンがキャプチャ中を示す
コンテキストをエージェントに取り込む

直近50件のコンソールメッセージと失敗したネットワークリクエストを取得してください。ページが出しているエラーを要約してください。✓ コピーしました

→ スタックトレース付きの具体的なエラーが表示される
診断して修正を提案する

エラーに基づいて、原因と思われるファイル/行を特定してください。404の場合は不正なURLを、JSエラーの場合は根本原因を示してください。✓ コピーしました

→ 根拠に基づく具体的な仮説

結果： DevToolsを開いたときと同じコンテキストをエージェントが持つデバッグループ — スクリーンショットの説明を読むよりも高速です。

注意点

ブリッジサーバーが起動していないと、MCPが空データを返す — まず curl localhost:3025/identity がレスポンスを返すことを確認してください。ブリッジはMCP呼び出しの前に起動しておく必要があります
間違ったタブからキャプチャしてしまう — 拡張機能はアクティブなタブをキャプチャします。エージェントに依頼する前に正しいタブをクリックしてください

組み合わせ： sentry

表示中のページにLighthouse形式の監査を実行する

👤 フロントエンド / SEO / a11yエンジニア ⏱ ~10 min beginner

使うタイミング： クリーンなクローラーではなく、実際のセッションでレンダリングされたページを監査したいとき。

フロー

対象ページを開く

拡張機能が有効な状態でChromeで <URL> に移動してください。✓ コピーしました

→ ページが読み込まれた
監査モードを実行する

監査ツールを実行してください — パフォーマンス、a11y、SEO、ベストプラクティス。上位5つの問題と修正案を要約してください。✓ コピーしました

→ 優先度付きの問題リスト
詳細を掘り下げる

アクセシビリティの不合格項目について、正確なセレクタと違反しているWCAGルールをリストしてください。✓ コピーしました

→ 実行可能な改善手順

結果： ブラウザを離れることなく、実際のユーザー状態に基づいた完全な監査が可能です。

注意点

認証が必要なページの監査がツールの再ナビゲーションにより失敗する — 完全な監査の代わりに、デバッガーモードの要素/コンソールツールを使って既に読み込まれたページを検査してください

特定の要素をインスペクトして説明する

👤 フロントエンド開発者、デザイナー ⏱ ~5 min beginner

使うタイミング： 特定のコンポーネントの表示がおかしいとき。手間をかけずに「どのCSSが適用されていて、なぜそうなっているか」を素早く把握したい場合。

フロー

DevToolsで要素を選択する

DevToolsを開き、要素インスペクターをクリックして、問題のある要素を選択してください。✓ コピーしました

→ Elementsパネルで要素がハイライトされる
エージェントにインスペクトを依頼する

選択した要素のcomputed styles、継承ルール、バウンディングボックスを取得してください。なぜそのようにレンダリングされているか説明してください。✓ コピーしました

→ 実際のCSSカスケードに基づいた説明
修正を提案する

[目的のビジュアル]を実現するための最小限のCSS変更を提案してください。変更前/変更後のルールを示してください。✓ コピーしました

→ 最小限の差分の提案

結果： 会話のスピードでCSSデバッグが可能です。

注意点

要素の選択が保持されず、エージェントが別の要素を認識してしまう — 質問する直前に要素を再選択してください。メッセージ間でDevToolsパネルのフォーカスを変更しないでください

組み合わせ

他のMCPと組み合わせて10倍の力を

browser-tools + sentry

Sentryのエラーをあなたのブラウザで再現し、リアルタイムのコンソールコンテキストを取得する

Sentryイシュー WEB-3a91 で /api/checkout へのXHRが500を返すと報告されています。私のChromeでそのページに移動し、再現して、コンソール＋ネットワークをキャプチャしてください。✓ コピーしました

browser-tools + playwright

browser-toolsでライブデバッグし、Playwrightで再現可能なテストを作成する

browser-toolsを使ってライブのChromeでバグを発見しました。同じクリック操作を再現するPlaywrightテストを書いてください。✓ コピーしました

ツール

このMCPが提供する機能

ツール	呼び出すタイミング	コスト
takeScreenshot	現在の状態のビジュアルキャプチャ	free
getConsoleLogs / getConsoleErrors	JSエラーのデバッグ	free
getNetworkLogs / getNetworkErrors	失敗したAPI呼び出しの診断	free
getSelectedElement	ユーザーがDevToolsで要素を選択したとき	free
runAccessibilityAudit	現在のページのa11yレビュー	free
runPerformanceAudit	現在のページのパフォーマンス監査	free
runSEOAudit	SEOレビュー	free
runBestPracticesAudit	一般的なコード品質レビュー	free
runNextJSAudit	Next.jsを使用している場合	free
wipeLogs	調査セッション間のクリア	free

コストと制限

運用コスト

APIクォータ: なし — すべてローカル
呼び出しあたりのトークン: ログダンプは大きくなる場合があります（5,000トークン以上）。セッション間で wipeLogs を使用してください。
金額: 無料、オープンソース
ヒント: 各調査の前にログをワイプしてください — 無関係なノイズの取り込みを防げます

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： なし — 既存のChromeセッションに対して実行されます

データ送信先： localhost:3025（ブリッジ）への通信のみ。エージェント/MCPクライアントを通じた通信を除き、データがマシンの外に出ることはありません。

拡張機能は設計上、ブラウザデータへのアクセス権限を持ちます。公式リリースからのみインストールしてください。権限を付与する前にソースコードを確認してください。

トラブルシューティング

よくあるエラーと対処法

すべてのツールが空 / 'not connected' を返す

ブリッジサーバーが起動していません。専用のターミナルで npx @agentdeskai/browser-tools-server@latest を実行して起動してください。

確認： curl http://localhost:3025/identity

拡張機能アイコンがグレー / inactive

拡張機能アイコンをクリックし、'Connected' と表示されていることを確認してください。表示されない場合はタブをリロードしてください。

監査がtimeoutで失敗する

重いページでは監査に追加の時間が必要な場合があります。他のタブを閉じてCPUを解放し、再実行してください。

間違ったタブがキャプチャされる

拡張機能は最後にアクティブにしたタブをキャプチャします。ツールを呼び出す直前に正しいタブをクリックしてください。

代替案

Browser Tools 他との比較

代替案	代わりに使う場面	トレードオフ
chrome-devtools MCP	ブラウザ拡張機能なしで直接CDPアクセスしたい場合	拡張機能不要だが、実際のユーザーセッションのコンテキストが失われる
Playwright MCP	ライブデバッグではなく、再現可能な自動化が必要な場合	クリーンなブラウザ — ログイン済みセッションは参照できない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る