這是Chrome瀏覽器中的一個新的實驗性功能！現在，我們可以了解一個網站上使用的css的概況，從顏色的數量到未使用的聲明數量......甚至是定義的媒體查詢的總數。
同樣，這是一個實驗性的功能。這不僅意味著它仍在進行中，而且意味著你必須啟用它才能在DevTools中開始使用它。
- 打開DevTools（在mac上為Command + Option + I；在windows上為Control + Shift + I）
- 轉到DevTool Settings（在Mac上為？或Function + F1；在Windows上為？或F1）
- 點擊打開Experiments（實驗）部分
- 啟用CSS Overview （CSS概述選項）
當設置關閉時，我們在DevTools菜單托盤中得到一個新的 “CSS Overview” 標簽。如果你沒有看到它，請確保它沒有隱藏在溢出菜單中。
注意，報告被分成許多部分，包括顏色、字體信息、未使用的聲明和媒體查詢。這是在我們的指尖就能獲得的少量空間中的大量信息。
這很漂亮，對吧？我喜歡這樣的工具開始進入瀏覽器。想想這不僅能幫助我們作為前端，還能幫助我們與設計師合作。比如，設計師可以打開這扇門，開始檢查我們的工作，以確保從調色板到字體堆棧的所有東西都井井有條。
本文首發于公眾號《前端全棧開發者》ID：by-zhangbing-dev，第一時間閱讀最新文章，會優先兩天發表新文章。關注后私信回復：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！
