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

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

對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface NinjaType 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 按鈕,點選就能使用。

CSSPeeper

STEP 2

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

CSSPeeper

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

CSSPeeper

STEP 3

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

CSSPeeper

STEP 4

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

CSSPeeper

值得一試的三個理由:

  1. 以簡單、組織化和更漂亮方式檢視網站樣式及元素
  2. 快速顯示網頁使用的所有顏色和 Hex 色碼
  3. 更直覺的 Inspector 功能,點選網頁各部分立即顯示資訊
分享到...