CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表（Chrome 擴充功能）

對於網頁設計或開發者來說，想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手，我在發現不錯的網站都會去看一下原始碼或樣式表，雖然 Google Chrome 本身就有強大的開發人員工具可以使用，但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。

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

CSSPeeper 在操作上跟 Fontface Ninja 感覺很類似，不過可以查看各元件的「Inspector」功能非常實用！只要在開啟 CSSPeeper 情況下去點擊網頁內的元件，就能以可視化方式瀏覽它各項資訊與設定值，相較於 Google Chrome 內建的 Inspector 來說會更直覺。

擴充功能資訊

元件名稱：CSSPeeper
適用平台：Chrome
程式語系：英文
官方網站：https://csspeeper.com/
安裝頁面：從 Chrome 線上應用程式商店下載

使用教學

STEP 1

開啟 CSS Peeper 的 Google Chrome 擴充功能頁面，點選右上角「加到 Chrome」按鈕免費下載安裝，安裝後瀏覽器右上角會出現 CSS Peeper 按鈕，點選就能使用。

STEP 2

例如我以免費資源網路社群網站做測試，點選 CSSPeeper 後會開啟網站圖示、標題和內文字型、CSS 檔案大小和載入時間，點選下方按鈕可切換至不同功能。

我認為 CSSPeeper 最好用的就是快速列出該頁面使用的所有色彩包括 Hex 值，對於想知道某個頁面主要使用那些色系來說非常方便，而且也不太需要去挖掘 CSS 樣式表，除了列出數值外，還直接呈現色彩預覽，點選後會自動複製顏色代碼。

STEP 3

CSSPeeper 核心功能應該是前面提過的「Inspector」，當你在 CSSPeeper 開啟情況下點選網頁中的文字、鏈結、欄位或按鈕，就會偵測出該元件的樣式名稱、長寬、字型、字體大小、行高、對齊方向及顏色等資訊，對於想知道網頁中某個元件的屬性非常方便。

STEP 4

最後，CSSPeeper 還有一個查看網頁中所有圖片的功能，能在下拉功能中顯示所有網頁圖片，將游標移動到縮圖會顯示圖片檔名和尺寸，也能單獨匯出或一次匯出。