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.

浏览器自动化分类下的更多 MCP 服务器

Fetch

modelcontextprotocol

Model Context Protocol Servers

88.1K

QuantumProxies — Residential, Mobile & Datacenter Proxy MCP Server

quantumproxies

Give your AI agent its own proxies. QuantumProxies exposes residential, mobile, datacenter, ISP and IPv6 endpoints as MCP tools: list your plans, generate ready-to-use proxy strings with credentials, target by country, s