Browser Inspector MCP Server

@betson-uni

リポジトリホームページ

基本情報

カテゴリ

ブラウザ自動化

ライセンス

MIT

トランスポート

stdio

作者

betson-uni

投稿者

Betson George

Browser Inspector MCP Server について

MCP server that gives AI coding tools the same CSS visibility you have in DevTools — rendered class names, full cascade, what's winning and why.

#css #devtools #browser#inspector#cascade#dom #frontend #puppeteer

Browser Inspector MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

Browser Inspector MCP Server のツール

Inspects a live browser page to get CSS and DOM information — the same data a human sees in browser DevTools. Use this before writing or debugging CSS to verify what the browser actually renders, not just what the source code says. Four actions available: 'dom' gets the rendered HTML structure, 'styles' gets the full CSS cascade, 'screenshot' captures a visual snapshot, 'diff' compares styles before and after a change. Call with action 'help' if unsure.

概要

What is Browser Inspector Mcp?

Browser Inspector Mcp gives your AI coding tool the same CSS visibility you have in browser DevTools. It is a debugging primitive—not a testing tool—that lets the AI see the real rendered class names, the full cascade of CSS rules, what is winning and why. It eliminates manual copy-paste and explains why a rule isn’t applying, pointing toward the likely cause. It is designed for developers using MCP-compatible AI tools (Claude Code, Cursor, Windsurf, Cline, etc.) who work on local web projects.

How to use Browser Inspector Mcp?

Install via npx: add the JSON config block to your AI tool’s MCP configuration file (locations vary by tool). Requirement: Node.js 18+, an MCP-compatible AI tool, and a running local dev server. On first use, tell your AI what URL your dev server is running on; the browser session persists for the entire conversation. The tool provides a single browser_inspect function with four actions: "dom" (rendered DOM), "styles" (full CSS cascade), "diff" (before/after verification), and "screenshot" (visual snapshot). On first run, Puppeteer downloads Chromium (~170MB).

Key features of Browser Inspector Mcp

Gives AI access to real rendered DOM and computed CSS.
Four actions: DOM, styles, diff, and screenshot.
Browser session persists across an entire conversation.
Explains why a CSS rule isn’t applying.
No manual copy-paste of browser data required.
Works with component libraries that generate runtime class names (Ant Design, Material UI, Radix, Shadcn).
Designed for active local development workflows.

Use cases of Browser Inspector Mcp

Fixing styling issues where AI reads source files but the browser renders different class names (e.g., Ant Design components).
Verifying that a CSS change landed correctly in the browser.
Debugging computed styles without opening DevTools or copy-pasting.
For designers using AI coding tools to inspect and adjust visual output.
For frontend engineers wanting their AI to inspect, change, and verify in one loop.

よくある質問

Which MCP-compatible AI tools are supported?

The tool works with Claude Code, Cursor, Windsurf, Cline, Continue, and any MCP-compatible coding tool that accepts the same JSON configuration.

What are the system requirements?

Node.js 18+, an MCP-compatible AI tool, and a running local dev server with a web project. The first use also downloads Chromium (~170MB) via Puppeteer.

How is this different from a testing tool?

Browser Inspector Mcp is a debugging primitive, not a testing tool—there is no test runner, no pass/fail. It only shows what the browser has rendered and why, without making assertions.

Does it work with public websites?

No. It is designed for active development workflows and requires a local web project running on your computer (e.g., a React, Vue, or similar app on localhost).

How does the browser session work?

The headless Chromium session persists for the whole conversation. You only need to mention your dev server URL once; the AI can keep inspecting, verifying, and screenshotting without reconnecting.

「ブラウザ自動化」の他のコンテンツ

Loadster

loadster

Loadster is a load testing, stress testing, and synthetic monitoring platform. Run Playwright, Browser Bots, and Protocol Bots to test and monitor your websites, web apps, and APIs. Loadster MCP gives your agents the abi