広告掲載
MCP.so
ログイン

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 のツール

1

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.

よくある質問

1

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.

2

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.

3

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.

4

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).

5

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.

コメント

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

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

Fetcher MCP

jae-jae

MCP server for fetch web page content using Playwright headless browser.

1.1K

Playwright MCP Server 🎭

executeautomation

Playwright Model Context Protocol Server - Tool to automate Browsers and APIs in Claude Desktop, Cline, Cursor IDE and More 🔌

5.6K

Apify Model Context Protocol (MCP) Server

apify

The Apify MCP server enables your AI agents to extract data from social media, search engines, maps, e-commerce sites, or any other website using thousands of ready-made scrapers, crawlers, and automation tools available on the Apify Store.

1.7K

Full Self Browsing

Lakshman Turlapati

DOM-first AI browser automation for Chrome and MCP clients.

194
広告掲載