Repolode
投稿する
AgentDeskAI

AgentDeskAI/browser-tools-mcp

ログイン済みのChromeセッションから、コンソールログ、ネットワーク通信、スクリーンショット、Lighthouse監査の結果をAIコーディングエージェントに提供するMCPサーバーとChrome拡張機能です。

GitHub で見る公式サイト
スター
7,332
フォーク
536
未解決の Issue
2
最終コミット
9 日前

これは何？

BrowserTools MCPを使うと、AIコーディングエージェントが実際に作業しているページを調べられます。DevTools拡張機能を介して既存のChromeセッションに接続するため、ログイン状態を保ったまま、コンソール出力、ネットワークアクティビティ、スクリーンショット、Lighthouse監査の結果を、Cursor、Claude Code、Windsurf、Cline、Zed、Gemini CLIなどのMCP対応クライアントに送信できます。

このプロジェクトは、自動テストの作成ではなく、実際に動作しているアプリのデバッグを想定しています。Chrome DevTools MCPやPlaywright MCPのような自動化向けサーバーは新しいブラウザプロファイルを操作するため、デバッグ前にログイン状態を再現する必要があります。一方、BrowserToolsはすでに開いているセッションを読み取ります。セットアップはMCPサーバーのコマンドを実行し、同梱の拡張機能をパッケージ化されていないChrome拡張機能として読み込むだけです。コネクターはサーバー自体が実行します。

サーバーはloopbackインターフェースのみにバインドし、HTTP APIの利用には実行ごとのトークンを要求します。また、取得データがブラウザーの外に出る前に、AuthorizationやCookieヘッダー、一般的なトークン形式などの認証情報を除去します。DevToolsを開いている複数のタブは個別に追跡され、大きなペイロードはMCPリソースとして公開されるため、要求されたときだけエージェントのコンテキストに取り込まれます。

主な機能

  • 01現在のChromeタブからコンソールログ、エラー、ネットワークリクエストをストリーミングします。
  • 02スクリーンショットを取得し、画像としてエージェントに返します。
  • 03Lighthouseでアクセシビリティ、パフォーマンス、SEO、ベストプラクティスを監査します。
  • 04取得したヘッダーや文字列から認証情報を除去してから、ブラウザーの外に送信します。
  • 05複数のタブを個別に追跡し、特定のタブIDを指定してツールを実行できます。
  • 06ログ結果をフィルタリングしたりページ分割したりして、レスポンスを小さく保てます。

ユースケース

  • ログイン済みのページで発生しているコンソールエラーの原因を、エージェントに調べてもらう。
  • Webアプリをローカルで開発しながら、失敗するAPIリクエストや遅いAPIリクエストをデバッグする。
  • 別のテスト用プロファイルを用意せずに、ページのLighthouse監査を実行する。
  • 実際のページのスクリーンショットをエージェントに確認させ、UIの変更を視覚的にチェックする。

クイックスタート

  1. 1

    MCP クライアントの設定に MCP サーバーを追加します

    npx -y @agentdeskai/browser-tools-mcp@latest
  2. 2

    リポジトリをダウンロードするか、クローンします

  3. 3

    chrome://extensions でデベロッパーモードを有効にし、chrome-extension ディレクトリをパッケージ化されていない拡張機能として読み込みます

  4. 4

    調査したいページで Chrome DevTools（F12）を開きます

使う前に知っておきたいこと

  • Node 22.19 以降が必要です。
  • Firefox は検証されていないため、非対応として扱われます。
  • ネットワークキャプチャで記録されるのは、DevTools を開いた後に行われたリクエストのみです。

収録されている特集

Claude Code のツール・スキル・プラグインAI コーディングアシスタントとエージェントMCP サーバーChrome・ブラウザ拡張機能

トピック

#mcp#browser-debugging#chrome-extension#lighthouse#developer-tools#ai-coding#console-logs#network-debugging#ai#anthropic

よくある質問

browser-tools-mcp とは？
ログイン済みのChromeセッションから、コンソールログ、ネットワーク通信、スクリーンショット、Lighthouse監査の結果をAIコーディングエージェントに提供するMCPサーバーとChrome拡張機能です。 BrowserTools MCPを使うと、AIコーディングエージェントが実際に作業しているページを調べられます。DevTools拡張機能を介して既存のChromeセッションに接続するため、ログイン状態を保ったまま、コンソール出力、ネットワークアクティビティ、スクリーンショット、Lighthouse監査の結果を、Cursor、Claude Code、Windsurf、Cline、Zed、Gemini CLIなどのMCP対応クライアントに送信できます。
browser-tools-mcp は無料で使えますか？ライセンスは？
browser-tools-mcp は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
browser-tools-mcp は今もメンテナンスされていますか？
活発にメンテナンス中。browser-tools-mcp の最終コミットは 2026年10月16日 です。
browser-tools-mcp は何に使えますか？
ログイン済みのページで発生しているコンソールエラーの原因を、エージェントに調べてもらう。 Webアプリをローカルで開発しながら、失敗するAPIリクエストや遅いAPIリクエストをデバッグする。 別のテスト用プロファイルを用意せずに、ページのLighthouse監査を実行する。 実際のページのスクリーンショットをエージェントに確認させ、UIの変更を視覚的にチェックする。
browser-tools-mcp のインストール方法は？
MCP クライアントの設定に MCP サーバーを追加します: npx -y @agentdeskai/browser-tools-mcp@latest リポジトリをダウンロードするか、クローンします chrome://extensions でデベロッパーモードを有効にし、chrome-extension ディレクトリをパッケージ化されていない拡張機能として読み込みます 調査したいページで Chrome DevTools（F12）を開きます
browser-tools-mcp はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/AgentDeskAI/browser-tools-mcp

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト