CSS Peeper 是為設(shè)計(jì)師量身定制的 CSS 查看器。其能快速讀取網(wǎng)站上的行高夫椭、字體或按鈕大小盛垦,能夠以最簡(jiǎn)單的方式檢查代碼棕诵。檢查網(wǎng)絡(luò)上對(duì)象裁良、顏色和資產(chǎn)的隱藏 CSS 樣式。
官網(wǎng):https://csspeeper.com/
插件下載地址(需要安全上網(wǎng)):https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk/related
一校套、 基本功能
1.1价脾、概括
讀取當(dāng)前頁面的標(biāo)題字體與文本字體
1.2、顏色
讀取當(dāng)前頁面的顏色支持一鍵取色笛匙,可一鍵導(dǎo)出zip至本地
1.3侨把、組件
讀取當(dāng)前頁面的img文件和svg文件犀变,可一鍵導(dǎo)出zip至本地
二、 功能詳細(xì)說明
1秋柄、 數(shù)據(jù)展示
可通過鼠標(biāo)選擇頁面中的div和span點(diǎn)擊后展示數(shù)據(jù)(尺寸获枝、字體、字號(hào)骇笔、行高省店、對(duì)齊方式、字間距笨触、填充顏色懦傍、背景顏色)
*注意事項(xiàng)
插件中黑色區(qū)域?yàn)檫x中塊的尺寸,包括margin和padding尺寸
瀏覽器檢查中藍(lán)色區(qū)域?yàn)檫x中塊內(nèi)容的尺寸芦劣,不包括margin和padding尺寸
2粗俱、 間距展示
選中塊后點(diǎn)擊另一個(gè)塊會(huì)展示它們之間的間距