CSS Peeper 是一款面向设计师和开发者的 Chrome 扩展，用于从网页中查看设计样式与 CSS 信息。它将网页检查集中在样式、颜色、字体、资源和可访问性等内容上，用户可以通过简单的点击探索页面，而不必反复翻找复杂代码。与直接使用开发者工具相比，CSS Peeper 更强调为设计检查和网页风格分析提供清晰的视图，并支持导出颜色调色板、提取页面资源以及查看完整的样式概览。官网显示，这款扩展已有超过 500,000 名设计师和开发者使用，并在 Google Chrome Store 上获得展示。
核心功能
CSS 样式检查
CSS Peeper 可以查看网页元素的 CSS 属性，帮助用户了解页面中具体元素使用的样式。官网将这一功能描述为通过简单的点选探索样式，减少在代码中查找 CSS 信息的过程。检查结果面向网页中的设计属性，适合用于分析页面元素的视觉实现。
颜色查看与调色板导出
扩展可以探索网站正在使用的各种颜色，并提供颜色检查能力。用户可以查看页面中的颜色并寻找配色灵感；如果需要继续使用某组配色，还可以一键导出颜色调色板。定价页还列出了颜色浏览、颜色实例预览和语义颜色分组等相关能力，其中部分能力属于更高等级方案。
字体与排版分析
CSS Peeper 能够查看网站中的字体和文字属性，帮助用户了解页面使用的字体组合。它支持探索页面中的排版，并查看文字样式；官网还列出文字样式浏览、排版层级预览和定位文字样式实例等排版相关能力。这样可以在检查网页时关注字体、文字属性以及不同文本样式之间的关系。
页面资源提取
扩展可以从页面中提取资源，包括图片、图标和 SVG。官网将这一功能用于获取页面中隐藏在代码里的资源，用户可以更方便地收集页面素材，用于后续的重新设计或其他设计工作。定价页的功能对比中也列出了浏览图片、图标和 SVG，以及导出图片等资源相关项目。
对比度与可访问性检查
CSS Peeper 提供与颜色对比度相关的洞察，用于了解对比度如何影响可读性。官网介绍了对比度检查和对比度问题扫描功能，帮助用户发现页面颜色组合中的可访问性问题。该功能适用于在检查视觉样式时同步关注网页的可读性与可访问性标准。
样式综合概览
除了针对单个元素的检查，CSS Peeper 还可以提供页面样式的综合概览。概览内容包括颜色、对比度、排版和 CSS 属性，使用户能够从整体上了解一个网站的视觉样式，而不只是查看某个局部元素。官网将其定位为设计师和开发者进行网页风格分析时使用的集中式工具。
使用方式
CSS Peeper 以 Chrome 扩展形式提供，官网通过 Chrome Web Store 提供安装入口。使用时可以在网页中进行样式检查、颜色查看、排版分析、资源提取和样式概览。官网正文没有提到独立客户端、命令行工具、开放 API 或需要自备模型 Key；也没有说明必须注册后才能使用全部功能。扩展支持颜色调色板导出，并提供图片等页面资源的导出能力。
适用人群与场景
设计师可以用它检查网页的颜色、字体、文字样式和整体视觉层级，分析参考网站的设计细节。前端开发者可以查看页面元素的 CSS 属性、颜色对比度和资源内容，减少在代码或开发者视图中查找属性的过程。品牌与网页设计团队可以提取图片、图标和 SVG，并收集网页中的颜色调色板，用于客户品牌匹配、页面分析或重新设计。关注可访问性的人员则可以使用对比度检查和问题扫描来查看颜色组合对可读性的影响。
定价
CSS Peeper 提供 Free 基础方案，价格为 $0，且标注为永久免费，但功能有限。Professional 方案按年计费时为每月 $2.49，原价显示为 $2.99；Ultra 方案按年计费时为每月 $4.99，原价显示为 $5.99。官网还标注年度方案最高可节省 40%。功能对比中，免费方案的 Smart inspections 为每天 3 次，Professional 和 Ultra 为无限次；更高方案还提供相应的高级功能。
