css-noop-checker

Name: css-noop-checker
Rating: 2.2 (25 reviews)
Author: purupurupu

by purupurupu·★ 25·综合分 44

Chrome DevTools 扩展，带 MCP 服务器，检测无效的 CSS 属性。

developer-toolsai-llmbrowser-automation

Forks

活跃 Issue

2 个月前

概述

CSS Noop Checker 既是 Chrome DevTools 扩展又是 MCP 服务器，能识别对元素应用时无效的 CSS 属性。它提供按上下文分类的详细检测规则（内联、块级、容器等），并提供包含解释和修复建议的可用性警告。MCP 服务器实现在 Playwright 中支持 AI 辅助分析。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

你:AI 助手帮助开发者识别和修复无效的 CSS 代码

你:自动化代码审查工具检测 CSS 反模式

你:用于学习哪些 CSS 属性在哪些上下文中有效教育工具

你:CSS Noop Checker 检测什么？

你:MCP 服务器功能如何工作？

什么时候选它

当您需要AI助手检测对元素无效的CSS属性时，选择此服务器，特别是在分析网页或CSS代码以寻找优化机会时。

什么时候不要选它

如果您需要根据官方规范而非浏览器行为进行CSS验证，或者使用非Chromium浏览器，请不要选择此服务器。

此 server 暴露的工具

从 README 抽取出 3 个工具

list_rules
List all available CSS noop detection rules
check_element
Check selected element for CSS properties with no effect
scan_page
Scan entire page for elements with ineffective CSS properties

可对比工具

stylelint-mcpcsslintwebhint-mcpaxe-mcp

安装

安装 Chrome 扩展：

打开 chrome://extensions 并启用开发者模式
点击 **加载已解压的扩展程序** 并选择 dist/ 目录
在任何页面上打开 DevTools → **元素** 标签 → **CSS Noop** 侧边栏面板

安装 MCP 服务器：

{
  "mcpServers": {
    "css-noop-checker": {
      "command": "npx",
      "args": ["css-noop-checker"]
    }
  }
}

FAQ

CSS Noop Checker 检测什么？: 它检测由于布局上下文而对所应用元素没有可见效果的 CSS 属性，例如内联 <span> 上的 'width' 或非 flex/grid 容器上的 'gap'。
MCP 服务器功能如何工作？: MCP 服务器将 CSS 检测规则作为工具通过 Playwright 自动化暴露给 AI 助手，用于分析 CSS 代码并提供建议。

css-noop-checker 对比

css-noop-checker vs ultimate_mcp_server css-noop-checker vs mcp-server-chart css-noop-checker vs everything css-noop-checker vs filesystem css-noop-checker vs time

GitHub →

最后更新于 2026-05-17 · 由 README + GitHub 公开数据自动生成。