Chrome Dev Tool: CSS Overview

在 Chrome 瀏覽器有個實驗性質的功能，很棒。有時候在瀏覽網站時發現有些設計很棒，想要偷師一下，CSS Overview 裡有幾個的功能真的要推一下。

1. 首先需要打開 DevTools
   

Mac: command + option + i
Win: control + shift + i

2. 進入 Settings
   
   在 DevTools 最上方右側有個齒輪 icon 可以進入 settings。
   Mac: function + F1
   Win: F1
   接著把左邊欄位第三行 Experiments 裡面 第四個 CSS Overview 打勾

重新打開瀏覽器。

3. 打開 DevTools 裡面的 CSS Overview: Capture overview
   
   按下按鈕瀏覽器就會開始分析了。

4. 分析報告
   
   除了摘要一些網頁裡共使用了幾個 HTML 元素，下了幾個 style 定義，用了幾個 css selector 之外還有顏色解析。

這個部分我很喜歡，清楚看到用了多少種背景顏色、文字顏色，甚至連 border 顏色都有。

媽呀，用了哪種字型、字體大小，出現幾次都有紀錄。

這個網站裡面有已定義卻未使用的 CSS 高達 14 個。這功能對於優化一個網站很棒！
下方還有 media queries。目前我觀察了幾個大型網站，media queries 都好長一串，看到眼花。

—

Chrome 這個實驗功能對於初學者我剛要練習切版真的太有幫助了。偶而遇到想要臨攀練習的網站，可以透過 CSS Overview 更理解有些元素怎麼規劃會比較恰當。