如何使用 CSS Peeper 插件进行UI走查

CSS Peeper 是为设计师量身定制的 CSS 查看器。其能快速读取网站上的行高、字体或按钮大小，能够以最简单的方式检查代码。检查网络上对象、颜色和资产的隐藏 CSS 样式。

官网：https://csspeeper.com/

插件下载地址（需要安全上网）：https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk/related

一、 基本功能

1.1、概括

读取当前页面的标题字体与文本字体

1.2、颜色

读取当前页面的颜色支持一键取色，可一键导出zip至本地

1.3、组件

读取当前页面的img文件和svg文件，可一键导出zip至本地

二、 功能详细说明

1、 数据展示

可通过鼠标选择页面中的div和span点击后展示数据(尺寸、字体、字号、行高、对齐方式、字间距、填充颜色、背景颜色)

*注意事项

插件中黑色区域为选中块的尺寸，包括margin和padding尺寸

浏览器检查中蓝色区域为选中块内容的尺寸，不包括margin和padding尺寸

2、 间距展示

选中块后点击另一个块会展示它们之间的间距