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

        推薦一個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號
        主站蜘蛛池模板: 日韩精品人妻系列无码专区| 欧美精品黑人巨大在线播放| 国产成人精品精品欧美| 久久精品国产亚洲一区二区三区| 国产精品igao视频网网址| 亚洲精品无码久久久| 国产精品成人观看视频网站| 国产精品自在欧美一区| 精品国产一区二区三区不卡| 亚洲精品尤物yw在线影院| 久久国产精品免费| 国产一区二区三区在线观看精品| 麻豆精品久久精品色综合| 国产精品扒开腿做爽爽爽视频 | 精品无码av一区二区三区| 亚洲av无码成人精品区在线播放| 久久99精品久久久久久噜噜| 国产福利电影一区二区三区久久久久成人精品综合 | 久久精品国产清高在天天线| 亚洲国产精品专区在线观看| 日韩欧美一区二区三区中文精品| 精品多毛少妇人妻AV免费久久| 国产成人精品久久亚洲| 成人精品一区二区三区在线观看| 国产精品亚洲午夜一区二区三区 | 高清日韩精品一区二区三区| 亚洲精品小视频| 2020最新久久久视精品爱| 久久国产精品久久久| 久久成人影院精品777| 久久精品成人免费网站| 久久国产精品一区二区| 99久re热视频这里只有精品6| 四虎国产精品永久地址49| 国内精品免费在线观看| 精品国产_亚洲人成在线高清| 精品久久久久久亚洲| 国产高清在线精品一区二区三区| 国产精品综合专区中文字幕免费播放| 国产精品成人69XXX免费视频| 国产乱人伦偷精品视频免观看 |