browser-inspector-mcp

AIコーディングツールに、ブラウザのDevToolsと同じCSS可視性を提供します。

AIがCSSを書く前に、ブラウザで実際に何が起きているかを確認させましょう。レンダリングされた実際のクラス名、ルールの完全なカスケード、何が適用されていて、なぜそうなるのか。人間がDevToolsから得るのと同じデータを取得します。手動のコピー＆ペーストは不要です。

完全なドキュメントとビジュアル →

要件: Node.js 18以上、MCP対応のAIツール（Claude Code, Cursor, Windsurf, Clineなど）、実行中のローカル開発サーバー。

設定 (AIツールのMCP設定ファイルに追加してください):

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

設定ファイルの場所:

• Claude Code: ~/.claude.json

• Cursor: ~/.cursor/mcp.json または .cursor/mcp.json

• Windsurf: ~/.codeium/windsurf/mcp_config.json

• その他: 各ツールがMCPサーバー設定を読み込む場所

AIツールを再起動します。最初の呼び出しで、開発サーバーが実行されているURLをAIに伝えてください。ブラウザセッションは会話中ずっと維持されます。

1つのツールで4つのアクションが可能です: browser_inspect に action: "dom" (レンダリングされたDOM)、"styles" (完全なCSSカスケード)、"diff" (変更前後の検証)、"screenshot" (視覚的なスナップショット) を指定します。あるいは、必要なことを説明するだけでも、Claudeが適切なアクションを選択します。

初回使用時に、PuppeteerがChromium（約170MB）をダウンロードします。

始める前に — 必要なもの

このツールは、すでにセットアップ済みの「AIコーディングツール」と「現在開発中のWebプロジェクト」の2つを接続します。それぞれが何を意味し、どうやって入手するかを説明します。

1. Node.js (このツールを動かすエンジン)

Node.jsは、コンピュータ上でブラウザの外でJavaScriptを実行できるようにするプログラムです。このツールのインストールと実行に使用するコマンド npm と npx は、Node.jsに含まれています。

すでにインストールされていますか？ ターミナル（Mac）またはコマンドプロンプト（Windows）を開いて、以下を入力してください:

node --version

v20.11.0 のようなバージョン番号が表示されれば問題ありません。エラーが出る場合は、インストールが必要です。

インストール方法: nodejs.org からダウンロードしてください。「推奨版（ほとんどのユーザーに推奨）」を選択してインストーラーを実行するだけです。

2. AIコーディングツール

これは、AIにコードの作成や修正を依頼する際に入力するツールです。このMCPサーバーは以下のいずれかで動作します（1つあれば十分です）:

まだ持っておらず、どこから始めればよいか分からない場合は、Cursor を試してみてください。デザインのバックグラウンドがある場合、最も学習曲線が緩やかです。

3. MCPとは何か（一言で）

MCP (Model Context Protocol) は、ブラウザ、データベース、ファイルシステムなど、AIツールに外部機能へのアクセス権を与えるための標準規格です。このツールはその機能の一つです。AIツールの設定ファイルに数行追加するだけでインストールでき、AIのツールボックスに自動的に表示されます。

4. ローカルで実行中のWebプロジェクト

このツールは、ライブブラウザ内のCSSを検査します。つまり、React、Vue、または同様のアプリなど、現在開発中のWebプロジェクトがコンピュータ上で実行されている必要があります。

プロジェクトをローカルで実行すると、http://localhost:5173 や http://localhost:3000 のようなアドレスで開きます。そのURLをこのツールに伝えます。

ローカルプロジェクトがない場合、このツールは検査対象を持ちません。これはアクティブな開発ワークフロー向けに設計されており、公開されているWebサイトを検査するためのものではありません。

インストール方法

事前に何かをインストールする必要はありません。AIツールを設定する際（次のステップ）、npx というツールを使用して、必要な時に browser-inspector-mcp が自動的にダウンロード・実行されます。

初回実行時には、Chromiumというブラウザ（約170MB）もダウンロードされます。これはツールがページを検査するために使用するヘッドレスブラウザで、バックグラウンドで不可視で動作し、普段お使いのChromeやSafariとは無関係です。

AIツールの設定方法

コンピュータ上のファイルに、小さな設定（JSONブロック）を追加する必要があります。JSONは構造化されたテキスト形式です。ブロックは以下のようになります:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

追加先のファイルは、使用しているAIツールによって異なります。以下から自分のツールを探してください。

重要: 設定ファイルにすでに他の内容が含まれている場合は、置き換えるのではなく、追記してください。以下の例を参照してください。

Claude Code

ファイルの場所: ~/.claude.json

~ はホームフォルダを意味します。Macの場合、/Users/ユーザー名/ です。ファイルが存在しない場合は作成してください。

ターミナルを開いて以下を実行します:

open -e ~/.claude.json

これでTextEditでファイルが開きます。ファイルが存在しなかった場合は新規作成し、以下を貼り付けます:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

ファイルにすでに内容がある場合は、"mcpServers" セクションを見つけて、その中に "browser-inspector" ブロックを追加してください。既存の内容は削除しないでください。

ファイルを保存し、Claude Codeを終了して再起動してください。

Cursor

ファイルの場所: ~/.cursor/mcp.json (すべてのプロジェクトに適用) または特定のプロジェクトフォルダ内の .cursor/mcp.json (そのプロジェクトのみに適用)

Cursorでは、Settings → MCP に移動してください。通常、MCPサーバーを直接追加するためのUIがあり、手動でファイルを編集するよりも簡単です。ファイルを編集したい場合は、上記のJSONブロックを追加してください。

保存後、Cursorを再起動してください。

Windsurf

ファイルの場所: ~/.codeium/windsurf/mcp_config.json

ファイルを開き、同じJSONブロックを追加して保存し、Windsurfを再起動してください。

Cline (VS Code拡張機能)

ClineがインストールされたVS Codeで、Clineサイドバーを開き、設定アイコンをクリックし、「MCP Servers」を見つけて、コマンド npx と引数 ["-y", "browser-inspector-mcp"] で新しいサーバーを追加してください。

その他のツール (Continue, OpenCode, Codexなど)

MCP対応ツールであれば、同じ設定ブロックを受け入れます。ツールのMCPサーバー設定が保存されている場所を見つけて、そこに追加してください。

使用方法

設定が完了すると、ツールは自動的に利用可能になります。名前で呼び出す必要はありません。取り組んでいる内容を説明するだけです。

セッションの開始: 開発サーバーが実行されているURLをAIに伝えます:

I'm working on the dashboard at http://localhost:5173 — the button styles aren't applying correctly.

AIが必要なツールを使用します。ブラウザセッションは会話中ずっと開いたままになるため、URLを伝えるのは一度だけで済みます。

AIが裏で行うこと:

You:  "The icon in the panel header isn't picking up the brand color"

AI:   → browser_inspect(action="dom", selector=".panel-header")
        sees the real rendered class names, finds the icon is <span class="panel__header-icon">
      → browser_inspect(action="styles", selector=".panel__header-icon", properties=["color"])
        sees there's an explicit color rule on the icon overriding the parent
      → fixes the right rule, first try

DevToolsは不要。コピー＆ペーストも不要。やり取りの往復も不要です。

このツールが解決する問題

通常起こること

AIツールにスタイリングの問題の修正を依頼します。AIはソースファイルを読み、CSSの変更を書き込み、適用します。ブラウザを確認します。まだ間違っています。AIが再試行します。まだ間違っています。数回繰り返した後、自分でDevToolsを開き、実際の要素を見つけ、HTMLをコピーし、チャットに貼り付けます。その時初めて、AIは自分が何に対処していたのかを理解します。

その手動のコピー＆ペーストの手順こそが、このツールが埋めるギャップです。

なぜそれが起こり続けるのか

AIはソースファイルを読みますが、ブラウザは異なるものをレンダリングします。

Ant Design、Material UI、Radixのようなモダンなコンポーネントライブラリは、実行時に独自のクラス名を生成します。これらはソースコードのどこにも現れない名前です。JSXには <Menu> と書かれていても、ブラウザは ant-dropdown-menu-item-container をレンダリングします。AIはソース内で見つけた ant-menu-item 用のCSSを書きます。ルールは決して適用されません。

もう一つの問題があります。AIが正しい要素をターゲットにしても、その変更が反映されたかどうかを確認できません。CSSは適用されたのか？何かが上書きしたのか？font-weight は元々太字だったのか、それとも単にそう見えただけなのか？DevToolsがなければ、すべての答えは推測に過ぎません。

3つのシナリオ

問題1 — レシピを読んで、料理を食べていない

仕立て屋がスーツのオリジナルのデザインパターン（平らな紙のテンプレート）を研究します。縫い目はすべて把握しています。しかし、目の前のスーツは、誰かが修正を加えたものです。パターンは実際に作られたものとは異なります。

それが、AIがCSSソースファイルを読んでいる状態です。オリジナルのパターンを読んでいるだけで、ブラウザは別のものをレンダリングしています。AIは間違った縫い目を修正し続けます。

インスペクターは試着室です。触る前に、実際に何が作られたかを確認します。

問題2 — 空中アンテナの調整

裏庭でテレビのアンテナを調整しています。誰かが家の中で映像を見ています。動かすたびに「良くなった？悪くなった？」と叫び、待ちます。調整のたびに往復が発生します。

それが「プッシュ・確認・プッシュ」のサイクルです。AIが変更を加えます。あなたはブラウザまで歩いて行きます。見て、戻ってきて、見たものを入力します。各ループは、アンテナを持っている人と画面を見ている人の間に直接的なつながりがない往復作業です。

このツールはケーブルです。AIがあなたを歩き回らせることなく、自分で結果を確認します。

問題3 — 間違った患者の治療

医者が青白くて疲れている人を見ます。診察せずに鉄分不足と決めつけ、処方します。6週間後、何も変わりません。実は甲状腺の問題でした。

AIはスクリーンショットで太字に見えるテキストを見ます。font-weight が高く設定されていると仮定し、上書きしようとします。しかし、値は400で、テキストはそのサイズでそのようにレンダリングされただけでした。AIは存在しない問題を解決するためにセッションを費やしました。

処方する前に診察してください。計算された値が診察結果です。

対象ユーザー

AIコーディングツールを使用するデザイナー — Cursor, Claude Code, Windsurf, Cline。視覚的に考え、検証する方。DevToolsを開いてHTMLをチャットに貼り付けるのは、流れを断ち切る不快なコンテキストスイッチです。このツールはその手順を完全に取り除きます。

AIペアプログラマーに自律的なループ（検査・変更・検証）をさせたいフロントエンドエンジニア — ブラウザが実際に何をレンダリングしているかを説明する必要はありません。

実行時のクラス名がソースと一致しないコンポーネントライブラリを扱うデザインシステム貢献者 — Ant Design, Material UI, Radix, Shadcnなど、ブラウザがJSXとは異なる構造を構築する場所すべて。

「なぜこれが適用されないのか？」と言い、AIが推測ではなくブラウザを見てくれたらいいのにと思ったことがあるCSSデバッガーすべて。

claude --chromeとの併用

Anthropicの claude --chrome 統合により、Claude Codeはライブブラウザでナビゲート、クリック、フォーム入力、スクリーンショット撮影が可能です。browser-inspector-mcp は異なることを行います。CSSカスケード（どのルールが勝っているか、どこから来たのか、なぜスタイルが適用されないのか）を読み取ります。

これらは異なる仕事のためのものです。良いワークフローは、claude --chrome を使用して検査したい状態に移動し、次に browser-inspector-mcp を使用してCSSをデバッグすることです。どちらのツールも他方に取って代わるものではありません。

1つのツール、4つのアクション

dom — ブラウザが実際に構築したものを見る

AIがCSSを書く前に、これを呼び出します。指定した要素の実際のレンダリング済みHTML（実際の実行時クラス名、実際のDOM構造）を返します。

これは試着室です。AIは触る前に、実際に何が構築されたかを確認します。

styles — すべてのCSSルールと勝者を確認する

スタイルの変更が表示されない場合、要素の完全なCSSカスケードを返します。一致したすべてのルール、順序、ソース（スタイルシート + 行番号）、およびアクティブなプロパティと上書きされたプロパティを確認できます。

また、最大4レベルの祖先要素まで遡り、レイアウトに重要な計算済みスタイル（overflow, sizing, flex context）を返します。制約が要素自体ではなく親にある場合に便利です。

AIは、ルールが要素に到達したかどうか、何かが上書きしているかどうか、勝っているルールが正確にどこで定義されているかを確認できます。

diff — 変更が実際に反映されたかを確認する

スタイルの変更前後の比較です。最初の呼び出しでスナップショットを保存します。2回目の呼び出し（CSS変更後）で、どのプロパティがどれだけ変更されたかを正確に示します。何も変更されていない場合は、明示的にそう伝えます。

これにより、AIはあなたが手動でブラウザを確認しなくても、修正が機能したことを知ることができます。

screenshot — 要素の視覚的スナップショット

要素の切り抜きスクリーンショットを返します。AIは画像をインラインで受け取り、何に取り組んでいるかを確認できます。

スクリーンショットの精度に関する注意: スクリーンショットはヘッドレスブラウザで 1440×900 でレンダリングされます。アプリにレスポンシブなブレークポイントがある場合、スクリーンショットは現在のウィンドウサイズで自分のブラウザで見ているものと一致しない可能性があります。CSSデータアクション (dom, styles, diff) は影響を受けません。ビューポートに関係なく正確なデータを返します。

要件

• Node.js 18以上 — nodejs.org

• MCP対応のAIコーディングツール (Claude Code, Cursor, Windsurf, Cline, Continue, OpenCode, Codexなど)