推薦一個Chrome DevTools實用小外掛：CSS Overview Panel

這篇文章推薦給大家一個實用Chrome DevTools小外掛：CSS Overview Panel（CSS概覽面板），使用它重構和改善樣式表。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

CSS概覽面板（CSS Overview Panel）提供了關於你的CSS的有趣資訊。你可以查看高等級的CSS指標，這些指標在重構時特別有用。

如何使用此功能

啟用此功能：

• #從「DevTools實驗（Experiments pane）」窗格中啟用CSS Overview（Cmd Shift P>Show Experiments）

• 從「DevTools」Command Menu中選擇「Show CSS Overview 」（Cmd Shift P）

在CSS Overview面板中，您可以導航到不同的部分：

• ##概述摘要（ Overview Summary）-CSS上有趣的指標，例如元素數量，樣式表，類別vs ID選擇器，複雜選擇器等等。
• 顏色（Colors）-視覺化預覽背景色、文字色、填滿顏色和邊框色。顏色本身是可以點擊的，所以你可以準確地查看哪些元素使用了這些顏色。
• 字體資訊（Font info） -衡量字體的使用情況以及它們在樣式表中出現的頻率。包括字體重量和行高指標。可以選擇字型指標來顯示受影響的元素。
• 未使用的聲明（Unused declarations）-未使用的CSS聲明，可以照常點選。

• 媒體查詢（Media queries）-CSS媒體查詢的細節（如最小/最大寬度值）以及它們在樣式表中出現的頻率。你可以點擊這些來直接跳到來源面板。如果你啟用了來源映射，你將能夠看到原始樣式，例如Sass。

何時使用此功能

當

重構你的程式碼，或規範各頁的品牌風格時，請使用此功能。例如，如果你注意到一種『顏色』的輕微變化散佈在你的CSS中，概覽面板中的這個顏色面板（Colors pane）是識別這種東西的好地方。

您也可以使用CSS概覽面板中的媒體查詢面板來檢查您是否針對預期的媒體查詢斷點集，並確保您的頁面在各種螢幕尺寸上看起來都很好。

未使用的聲明面板可能會透過告知您可以刪除哪些CSS來幫助改善網路和渲染效能。

最後，你可以使用CSS概覽面板向你的前端團隊的其他成員，特別是新入職者傳達CSS程式碼的狀態訊息，包括可能需要重點關注的領域。

CSS概覽面板可以提供關於CSS的有價值的指標，而Lighthouse面板則提供整個網站的指標，包括JavaScript。

更多電腦程式相關知識，請造訪：

程式設計入門！ ！

以上是推薦一個Chrome DevTools實用小外掛：CSS Overview Panel的詳細內容。更多資訊請關注PHP中文網其他相關文章！