如何使用 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、 间距展示

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容