網(wǎng)站CSS樣式表查看插件CSS Peeper

CSS Peeper插件是一款為設(shè)計師們提供的可視化網(wǎng)頁css樣式表查看插件，這款插件可以讓設(shè)計師專注于設(shè)計，并花費(fèi)盡可能少的時間查看代碼。對于設(shè)計師們來說，查看和挖掘網(wǎng)頁代碼及css樣式是最費(fèi)時費(fèi)力的事了，現(xiàn)在有了這款CSS Peeper插件你可以節(jié)約更多時間去專注于頁面的設(shè)計。

插件介紹：

對于網(wǎng)頁設(shè)計或開發(fā)者來說，想要改善使用者網(wǎng)頁瀏覽體驗(yàn)通常會從參考其他網(wǎng)站設(shè)計著手，發(fā)現(xiàn)不錯的網(wǎng)站都會去看一下原始碼或樣式表，然而挖掘網(wǎng)頁代碼并檢查CSS樣式和其他相鄰元素可能被證明是任何網(wǎng)頁設(shè)計師最耗時和可能煩人的事情之一。雖然 Google Chrome 本身就有強(qiáng)大的開發(fā)人員工具可以使用，但如果遇到要查詢某個網(wǎng)頁使用的字型或色彩時還是需要借助工具才會更加的方便。

今天我們要推薦的CSSPeeper是一款既聰明又功能明確的Google Chrome插件，如果你是設(shè)計師、需要時常去瀏覽其他網(wǎng)站的話，應(yīng)該會覺得它幾乎為你量身打造！CSSPeeper讓使用者以簡單、有組織性、更漂亮方式去檢查網(wǎng)站樣式和各種元件，例如以視覺化方式快速列出網(wǎng)站的配色、查看各部分使用的字型、字體大小、行高、對齊方向和顏色，還能快速匯出頁面中的所有圖片。

css peeper使用方法：

1.CSS Peeper插件的安裝方法非常簡單，在本站或者官網(wǎng)都可以下載CSS Peeper插件，離線安裝CSS Peeper插件的方法參照：chrome插件的離線安裝方法。最新chrome瀏覽器下載地址：http://chromecj.com/category/chrome/。

2.插件安裝成功后，在Chrome 工具欄上，便會出現(xiàn)這個 "P" 字的小標(biāo)志。例如我以chrome插件網(wǎng)站做測試，點(diǎn)選 CSSPeeper 后會開啟網(wǎng)站圖示、標(biāo)題和內(nèi)文字型、CSS 檔案大小和載入時間，點(diǎn)選下方按鈕可切換至不同功能。

3、我認(rèn)為 CSSPeeper最好用的就是快速列出該頁面使用的所有色彩包括 Hex 值，對于想知道某個頁面主要使用那些色系來說非常方便，而且也不太需要去挖掘 CSS 樣式表，除了列出數(shù)值外，還直接呈現(xiàn)色彩預(yù)覽，點(diǎn)選后會自動復(fù)制顏色代碼。如果點(diǎn)開工具的第二個顏色的圖標(biāo)，則可以看到網(wǎng)頁的所有配色信息。鼠標(biāo)懸浮到顏色上，可以快速復(fù)制顏色的 Hex 值。

4、CSSPeeper 核心功能應(yīng)該是Inspector，當(dāng)你在 CSSPeeper 開啟情況下點(diǎn)選網(wǎng)頁中的文字、鏈結(jié)、欄位或按鈕，就會偵測出該元件的樣式名稱、長寬、字型、字體大小、行高、對齊方向及顏色等資訊，對于想知道網(wǎng)頁中某個元件的屬性非常方便。

5、點(diǎn)開第三個相機(jī)按鈕時，你可以看到許多圖片。一般圖片是背景圖時，也會無法右擊保存，但 CSS PEEPER 卻可以加載出所有的圖片資源。鼠標(biāo)懸浮上會出現(xiàn)圖片的基本信息。我們點(diǎn)擊 "EXPORT"（導(dǎo)出），圖片即開始被下載。以后不管多難右擊另存為的圖，你都可以輕松收入囊中啦。