July 3, 2020

Chrome 實驗性功能 CSS Overview

Tags: chromenew feature | (1 min read)
Chrome 實驗性功能 CSS Overview

Chrome上了新的實驗性功能 CSS Overview,感覺對做網站前端十分有用,可以快速查閱網站上所使用的顏色、字體、未使用的css申明、定義的媒體查詢。

因為目前還是實驗性階段,所以需要手動啟用該功能。啟用CSS Overview 操作如下:

  • 打開開發者工具,Mac上快捷鍵是Command+Option+I,Windows上快捷鍵是Control+Shift+I。
  • 打開開發者工具的設置,可以點擊開發者工具欄右上角的齒輪小圖標,或者,Mac上快捷鍵是Function+F1,Windows上快捷鍵是F1,找到 Experiments 點開。

Settings -> Experiments

啟用了CSS Overview功能之後就會在開發者工具欄上找到CSS Overview的標籤。

 CSS Overview

點擊 Capture overview ,稍等一會兒就能看到CSS概覽信息了。

 CSS Overview