CSS Peeper 是为设计师量身定制的 CSS 查看器。其能快速读取网站上的行高、字体或按钮大小,能够以最简单的方式检查代码。检查网络上对象、颜色和资产的隐藏 CSS 样式。
插件下载地址(需要安全上网):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、 间距展示
选中块后点击另一个块会展示它们之间的间距

网友评论