極客小俊
一個(gè)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主

引言

我們平常在項(xiàng)目開(kāi)發(fā)當(dāng)中, 利用調(diào)試工具來(lái)調(diào)試CSS相關(guān)的代碼, 它可以幫助我們了解哪些CSS 功能被使用，CSS代碼效率，以及CSS代碼的執(zhí)行情況，而這些都是 CSS 代碼檢查與調(diào)試的核心, 它在某種情況下，會(huì)影響我們整個(gè)網(wǎng)站應(yīng)用程序的整體性能, 所以掌握必要的調(diào)試技巧是很有必要的!

使用Chrome DevTools 調(diào)試CSS代碼

我們平?？梢允褂?/span>chrome瀏覽器自帶的Chrome DevTools調(diào)試工具 來(lái)檢查與調(diào)試CSS代碼!

基礎(chǔ)手工調(diào)試 CSS 代碼

快速手動(dòng)查看元素的CSS樣式

可以在chrome瀏覽器打開(kāi)頁(yè)面中按下快捷鍵F12 打開(kāi)chrome開(kāi)發(fā)調(diào)試工具,然后使用箭頭工具 在Element選項(xiàng)中直接選擇html代碼 , 最后在右側(cè)的Style中就可以看到當(dāng)前這個(gè)元素的顏色、字體、大小等CSS相關(guān)信息

如圖:

快速查看css link外部樣式表

概念

在我們選擇好元素節(jié)點(diǎn)之后, 右側(cè)的 Styles 選項(xiàng)卡中，出現(xiàn)的當(dāng)前元素的 CSS屬性, 旁邊的鏈接文件可以直接點(diǎn)擊打開(kāi)定義CSS規(guī)則外部樣式表 可以查看樣式的源文件

快速給選擇的元素添加 行間樣式

概念

這種方法相當(dāng)于向html標(biāo)簽的 style 屬性一樣的原理! ?

當(dāng)我們?cè)?/span>Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style中, 點(diǎn)擊 element.style 就可以給當(dāng)前選擇的這個(gè)元素增加行間CSS樣式了! ?

這個(gè)方法在實(shí)際應(yīng)用開(kāi)發(fā)當(dāng)中很實(shí)用， 根據(jù)添加的行間css屬性我們就很容易快速判斷并且檢測(cè)出元素的CSS屬性的問(wèn)題出在什么地方!

如圖

快速向元素已有樣式規(guī)則中添加、修改CSS屬性

概念

平常在開(kāi)發(fā)當(dāng)中 也會(huì)用到這個(gè)小技巧, 來(lái)快速檢測(cè)自己寫(xiě)的CSS是否有誤!

添加CSS聲明

當(dāng)我們?cè)?/span>Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style中單擊要添加聲明的樣式規(guī)則的{}大括號(hào)中間部分, 就可以出現(xiàn)光標(biāo)，輸入CSS屬性名，最后輸出完成后 按 enter 鍵即可!

修改CSS聲明

我們只需要在原有樣式上雙擊鼠標(biāo)，修改樣式規(guī)則，并按 Enter 鍵就可以了!

如圖

快速給元素添加class類(lèi)

概念

當(dāng)我們?cè)?/span>Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style選項(xiàng)卡中有一個(gè) .cls 的按鈕,點(diǎn)擊這個(gè)按鈕會(huì)顯示一個(gè) Add new class 的輸入框，輸入想要添加的class類(lèi)名之后按 enter 鍵就可以了

這樣就可以直接點(diǎn)擊 添加好的class類(lèi) 復(fù)選框可以來(lái)回切換樣式 進(jìn)行CSS屬性的測(cè)試

小提示: 前提是你最好是把要添加的class 先寫(xiě)好!

快速更改元素的CSS屬性值快捷鍵

我們?cè)?/span>Element選項(xiàng)右側(cè)的Style選項(xiàng)卡中編輯CSS屬性值的時(shí)候，可以使用鍵盤(pán)上的快捷鍵將值遞增/遞減的操作

• 方向鍵Up 則是每點(diǎn)擊一次給CSS屬性值增加1

• 方向鍵Down 則是每點(diǎn)擊一次給CSS屬性值減少1

• Alt+ 方向鍵Up 支持（windows，Linux）則是每點(diǎn)擊一次給CSS屬性值增加0.1

• Alt+ 方向鍵Down 支持（windows，Linux）則是每點(diǎn)擊一次給CSS屬性值減少0.1

• Shift?+ 方向鍵Up ?則是每點(diǎn)擊一次給CSS屬性值增加10

• Shift?+ 方向鍵Down ?則是每點(diǎn)擊一次給CSS屬性值減少10

• ctrl?+?Shift?+?Page Up 支持(windows，Linux）則是每點(diǎn)擊一次給CSS屬性值增加100

• ctrl?+?Shift?+?Page Down支持(windows，Linux）則是每點(diǎn)擊一次給CSS屬性值減少100

拾色器的使用

概念

一般可以使用拾色器來(lái)快速修改元素的顏色

在Style選項(xiàng)卡中,選中目標(biāo)html元素后 將鼠標(biāo)懸停在目標(biāo)元素的顏色屬性小圖標(biāo)上點(diǎn)擊一下，就可以出現(xiàn)拾色器了 , 如果你很會(huì)搭配顏色這個(gè)小工具還是挺有用的!

如圖

CSS Overview (當(dāng)前頁(yè)面CSS信息提取)

這個(gè)功能還是非常強(qiáng)大的! 但是chrome開(kāi)發(fā)調(diào)試工具 默認(rèn)是沒(méi)有開(kāi)啟的, 所以需要我們手動(dòng)去開(kāi)啟

如何在chrome開(kāi)發(fā)調(diào)試工具中開(kāi)啟CSS Overview功能

步驟

打開(kāi)chrome瀏覽器---->F12進(jìn)入調(diào)試工具----->點(diǎn)擊調(diào)試工具右上方的小齒輪setting圖標(biāo)進(jìn)入設(shè)置---

---->選擇Experiments----->勾選CSS Overview 選項(xiàng)即可!

如圖

注意: 開(kāi)啟之后要重新開(kāi)啟一下調(diào)試工具!

CSS Overview的作用

這個(gè)功能可以給開(kāi)發(fā)者展示出當(dāng)前頁(yè)面 CSS 屬性的所有信息，比如顏色、字體、對(duì)比度問(wèn)題、未使用的聲明和media查詢(xún), 通常用這個(gè)工具來(lái)判斷當(dāng)前CSS 代碼的質(zhì)量。

CSS Overview功能包含五個(gè)信息板塊

1.Overview summary

重點(diǎn)可以顯示出一些當(dāng)前頁(yè)面中的CSS的使用情況!

2.Colors

可以顯示出當(dāng)前頁(yè)面中使用到的所有顏色信息 包括 背景、 字體、 等等...

3.Font info

在這里可以顯示出當(dāng)前頁(yè)面中 所使用到的字體以及字體css屬性相關(guān)的所有信息!

也就是可以在這里看到每一種使用到的字體所設(shè)置的css字體相關(guān)屬性

4.Media queries

在這里可以查看到當(dāng)前頁(yè)面中使用到的媒體查詢(xún)相關(guān)信息

Coverage panel (檢測(cè)信息覆蓋度)

這個(gè)功能主要是可以用來(lái)檢測(cè)CSS或JS 文件的代碼數(shù)量以及使用評(píng)率, 也就是說(shuō)它可以提示項(xiàng)目應(yīng)用中加載的每個(gè)文件使用多少CSS

打開(kāi)步驟

打開(kāi)chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵，輸入Coverage，然后再選擇: Show Coverage，最后點(diǎn)擊刷新的小圖標(biāo) 就可以了!

小提示 可以在 URL Filter輸入框中過(guò)濾出 .css文件, 只要輸入.css 就可以專(zhuān)門(mén)顯示 CSS文件了

如圖

這些數(shù)據(jù)看似不重要，但可能有些時(shí)候可以幫助你 建立優(yōu)化思維以及策略!

Rendering Panel (渲染面板)

聽(tīng)名字就知道它的作用是跟CSS效果渲染有關(guān)系的, 平常使用它 來(lái)檢測(cè)代碼的渲染時(shí)間以及渲染過(guò)載的區(qū)域!

關(guān)于css渲染涉及到瀏覽器構(gòu)成,這里就不過(guò)多提及，以后我會(huì)出一篇詳細(xì)做講解!

Rendering Panel (渲染面板) 打開(kāi)步驟

打開(kāi)chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Rendering---->然后選擇 Show Rendering項(xiàng), ?然后回出現(xiàn)很多復(fù)選框功能

平常我會(huì)用到的選項(xiàng)如下表:

復(fù)選項(xiàng)描述Paint flashing當(dāng)頁(yè)面上有重繪效果的地方,會(huì)顯示綠色矩形的區(qū)域進(jìn)行標(biāo)注! 可以簡(jiǎn)單理解為有動(dòng)態(tài)效果的頁(yè)面區(qū)域, 這些效果區(qū)域 往往瀏覽器渲染的時(shí)間會(huì)長(zhǎng)一些!Frame Rendering Stats這個(gè)選項(xiàng)勾選上之后可以顯示GPU 和幀的一些實(shí)時(shí)情況, 用來(lái)判定一些效果動(dòng)畫(huà)是否卡頓還是比較有用的!.................................................

如圖

渲染面板中我們可以獲取到 一些常規(guī)檢查中沒(méi)有的數(shù)據(jù)信息, 這些信息對(duì)于了解 CSS 代碼 或者是 JS代碼的性能以及消耗設(shè)備的資源等 都提供了很多依據(jù)和參照, 在深度優(yōu)化的時(shí)候或許能給你帶來(lái)一絲啟發(fā)!

Performance Monitor (性能監(jiān)視器)

故名意思就是用來(lái)查看代碼運(yùn)行的性能監(jiān)視界面,

打開(kāi)步驟

打開(kāi)chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance Monitor---->最后選擇 Show Performance Monitor 項(xiàng) 即可打開(kāi),

在這個(gè)面板當(dāng)中可以勾選一些選項(xiàng)如下

CPU usage

當(dāng)前CPU的使用率,也就是CPU占用率

JS heap size

指的是JS對(duì)象堆的占用的內(nèi)存大小

DOM nodes

內(nèi)存中DOM節(jié)點(diǎn)個(gè)數(shù)，這個(gè)會(huì)隨著頁(yè)面的效果變化而增加或減少

JS event listeners

JS事件偵聽(tīng)器個(gè)數(shù)

如圖

Layouts/sec

在用戶(hù)查看頁(yè)面的過(guò)程當(dāng)中，頁(yè)面中的布局元素重排

Style recalcs / sec

頁(yè)面中的樣式重繪

以上兩個(gè)選項(xiàng)通常也是用于檢測(cè)與分析我們的CSS代碼性能, 例如我們?cè)?/span>CSS中使用了left或top屬性那么就會(huì)產(chǎn)生一些布局上的重繪, 那么如果將這些屬性加載到JS動(dòng)畫(huà)中，則可能每秒都觸發(fā)幾十甚至是上百次重繪操作

處于性能優(yōu)化考慮 , 我們?nèi)绻褂昧?/span>CSS3中的transform屬性中的translateX/Y來(lái)做動(dòng)畫(huà)效果 ,那么會(huì)發(fā)現(xiàn)它并不會(huì)觸發(fā)重繪的流程,而只是組合畫(huà)面 而這些都是基于顯卡GPU, 而CPU 的使用率會(huì)大大降低!

所以我們平常在開(kāi)發(fā)JS效果的過(guò)程當(dāng)中使用 translate()來(lái)移動(dòng)元素，而不用 top或left來(lái)移動(dòng)元素的根本原因!

我們可以來(lái)看一下對(duì)比圖:

小結(jié): 所以通過(guò) Layouts/sec與Style recalcs/sec ?兩個(gè)選項(xiàng)展示了在頁(yè)面中觸發(fā)重繪和布局的CSS相關(guān)信息

以上這些在平常前端開(kāi)發(fā)當(dāng)中可以幫助你獲取一些實(shí)時(shí)應(yīng)用程序的性能數(shù)據(jù),在判斷性能優(yōu)劣的時(shí)候也是非常有幫助的!

Performance Panel (性能面板)

Performance Panel跟之前的Performance Monitor的區(qū)別就是 我們先通過(guò) Performance Monitor性能監(jiān)視器來(lái)把控每一個(gè)環(huán)節(jié)的性能, 然后再使用Performance Panel進(jìn)行整體的性能分析!

打開(kāi)步驟

打開(kāi)chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance---->然后我們選擇 Show Performance項(xiàng), 最后點(diǎn)擊重新加載的圖標(biāo),或者按下快捷鍵 ctrl + shift + e

并且我們也可以反復(fù)按下快捷鍵(ctrl + shift + e)重新加載繪制頁(yè)面性能信息, 在最下面的餅圖中顯示了繪制頁(yè)面和渲染頁(yè)面的總體時(shí)間!

如圖

從上圖中就可以看到 當(dāng)我們打開(kāi)性能面板加載之后就可以獲取到 加載頁(yè)面的時(shí)間/毫秒、 CSS、JS、DOM節(jié)點(diǎn)、事件監(jiān)聽(tīng)等所需要的渲染總體時(shí)間!

國(guó)外在線CSS調(diào)試檢測(cè)代碼工具

1.CSS Specificity Visualizer

概述

Specificity Visualizer個(gè)人覺(jué)得是一款國(guó)外非常不錯(cuò)的在線css檢測(cè)工具

在線地址: https://isellsoap.github.io/specificity-visualizer/

如圖

我們只需要打開(kāi)訪問(wèn)地址后 粘貼你想要檢測(cè)的CSS代碼, 然后點(diǎn)擊Visualize it按鈕進(jìn)行檢測(cè), 然后回在下面顯示出特殊樣式選擇器 以及選擇器的權(quán)重等相關(guān)信息

操作圖

標(biāo)記為紅色的地方說(shuō)明這些選擇器還可以優(yōu)化得更好!

2.CSS Specificity Graph Generator

概述

這款國(guó)外在線的CSS檢測(cè)工具 可以幫助你檢測(cè) CSS代碼中的 選擇器是如何按特定樣式組織

在線地址: https://jonassebastianohlsson.com/specificity-graph/

如圖

它會(huì)提示波峰值高那么是不好的, 總的趨勢(shì)應(yīng)該是在樣式表的后面有更高的特異性

如下圖

END

以上就是平常我在工作與學(xué)習(xí)當(dāng)中會(huì)使用到的一些CSS代碼檢測(cè)調(diào)試工具, 希望能給你帶來(lái)一點(diǎn)幫助!

感謝你的閱讀!

大家的支持就是我堅(jiān)持下去的動(dòng)力!