BrowserTools MCP: ブラウザの動作をリアルタイムで監視するMCPサービス

はじめに

ブラウザツール エムシーピー は、AgentDeskAIチームによって開発されたオープンソースプロジェクトです。Chromeの拡張機能とNode.jsのサービスを使用し、AIがログ、ネットワークリクエスト、スクリーンショットを含むブラウザのアクティビティをリアルタイムで監視したり、ウェブのパフォーマンス、SEO、アクセシビリティを分析したりすることができます。このプロジェクトは アンソロピック MCPプロトコル。 カーソル 最新バージョン1.2.0は2025年2月にリリースされ、GitHubでは2400以上の星を獲得している。最新バージョン1.2.0は2025年2月にリリースされ、GitHubでは2400以上の星を獲得している。特にウェブページのデバッグやウェブサイトの最適化を行う開発者にとっては、シンプルで実用的であり、すべてのデータはサードパーティのサービスを介さずにローカルに保存される。

機能一覧

• ブラウザのコンソールログをリアルタイムで取得し、コードの問題を突き止める。
• リクエストのステータスやエラーについて、ネットワークリクエストを監視する。
• 現在のウェブ画面をキャプチャし、保存またはエディタに貼り付けます。
• ウェブページのDOM要素を分析し、特定のデータを抽出します。
• パフォーマンス監査を実施し、読み込みが遅い原因を突き止める。
• SEOの最適化をチェックし、改善のための提案を行う。
• アクセシビリティ監査を実施し、WCAGに準拠。
• フレームワークの問題を最適化するためのNextJSプロジェクト監査のサポート。
• すべてのデバッグ・ツールを順番に実行するデバッグ・モードを提供する。
• すべての監査ツールを順番に実行する監査モードを提供します。

ヘルプの使用

BrowserTools MCPを実行するには、Chrome拡張機能、Nodeサーバー、MCPサーバーの3つのコンポーネントが必要です。ここでは、すぐに使い始められるように、インストールと使い方のガイドを詳しく説明します。

設置プロセス

1. クローム拡張機能をインストールする
   • https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip、拡張機能をダウンロードしてください。
   • ZIPファイルをローカルフォルダに解凍します。
   • クロームを開き chrome://extensions/.
   • デベロッパーモード」をオンにし、「拡張機能のロード」をクリックします。
   • 解凍したフォルダを選択し、リストに拡張子が表示されていることを確認します。
2. ノードサーバーの実行
   • Node.jsがコンピュータにインストールされていることを確認してください（18歳以上推奨）。
   • ターミナルを開いて実行する：

     npx @agentdeskai/browser-tools-server@latest
     

   • Server running on port 3025 "と表示された場合は、起動に成功したことを示している。
   • ポートの競合がある場合は、占有プロセスを終了して再試行する。
3. MCPサーバーの設定（例としてのカーソル）
   • Cursorを開き、Settings > MCPに進む。
   • 新しいグローバルMCPサービスを追加」をクリックします。
   • コンパイラ ~/.cursor/mcp.json加える：

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

   • 設定を保存して更新すると、緑の点が接続成功を示します。

主な機能の操作

1. コンソールのログを監視する
   • 対象のウェブページを開き、F12キーを押して開発者ツールにアクセスする。
   • BrowserToolsMCP "パネルの "Connect "をクリックします。
   • ログはリアルタイムで表示され、"Save Logs "をクリックしてローカルに保存できる。
2. ウェブリクエストの取得
   • ネットワーク]タブでリクエストの詳細を表示します。
   • カーソル入力 mcp_getNetworkLogs すべてのリクエストを取得する mcp_getNetworkErrors エラー要求を表示する。
3. スクリーンキャプチャ
   • 拡張パネルで保存パスを設定する（デフォルト） /mcp-screenshots).
   • スクリーンショットを保存するには「スクリーンショットを撮る」をクリックします。
   • カーソルへの自動貼り付けを許可」を有効にすると、カーソル入力ボックスにフォーカスがある状態でスクリーンショットが自動的に貼り付けられます。
4. 監査ツールの実行
   • エクステンションが有効になっていて、アクティブなページがあることを確認してください。
   • カーソルで次のコマンドを入力する：
     • runAccessibilityAuditアクセシビリティのチェック（WCAG）。
     • runPerformanceAuditパフォーマンスのボトルネックを分析する。
     • runSEOAuditSEOの最適化
     • runBestPracticesAuditベストプラクティスのチェック
     • runNextJSAuditNextJSプロジェクトの監査。
     • runAuditModeすべての監査を順次実行する。
     • runDebuggerModeすべてのデバッグツールを順番に実行します。
   • 結果はスコアと質問の詳細とともにJSON形式で返されます。
5. 試運転モードと監査モード
   • 輸入 runDebuggerMode問題を特定するために、デバッグ・ツールを順番に実行してください。
   • 輸入 runAuditModeこのようにして、監査ツールを順次実行し、すべての最適化ポイントを検出する。
   • NextJSプロジェクトは、関連する監査を自動的に認識し、追加実行する。

ほら

• 開発者ツールのウィンドウは1つだけ開いてください。複数開くとデータが混乱する可能性があります。
• サービスを再起動したり、ページを更新したりするとログはクリアされるので、あらかじめ保存しておくことをお勧めします。
• ご不明な点は@tedx_ai (Platform X)までお問い合わせいただくか、https://browsertools.agentdesk.ai/ のドキュメントをご覧ください。

これらのステップにより、BrowserTools MCPのパワーをフルに活用し、ウェブ開発の効率を向上させることができます。

アプリケーションシナリオ

1. ウェブデバッギング
   開発者は、ログやネットワークを監視してコードエラーを素早く見つけるために使う。
2. ウェブサイトの最適化
   パフォーマンスとSEOを分析する監査ツールでユーザー体験を向上。
3. AI開発支援
   AI開発者はカーソルを組み込んで、リアルタイムのデータを使ってスマート・アプリケーションを最適化する。

品質保証

1. なぜログが表示されないのか？
   エクステンションとサーバーが接続されていることを確認し、デベロッパーツールのウィンドウが複数回開かれていないことを確認します。
2. 監査結果はどこで見るのか？
   CursorなどのMCPクライアントでコマンドを実行すると、結果がJSON形式で返されます。
3. 他のブラウザはサポートされていますか？
   現在はクロームのみサポートされているが、将来的には拡張される可能性もある。