浏览器CSS检查工具

浏览器检查器mcp

为您的AI编码工具提供与浏览器DevTools中相同的CSS可见性。

调试原语，而不是测试工具——没有测试运行器，没有通过/失败。在你的人工智能编写CSS之前，让它看看浏览器中实际有什么——真实呈现的类名、完整的级联规则、获胜的原因以及原因。人类从DevTools获得的数据相同。零手动复制粘贴。当某些东西不起作用时，该工具会解释原因并指出可能的原因。

完整的文档和视觉效果→

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

node --version

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

open -e ~/.claude.json

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

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

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

这解决了问题

通常会发生什么

你要求你的AI工具修复一个样式问题。它读取源文件，写入CSS更改并应用它。您可以检查浏览器。还是错了。AI再次尝试。还是错了。几轮之后，你自己打开DevTools，找到实际的元素，复制HTML，将其粘贴回聊天中——只有这样，人工智能才能理解它实际处理的是什么。

手动复制粘贴步骤？这就是这个工具缩小的差距。

为什么它一直在发生

AI读取源文件。浏览器呈现不同的东西。

Ant Design、Material UI和Radix等现代组件库在运行时生成自己的类名——这些名称不会出现在源代码的任何地方。你的JSX说 <Menu>。浏览器呈现 ant-dropdown-menu-item-containerAI为以下对象编写CSS ant-menu-item 因为这就是它在源头上发现的。这条规则从不适用。

还有第二个问题：即使人工智能瞄准了正确的元素，它也无法确认其变化是否到位。CSS是否适用？有什么东西覆盖了它吗？是 font-weight 是已经大胆了，还是只是看起来如此？没有DevTools，每个答案都是猜测。

这有三种表现方式

问题1——阅读食谱，而不是菜肴

裁缝研究西装的原始设计图案——平纸模板。他们知道每一个接缝。但他们面前的西装是由其他人修改的。模式不是建造出来的。

这是AI读取CSS源文件。它正在读取原始模式。浏览器呈现了一些不同的东西。人工智能不断改变错误的接缝。

检查员是试衣间。在触摸它之前，你先检查一下实际建造的东西。

问题2——调整航空遮阳帘

你在后院调整电视天线。里面有人在看照片。每次你移动它，你都会大喊“好还是坏？”然后等待。每次调整都是一次往返。

这就是推-检查-推循环。AI做出了改变。你走到浏览器。你看。你回来并键入你所看到的。每个循环都是一次往返，拿着天线的人和看屏幕的人之间没有直接联系。

这个工具就是铁丝。AI会自动检查结果，无需你来回走动。

问题3——治疗错误的病人

医生看到一个面色苍白、疲惫不堪的人。如果不检查它们，他们就会认为缺铁并相应地开出处方。六周后，一切都没有改变。一直都是甲状腺。

AI会查看屏幕截图中显示为粗体的文本。它假设 font-weight 设置得很高。它试图覆盖它。但值是400——文本就是以这种大小呈现的。人工智能在会话中解决了一个不存在的问题。

开药前先检查一下。计算出的值就是检查值。

给谁的

使用AI编码工具的设计师 --Cursor、Claude Code、Windsurf、Cline。你通过视觉进行思考和验证。打开DevTools并将HTML粘贴回聊天中是一个令人不快的上下文切换，会打断你的流程。这完全消除了这一步。

前端工程师 他们希望他们的AI配对程序员能够自己完成循环——检查、更改、验证——而不需要浏览浏览器实际渲染的内容。

设计系统贡献者 使用运行时类名与源不匹配的组件库。Ant Design、Material UI、Radix、Shadcn——任何浏览器构建与JSX不同结构的地方。

任何调试CSS的人 谁曾说过“为什么这不适用？”并希望人工智能可以只看浏览器而不是猜测。

与克劳德-铬一起工作

人类学 claude --chrome 集成允许Claude Code在您的实时浏览器中导航、单击、填写表单和截图。浏览器检查器mcp做了一些不同的事情：它读取CSS级联——哪条规则获胜，它来自哪里，为什么一种样式不适用。

他们从事不同的工作。一个好的工作流程：使用 claude --chrome 要导航到要检查的状态，请使用浏览器检查器mcp调试CSS。这两种工具都不能取代另一种。

该工具使用哪个Chrome？

该工具以两种模式之一运行并自动拾取：

托管（默认设置为零）。 什么都不做，该工具就会在幕后启动自己的无头Chrome。非常适合在没有任何配置的情况下检查任何公共URL或本地开发服务器。视口是固定的1440×900。

附（选择加入-更丰富）。 该工具连接到您控制的真实可见的Chrome浏览器：您的真实视口、真实的客户端路由，您可以登录到您的应用程序，以便它检查经过身份验证的有状态页面。有一个重要的问题值得提前了解：

Chrome不会让任何东西调试你的日常配置文件。 自Chrome 136（一款经过深思熟虑的 安全更改)，the --remote-debugging-port 除非Chrome是 也 使用单独的配置文件目录启动。因此，附加模式无法将主Chrome浏览器与现有标签页一起使用——它使用 专用调试Chrome 你设置了一次。把它想象成你的第二个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"

视窗

"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，它在运行之间被擦除，因此每次配置文件都会打开空白。提示：将命令别名为一个按键，并在工作时保持此Chrome打开。

如果调试Chrome未运行，该工具会先尝试连接，然后回退到托管模式 每个响应告诉您使用了哪种模式，所以你永远不会猜到你在看哪个Chrome。

环境变量

将这些设置在AI工具的MCP配置下（ env 旁边的街区 command 和 args):

一个工具，四个动作

dom --查看浏览器实际构建的内容

在AI编写任何CSS之前，它会调用这个。返回您指向的任何元素的实际渲染HTML——实际运行时类名、实际DOM结构。

这是试衣间。人工智能在触摸之前会检查实际构建的内容。

styles --查看每个CSS规则以及谁获胜

当没有显示样式更改时，这将返回元素的完整CSS级联：按顺序匹配的每个规则，它来自哪里（样式表+行号），以及哪些属性是活动的，哪些是覆盖的。

还可以遍历4个级别的祖先元素，并返回其布局关键的计算样式——溢出、大小、flex上下文。当约束不在元素本身上，而是在父元素上时很有用。

AI可以看到你的规则是否达到了元素，是否有什么东西覆盖了它，以及获胜规则的确切定义。

diff --确认实际发生的更改

风格比较之前/之后。第一次调用会保存快照。CSS更改后的第二次调用显示了哪些属性发生了更改以及更改了多少。如果没有什么变化，它明确地说。

这就是人工智能在不手动检查浏览器的情况下知道其修复工作的方式。

screenshot --任何元素的视觉快照

返回任何元素的裁剪截图。人工智能在线接收图像，可以看到它正在处理什么。

在附加模式下，屏幕截图完全反映了您所看到的内容——相同的视口、相同的状态、相同的一切。在托管回退模式下，屏幕截图在无头浏览器中以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模块（Next.js）和Emotion进行了测试。

接下来会发生什么

• 交互原语 — click, hover, type 因此，即使你没有在自己的浏览器中手动设置，人工智能也可以达到交互状态（打开菜单、聚焦环、悬停效果）。仔细限定范围，避免与通用浏览器自动化工具重叠。
• 现场注射 --AI通过CDP直接写入浏览器，您可以立即看到更改，源文件只有在结果得到确认后才会被触摸。循环中没有文件保存或热重新加载。
• 门户和影子DOM支持 --在父级之外渲染的组件库元素（下拉菜单、模态、工具提示）。

许可证

麻省理工学院