本期推薦一個非常好用的 Chrome 插件 ——CSS Peeper游盲。
在之前，你需要摳取某個網(wǎng)頁上的圖片蛮粮，或許是會直接右擊保存圖片益缎。
高級一點的，想要查看某個網(wǎng)站的字體然想、背景顏色莺奔、行間距等，或許是右鍵選擇 “Inspect”審查元素來查看变泄。
我們以 Element UI 的網(wǎng)站為示例：
這種方法固然可行恼琼，但是需要大量作業(yè)時，效率就太低啦屏富。
那我們下面就看看 CSS Peeper 可以為設(shè)計師們做什么呢晴竞。
1 安裝Chrome插件
到官網(wǎng)csspeeper.com點擊 "GET IT NOW" ，或者直接到Chrome 的插件市場役听，搜索找到 CSS Peeper，進(jìn)入插件下載頁面表窘。
插件加入到 Chrome 工具欄上后典予，便會出現(xiàn)這個"P"字的小標(biāo)志。
2 查看基本信息
我們點擊它后乐严，就會看到網(wǎng)頁的右側(cè)多了一個如下的工具瘤袖。可以看到頁面的基本信息昂验。
我們隨意點擊網(wǎng)頁上的一個元素捂敌，工具欄的界面如下所示〖惹伲可以看出更詳細(xì)的間距占婉、字體、顏色等信息甫恩。
3 查看配色信息
如果點開工具的第二個顏色的圖標(biāo)逆济，則可以看到網(wǎng)頁的所有配色信息。鼠標(biāo)懸浮到顏色上磺箕，可以快速復(fù)制顏色的 Hex 值奖慌。
4 下載網(wǎng)頁所有圖片
最振奮人心的部分到了，點開第三個相機按鈕時松靡，你可以看到許多圖片简僧。
一般圖片是背景圖時，也會無法右擊保存雕欺，但 CSS PEEPER 卻可以加載出所有的圖片資源岛马。鼠標(biāo)懸浮上會出現(xiàn)圖片的基本信息。
我們點擊 "EXPORT"（導(dǎo)出）屠列，圖片即開始被下載蛛枚。以后不管多難右擊另存為的圖，你都可以輕松收入囊中啦脸哀。
當(dāng)然蹦浦，這么好用的東西，不要忘記去告訴前端小哥哥撞蜂、或者運營小姐姐襖盲镶。
其他資源分享：
西瓜設(shè)計研究所
互聯(lián)網(wǎng)創(chuàng)業(yè) | UI設(shè)計 | 開發(fā)資源 | 教程
未經(jīng)授權(quán)請勿轉(zhuǎn)載侥袜，煩請留言獲取（侵權(quán)必究）
? uirush.com
