站長資訊網
        最全最豐富的資訊網站

        推薦一個Chrome DevTools實用小插件:CSS Overview Panel

        本篇文章給大家推薦一個實用Chrome DevTools小插件:CSS Overview Panel(CSS概覽面板),使用它重構和改善樣式表。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

        推薦一個Chrome DevTools實用小插件:CSS Overview Panel

        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。

        推薦一個Chrome DevTools實用小插件:CSS Overview Panel

        何時使用此功能

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

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

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

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

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

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产成人精品无码片区在线观看 | 99久久免费只有精品国产| 亚洲国产精品嫩草影院久久 | 亚洲欧美国产∧v精品综合网| 久久免费国产精品一区二区| 亚洲AV永久无码精品一百度影院| 国产精品极品| 久久99国产精品久久99| 国内揄拍高清国内精品对白| 亚洲国产成人乱码精品女人久久久不卡 | 欧美性videos高清精品| 免费人欧美日韩在线精品| 日韩一级精品视频在线观看| 538国产精品一区二区在线| 午夜精品久久久久久中宇| 四虎精品亚洲一区二区三区| 国产精品福利电影一区二区三区四区欧美白嫩精品 | 久热这里只有精品99国产6| 国产精品 羞羞答答在线| 久久九九亚洲精品| 国产精品成熟老女人视频| 亚洲国产一成人久久精品| 亚洲精品国自产拍在线观看| 久久国产综合精品五月天| 国产午夜福利精品久久| 国产精品福利区一区二区三区四区| 杨幂国产精品福利在线观看| 一本久久a久久精品综合夜夜| 欧美亚洲国产成人精品| 久久精品嫩草影院| 99在线精品免费视频| 成人精品一区二区三区免费看 | 久久久久久亚洲精品不卡| 精品97国产免费人成视频| 国产精品亚洲综合一区| 丁香色婷婷国产精品视频| 国产2021久久精品| 精品福利一区二区三区| 三级国产精品| 亚洲热线99精品视频| 日韩精品久久无码中文字幕|