Browser Inspector Mcp

browser-inspector-mcp

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

テストツールではなく、デバッグのための基本ツールです。テストランナーも合否判定もありません。AI が CSS を書く前に、ブラウザー上で実際に何が表示されているかを確認できるようにします。実際に描画されたクラス名、ルールのカスケード全体、どのルールが優先されるのか、そしてその理由を確認できます。人間が DevTools で確認できるデータと同じです。手動でコピー＆ペーストする必要はありません。うまくいかない場合は、その理由を説明し、原因と思われる箇所を示します。

ドキュメントとビジュアルの全文はこちら →

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

node --version

このツールは、実際に動作しているブラウザーで CSS を調査します。そのため、お使いのコンピューターでウェブプロジェクトを実行している必要があります。通常は、開発中の React、Vue などのアプリです。

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

ローカルプロジェクトがない場合、このツールで調査できるものはありません。このツールは、公開中のウェブサイトの調査ではなく、開発中のワークフロー向けに設計されています。

インストール方法

事前にインストールする必要はありません。次の手順で 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/yourname/ です。ファイルがまだ存在しない場合は、作成してください。

ターミナルを開いて、次のコマンドを実行します。

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 は元の型紙を読んでいます。ブラウザーがレンダリングしたものは異なります。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 に記述されたものとは異なる構造をブラウザーが構築するあらゆるライブラリが対象です。

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

claude --chrome との併用

Anthropic の claude --chrome 統合を使うと、Claude Code で実際に動作しているブラウザーを操作し、ページの移動、クリック、フォームへの入力、スクリーンショットの撮影ができます。browser-inspector-mcp は別のことを行います。CSS カスケード、つまりどのルールが優先されるか、そのルールの出どころ、スタイルが適用されない理由を読み取ります。

用途が異なるツールです。おすすめのワークフローは、claude --chrome で確認したい状態に移動し、その後 browser-inspector-mcp で CSS をデバッグすることです。どちらかがもう一方の代わりになることはありません。

このツールが使用する Chrome はどれですか？

このツールは 2 つのモードのいずれかで動作し、自動的に選択します。

管理モード（セットアップ不要 — デフォルト）。 何もせずに使うと、ツールがバックグラウンドで専用のヘッドレス Chrome を起動します。設定不要で、公開 URL やローカルの開発サーバーを調べるのに最適です。ビューポートは 1440×900 に固定されています。

接続モード（オプトイン — より高機能）。 ツールは、ユーザーが操作する実際の Chrome に接続します。実際のビューポートやクライアント側のルートを使えるほか、アプリにサインインして、認証が必要な状態を持つページを調べられます。ただし、事前に知っておくべき重要な注意点が 1 つあります。

Chrome では、普段使っているプロファイルを使ったデバッグはできません。 Chrome 136 以降では、意図的なセキュリティ変更により、Chrome を別のプロファイルディレクトリとともに起動しない限り、--remote-debugging-port フラグは無視されます。そのため、接続モードでは既存のタブが開いているメインの Chrome は使えません。一度セットアップする専用のデバッグ用 Chromeを使用します。調査専用の 2 つ目の Chrome と考えてください。そこでアプリに一度サインインすれば、その後もログイン状態が維持されます。

一度セットアップして起動したままにしておけば、ツールは自動的に接続します。

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir="$HOME/.chrome-debug-profile"

Linux

google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.chrome-debug-profile"

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --remote-debugging-port=9222 ^
  --user-data-dir=%LOCALAPPDATA%\chrome-debug-profile

--user-data-dirは必須です。指定しない場合、Chrome 136 以降はデバッグポートを何も通知せずに無視し、ツールは管理モードにフォールバックします。上記のような固定のパス（永続的なフォルダー）を使い、/tmpは使わないでください。/tmpは実行のたびに消去されるため、プロファイルが毎回空の状態で開きます。コマンドをエイリアスに登録して一発で実行できるようにし、作業中はこの Chrome を開いたままにしておくのがおすすめです。

ツールはまず接続モードを試し、デバッグ用 Chrome が起動していない場合は管理モードにフォールバックします。また、どのモードを使用したかはレスポンスのたびに表示されるため、どの Chrome を見ているのか迷うことはありません。

環境変数

AI ツールの MCP 設定（commandおよびargsと同じ階層にあるenvブロック）に、次の値を設定してください。

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

dom — ブラウザーが実際に構築した内容を見る

AI が CSS を記述する前に、このツールを呼び出します。指定した要素について、実際にレンダリングされた HTML、つまり実行時のクラス名や実際の DOM 構造を返します。

これは試着室のようなものです。AI は変更を加える前に、実際に構築された内容を確認します。

styles — すべての CSS ルールと、優先されているルールを見る

スタイルの変更が反映されない場合、このツールは要素に適用された CSS カスケード全体を返します。一致したすべてのルールとその順序、適用元（スタイルシートと行番号）、有効なプロパティと上書きされたプロパティを確認できます。

さらに、祖先要素を最大 4 階層さかのぼり、レイアウトに重要な計算済みスタイル（overflow、サイズ、フレックスのコンテキスト）を返します。制約が対象の要素自体ではなく、親要素にある場合に役立ちます。

AI は、ルールが要素に適用されているか、別のルールに上書きされているか、そして優先されているルールがどこで定義されているかを正確に確認できます。

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

変更前と変更後のスタイルを比較します。最初の呼び出しでスナップショットを保存し、CSS の変更後に 2 回目を呼び出すと、変更されたプロパティと変更量を正確に表示します。何も変わっていない場合は、その旨を明示します。

これにより、AI はユーザーが手動でブラウザーを確認しなくても、修正が機能したかどうかを把握できます。

screenshot — 任意の要素のビジュアルスナップショット

任意の要素を切り抜いたスクリーンショットを返します。AI は画像をインラインで受け取り、対象の状態を確認できます。

アタッチモードでは、スクリーンショットに表示されるのは、現在見えているものそのものです。同じビューポート、同じ状態など、すべてが一致します。管理フォールバックモードでは、スクリーンショットはヘッドレスブラウザーで 1440×900 のサイズに描画されるため、現在のウィンドウサイズでご自身の Chrome に表示されているものとは異なる場合があります。CSS データアクション（dom、styles、diff）は、どちらのモードでも正確なデータを返します。

openInNewTab — アタッチモード用のオプション修飾子

ツールを Chrome にアタッチし、開いているタブのいずれにも一致しない url を渡した場合、デフォルトではアクティブなタブを調べ、警告を追加します。現在のタブに触れずに調べたい公開サイトなど、指定した URL を新しいタブで開く場合は、openInNewTab: true を渡してください。アタッチモードでのみ適用され、それ以外では無視されます。

要件

• Node.js 18 以降 — nodejs.org
• MCP 対応の AI コーディングツール（Claude Code、Cursor、Windsurf、Cline、Continue、OpenCode、Codex など）
• 調査したいローカルで実行中の Web プロジェクト

あらゆる CSS の手法で動作します — Tailwind JIT、CSS Modules（Next.js）、Emotion でテスト済みです。

今後の予定

• インタラクションプリミティブ — click、hover、type により、ブラウザーで手動設定していない場合でも、AI がインタラクティブな状態（開いたメニュー、フォーカスリング、ホバーエフェクト）を確認できます。汎用のブラウザー自動化ツールと重複しないよう、慎重に範囲を限定します。
• スタイルのライブインジェクション — AI が CDP 経由でブラウザーに直接書き込み、変更をすぐに確認できます。結果が確定してから初めてソースファイルに変更を加えます。ファイルの保存やホットリロードを挟みません。
• ポータルとシャドウ DOM のサポート — 親要素の外部に描画されるコンポーネントライブラリの要素（ドロップダウン、モーダル、ツールチップ）。

ライセンス

MIT