Chrome 新功能 — CSS Overview 嘗鮮

Chrome 又帶來了一個新的非常實用的實驗功能！

現(xiàn)在，我們可以大致了解 CSS 在網(wǎng)站上的使用情況，包括網(wǎng)站使用了多少顏色、未使用聲明的數(shù)量甚至到定義媒體查詢的總數(shù)。

當(dāng)然，它還只是一個實驗性功能，仍然在探索中，你想要體驗的話必須要啟用它才能在 DevTools 中開始使用它。

打開 DevTools（在Mac上按Command+Option+I; 在Windows上按Control+Shift+I）。

然后轉(zhuǎn)到 DevTool 設(shè)置（ 在Mac上 ?或Function+F1 ，在Windows上 ?或F1）

• 點擊打開 Experiment 部分
• 啟用 CSS Overview

關(guān)閉設(shè)置后，我們會在 DevTools 菜單欄中獲得一個新的 CSS Overview 選項卡。

注意，該報告分為多個部分，包括顏色，字體信息，未使用的聲明和媒體查詢。我們可以在唾手可得的少量空間中獲得大量信息。

這是一個非常棒的功能，對吧？我非常喜歡這樣的功能。想想這不僅能幫助我們作為前端更好的開發(fā)，還能幫助我們與設(shè)計師合作。比如設(shè)計師可以打開這個功能，檢查我們的工作，以確保從調(diào)色板到字體堆棧的所有內(nèi)容都井井有條。

了解更多：https://css-tricks.com/new-in-chrome-css-overview/