Browser Tools

🚀 ブラウザツール（BrowserTools）

BrowserToolsは、ブラウザのXHRリクエストやコンソールログの監視、ネットワークトラフィックの分析、DOM要素の取得、スクリーンショットの撮影、ログのクリーンアップなどの機能を提供するツールです。これらの機能を利用することで、開発者はブラウザの動作を詳細に把握し、開発効率を大幅に向上させることができます。

✨ 主な機能

• ブラウザ拡張：XHRリクエスト/レスポンスとコンソールログをリアルタイムで監視します。
• ネットワークトラフィック分析：ネットワークのやり取りを詳細に分析します。
• DOM要素の取得：ページの要素情報を簡単に取得できます。
• スクリーンショット機能：いつでもウェブページの画面をキャプチャできます。
• ログクリーンアップ：保存されているログデータを簡単に削除できます。

📦 インストール

詳細なインストール手順については、以下の公式ドキュメントを参照してください。

• ブラウザツール MCP ドキュメント

🔧 技術詳細

システムは3つの核心コンポーネントで構成されています。

1. Chrome拡張：

   • スクリーンショット、ログ、DOM要素をリアルタイムでキャプチャし、Nodeサーバーに送信します。
   • スクリーンショット機能を実現するためにWebSocketチャネルに接続します。
   • ユーザーがトークンの切り捨て制限とスクリーンショットの保存パスをカスタマイズできます。

2. Nodeサーバー：

   • Chrome拡張とMCPサービスの間のミドルウェアとして機能します。
   • ログの切り捨てと重複オブジェクトの数をスマートに処理し、トークンの超過を防ぎます。
   • MCPクライアントのリクエストに応答し、スクリーンショット、ログ収集などの操作を実行します。

3. MCPサーバー：

   • モデルコンテキストプロトコル（Model Context Protocol）を実装します。
   • 複数のAIエディターやツールクライアントをサポートする統一インターフェースを提供します。
   • Cursor、Cline、Zedなどの主流のMCPクライアントと互換性があります。

📚 ドキュメント

インストールと設定が完了すると、任意の互換性のあるMCPクライアントで以下の操作が可能になります。

• ブラウザのコンソール出力を監視する
• ネットワークトラフィックデータをキャプチャする
• ウェブページのスナップショットを撮る
• 選択したDOM要素を分析する
• 保存されているログ記録をクリーンアップする
• アクセシビリティ、パフォーマンス、SEO、ベストプラクティスの監査を実行する

💻 使用例

基本的な使用法

// 診断ページの読み込み問題
"なぜこのページの読み込みが遅いのですか？"

// 開発モードでのネットワーク分析
"この画像の読み込み状況を分析してください。"

// DOM要素の情報取得
"現在選択されている要素のすべての属性を教えてください。"

// クイックスクリーンショットの検証
"現在のページの状態を見せてください。"

互換性

• すべての主流のMCP互換クライアントをサポートします。
• Cursor IDEに特化して最適化されています。
• 他のAIエディターやツールに対する幅広いサポートを提供します。

BrowserToolsを使用することで、ブラウザの動作分析機能をさまざまな開発プロセスにシームレスに統合し、作業効率を大幅に向上させることができます。