GrabCSS

GrabCSS 是一款浏览器扩展，让网页元素样式抓取变得前所未有的简单。无需再打开 DevTools 在层层继承规则中翻找，只需将鼠标悬停在任意元素上，即可在跟随光标的小卡片中查看其清晰的 CSS 代码，一键复制。

核心功能

• 悬停即见：鼠标悬停任意元素，实时显示其 CSS 属性，包括字体、颜色、盒模型等。
• 一键复制：点击即可复制元素的 CSS 或 HTML，支持单独或同时复制。
• 状态捕获：能捕获 DevTools 通常隐藏的 :hover、:focus、:active 等伪类状态样式。
• 对比度检查：内置 WCAG 对比度检测，确保色彩可访问性。
• 颜色色板：显示颜色色块，方便识别和复用。

主要特性

• 智能跟随：卡片跟随光标移动，不遮挡目标元素。
• 干净输出：过滤掉继承和冗余规则，只保留直接影响元素的样式。
• HTML 支持：同时复制格式化的 HTML 结构，便于重构。
• 多浏览器：支持 Chrome 和 Edge，安装即用。
• 开发者友好：大幅提升前端开发、设计稿还原、竞品分析效率。

适用场景

• 前端开发：快速提取参考网站的样式代码，加速开发。
• 设计验证：检查色彩对比度、字体使用，确保设计一致性。
• 学习研究：分析优秀网站的 CSS 实现，提升技术能力。
• 代码复用：一键复制组件样式，减少重复劳动。