整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者:極客小俊
一個(gè)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
引言
我們平常在項(xiàng)目開發(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瀏覽器自帶的Chrome DevTools調(diào)試工具 來(lái)檢查與調(diào)試CSS代碼!
可以在chrome瀏覽器打開頁(yè)面中按下快捷鍵F12 打開chrome開發(fā)調(diào)試工具,然后使用箭頭工具 在Element選項(xiàng)中直接選擇html代碼 , 最后在右側(cè)的Style中就可以看到當(dāng)前這個(gè)元素的顏色、字體、大小等CSS相關(guān)信息
如圖:
概念
在我們選擇好元素節(jié)點(diǎn)之后, 右側(cè)的 Styles 選項(xiàng)卡中，出現(xiàn)的當(dāng)前元素的 CSS屬性, 旁邊的鏈接文件可以直接點(diǎn)擊打開定義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)用開發(fā)當(dāng)中很實(shí)用， 根據(jù)添加的行間css屬性我們就很容易快速判斷并且檢測(cè)出元素的CSS屬性的問(wèn)題出在什么地方!
如圖
概念
平常在開發(fā)當(dāng)中 也會(huì)用到這個(gè)小技巧, 來(lái)快速檢測(cè)自己寫的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 鍵就可以了!
如圖
概念
當(dāng)我們?cè)?/span>Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style選項(xiàng)卡中有一個(gè) .cls 的按鈕,點(diǎn)擊這個(gè)按鈕會(huì)顯示一個(gè) Add new class 的輸入框，輸入想要添加的class類名之后按 enter 鍵就可以了
這樣就可以直接點(diǎn)擊 添加好的class類 復(fù)選框可以來(lái)回切換樣式 進(jìn)行CSS屬性的測(cè)試
小提示: 前提是你最好是把要添加的class 先寫好!
我們?cè)?/span>Element選項(xiàng)右側(cè)的Style選項(xiàng)卡中編輯CSS屬性值的時(shí)候，可以使用鍵盤上的快捷鍵將值遞增/遞減的操作
概念
一般可以使用拾色器來(lái)快速修改元素的顏色
在Style選項(xiàng)卡中,選中目標(biāo)html元素后 將鼠標(biāo)懸停在目標(biāo)元素的顏色屬性小圖標(biāo)上點(diǎn)擊一下，就可以出現(xiàn)拾色器了 , 如果你很會(huì)搭配顏色這個(gè)小工具還是挺有用的!
如圖
這個(gè)功能還是非常強(qiáng)大的! 但是chrome開發(fā)調(diào)試工具 默認(rèn)是沒有開啟的, 所以需要我們手動(dòng)去開啟
如何在chrome開發(fā)調(diào)試工具中開啟CSS Overview功能
步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----->點(diǎn)擊調(diào)試工具右上方的小齒輪setting圖標(biāo)進(jìn)入設(shè)置---
---->選擇Experiments----->勾選CSS Overview 選項(xiàng)即可!
如圖
注意: 開啟之后要重新開啟一下調(diào)試工具!
CSS Overview的作用
這個(gè)功能可以給開發(fā)者展示出當(dāng)前頁(yè)面 CSS 屬性的所有信息，比如顏色、字體、對(duì)比度問(wèn)題、未使用的聲明和media查詢, 通常用這個(gè)工具來(lái)判斷當(dāng)前CSS 代碼的質(zhì)量。
CSS Overview功能包含五個(gè)信息板塊
重點(diǎn)可以顯示出一些當(dāng)前頁(yè)面中的CSS的使用情況!
可以顯示出當(dāng)前頁(yè)面中使用到的所有顏色信息 包括 背景、 字體、 等等...
在這里可以顯示出當(dāng)前頁(yè)面中 所使用到的字體以及字體css屬性相關(guān)的所有信息!
也就是可以在這里看到每一種使用到的字體所設(shè)置的css字體相關(guān)屬性
在這里可以查看到當(dāng)前頁(yè)面中使用到的媒體查詢相關(guān)信息
這個(gè)功能主要是可以用來(lái)檢測(cè)CSS或JS 文件的代碼數(shù)量以及使用評(píng)率, 也就是說(shuō)它可以提示項(xiàng)目應(yīng)用中加載的每個(gè)文件使用多少CSS
打開步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵，輸入Coverage，然后再選擇: Show Coverage，最后點(diǎn)擊刷新的小圖標(biāo) 就可以了!
小提示 可以在 URL Filter輸入框中過(guò)濾出 .css文件, 只要輸入.css 就可以專門顯示 CSS文件了
如圖
這些數(shù)據(jù)看似不重要，但可能有些時(shí)候可以幫助你 建立優(yōu)化思維以及策略!
聽名字就知道它的作用是跟CSS效果渲染有關(guān)系的, 平常使用它 來(lái)檢測(cè)代碼的渲染時(shí)間以及渲染過(guò)載的區(qū)域!
關(guān)于css渲染涉及到瀏覽器構(gòu)成,這里就不過(guò)多提及，以后我會(huì)出一篇詳細(xì)做講解!
Rendering Panel (渲染面板) 打開步驟
打開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)畫是否卡頓還是比較有用的! |
如圖
渲染面板中我們可以獲取到 一些常規(guī)檢查中沒有的數(shù)據(jù)信息, 這些信息對(duì)于了解 CSS 代碼 或者是 JS代碼的性能以及消耗設(shè)備的資源等 都提供了很多依據(jù)和參照, 在深度優(yōu)化的時(shí)候或許能給你帶來(lái)一絲啟發(fā)!
故名意思就是用來(lái)查看代碼運(yùn)行的性能監(jiān)視界面,
打開步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance Monitor---->最后選擇 Show Performance Monitor 項(xiàng) 即可打開,
在這個(gè)面板當(dāng)中可以勾選一些選項(xiàng)如下
當(dāng)前CPU的使用率,也就是CPU占用率
指的是JS對(duì)象堆的占用的內(nèi)存大小
內(nèi)存中DOM節(jié)點(diǎn)個(gè)數(shù)，這個(gè)會(huì)隨著頁(yè)面的效果變化而增加或減少
JS事件偵聽器個(gè)數(shù)
如圖
在用戶查看頁(yè)面的過(guò)程當(dāng)中，頁(yè)面中的布局元素重排
頁(yè)面中的樣式重繪
以上兩個(gè)選項(xiàng)通常也是用于檢測(cè)與分析我們的CSS代碼性能, 例如我們?cè)?span style="color: #E96900; --tt-darkmode-color: #E96900;">CSS中使用了left或top屬性那么就會(huì)產(chǎn)生一些布局上的重繪, 那么如果將這些屬性加載到JS動(dòng)畫中，則可能每秒都觸發(fā)幾十甚至是上百次重繪操作
處于性能優(yōu)化考慮 , 我們?nèi)绻褂昧?/span>CSS3中的transform屬性中的translateX/Y來(lái)做動(dòng)畫效果 ,那么會(huì)發(fā)現(xiàn)它并不會(huì)觸發(fā)重繪的流程,而只是組合畫面 而這些都是基于顯卡GPU, 而CPU 的使用率會(huì)大大降低!
所以我們平常在開發(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)信息
以上這些在平常前端開發(fā)當(dāng)中可以幫助你獲取一些實(shí)時(shí)應(yīng)用程序的性能數(shù)據(jù),在判斷性能優(yōu)劣的時(shí)候也是非常有幫助的!
Performance Panel跟之前的Performance Monitor的區(qū)別就是 我們先通過(guò) Performance Monitor性能監(jiān)視器來(lái)把控每一個(gè)環(huán)節(jié)的性能, 然后再使用Performance Panel進(jìn)行整體的性能分析!
打開步驟
打開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)我們打開性能面板加載之后就可以獲取到 加載頁(yè)面的時(shí)間/毫秒、 CSS、JS、DOM節(jié)點(diǎn)、事件監(jiān)聽等所需要的渲染總體時(shí)間!
概述
Specificity Visualizer個(gè)人覺得是一款國(guó)外非常不錯(cuò)的在線css檢測(cè)工具
在線地址: https://isellsoap.github.io/specificity-visualizer/
如圖
我們只需要打開訪問(wèn)地址后 粘貼你想要檢測(cè)的CSS代碼, 然后點(diǎn)擊Visualize it按鈕進(jìn)行檢測(cè), 然后回在下面顯示出特殊樣式選擇器 以及選擇器的權(quán)重等相關(guān)信息
操作圖
標(biāo)記為紅色的地方說(shuō)明這些選擇器還可以優(yōu)化得更好!
概述
這款國(guó)外在線的CSS檢測(cè)工具 可以幫助你檢測(cè) CSS代碼中的 選擇器是如何按特定樣式組織
在線地址: https://jonassebastianohlsson.com/specificity-graph/
如圖
它會(huì)提示波峰值高那么是不好的, 總的趨勢(shì)應(yīng)該是在樣式表的后面有更高的特異性
如下圖
以上就是平常我在工作與學(xué)習(xí)當(dāng)中會(huì)使用到的一些CSS代碼檢測(cè)調(diào)試工具, 希望能給你帶來(lái)一點(diǎn)幫助!
感謝你的閱讀!
"點(diǎn)贊" "評(píng)論" "收藏"
大家的支持就是我堅(jiān)持創(chuàng)作下去的動(dòng)力!?
?如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，歡迎在下面 留個(gè)言指出、或者你有更好的想法，歡迎一起交流學(xué)習(xí)?
內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！
大家好，我是大澈！
本文約 600+ 字，整篇閱讀約需 1 分鐘。
今天分享一段優(yōu)質(zhì) CSS 代碼片段，使用CSS的偽類選擇器實(shí)現(xiàn)了對(duì)特定位置列表項(xiàng)的樣式控制。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見解！
li:nth-child(-n + 3) {
text-decoration: underline;
}
li:nth-child(n + 2):nth-child(-n + 5) {
color: #2563eb;
}
li:nth-last-child(-n + 2) {
text-decoration-line: line-through;
}分享原因
這段代碼展示了如何使用CSS的 nth-child 和 nth-last-child 偽類選擇器來(lái)選擇和樣式化特定的列表項(xiàng)，這在復(fù)雜的樣式需求中非常有用。
理解6和使用這些選擇器，在項(xiàng)目中寫樣式的時(shí)候真的會(huì)是水到渠成，最起碼不需要再費(fèi)勁去想一個(gè)新類名了。
代碼解析
1. li:nth-child(-n + 3)
n是從0開始的非負(fù)整數(shù)。
nth-child(-n + 3) 選擇器會(huì)選中父元素的前三個(gè)子元素。
其中，-n + 3 表示選擇從第一個(gè)元素開始直到第三個(gè)元素的所有子元素。
2. li:nth-child(n + 2):nth-child(-n + 5)
nth-child(n + 2) 選擇器從第2個(gè)子元素開始選擇。
nth-child(-n + 5) 選擇器從第1個(gè)子元素選擇到第5個(gè)子元素。
組合使用時(shí)，會(huì)選中從第2個(gè)到第5個(gè)子元素。
3. li:nth-last-child(-n + 2)
nth-last-child(-n + 2) 選擇器從父元素的最后一個(gè)子元素向前數(shù)，選擇倒數(shù)前兩個(gè)子元素。
- end -
TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML（超文本標(biāo)記語(yǔ)言）代碼的工具或應(yīng)用程序。它提供了一個(gè)直觀的界面，使用戶能夠輕松地編寫和設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
參考文檔：https://www.cjavapy.com/article/3299/
Visual Studio Code（簡(jiǎn)稱VS Code）是一款由微軟開發(fā)的跨平臺(tái)源代碼編輯器，支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā)，包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級(jí)的代碼編輯器，啟動(dòng)迅速，占用資源少。VS Code提供了豐富的擴(kuò)展和插件，可以根據(jù)需求安裝插件來(lái)增強(qiáng)編輯器功能。
1）安裝和配置
官網(wǎng)地址：Visual Studio Code - Code Editing. Redefined
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后，可以根據(jù)自己的喜好配置編輯器設(shè)置，如主題、字體等。
2）新建HTML文件
在 VS Code 安裝完成后，選擇" 文件(F)->新建文件(N) "，在新建的文件中輸入以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>3）編輯HTML文件
在VS Code中，點(diǎn)擊左上角的"文件"菜單，選擇"打開文件"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來(lái)打開HTML文件。
在編輯器中可以直接修改HTML文件的內(nèi)容。VS Code會(huì)自動(dòng)識(shí)別HTML標(biāo)記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來(lái)保存HTML文件。
4）插件推薦
HTML CSS Support：提供對(duì)HTML和CSS的支持，包括代碼片段、自動(dòng)補(bǔ)全等功能。
Live Server：啟動(dòng)一個(gè)本地開發(fā)服務(wù)器，實(shí)時(shí)預(yù)覽HTML頁(yè)面的效果。
Prettier：格式化HTML代碼，使代碼結(jié)構(gòu)更整潔。
Auto Close Tag：自動(dòng)閉合HTML標(biāo)簽，提高編碼效率。
Bracket Pair Colorizer：對(duì)成對(duì)的括號(hào)進(jìn)行著色，方便識(shí)別代碼塊。
Sublime Text是一款流行的跨平臺(tái)源代碼編輯器，支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā)，包括編輯HTML、CSS、JavaScript等前端技術(shù)。
Sublime Text的界面非常簡(jiǎn)潔，沒有多余的菜單和工具欄，更便于專注于代碼編輯。Sublime Text支持多種編程語(yǔ)言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強(qiáng)大的插件系統(tǒng)，用戶可以根據(jù)需要安裝插件來(lái)擴(kuò)展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等，以滿足個(gè)性化需求。Sublime Text啟動(dòng)迅速，響應(yīng)快速，適合于快速編輯代碼。
1）安裝和配置
官網(wǎng)地址：Sublime Text - Text Editing, Done Right
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后，可以根據(jù)自己的喜好進(jìn)行編輯器設(shè)置，如字體、主題等。
2）新建HTML文件
在Sublime Text 安裝完成后，選擇" File->New File "，在新建的文件中輸入以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>3）編輯HTML文件
在Sublime Text中，點(diǎn)擊左上角的"File"菜單，選擇"Open File"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來(lái)打開HTML文件。在編輯器中可以直接修改HTML文件的內(nèi)容。Sublime Text會(huì)自動(dòng)識(shí)別HTML標(biāo)記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來(lái)保存HTML文件。
4）插件推薦
Emmet：提供HTML/CSS快速編寫和自動(dòng)完成功能，可以大大提高編碼效率。
Sublime Linter：對(duì)代碼進(jìn)行實(shí)時(shí)語(yǔ)法檢查，幫助發(fā)現(xiàn)潛在的錯(cuò)誤和警告。
Color Highlighter：對(duì)CSS中的顏色進(jìn)行高亮顯示，方便調(diào)試和修改樣式。
SideBarEnhancements：增強(qiáng)側(cè)邊欄功能，提供更多文件操作選項(xiàng)。
Dreamweaver是由Adobe公司開發(fā)的一款全球知名的網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)工具。它為開發(fā)人員和設(shè)計(jì)師提供了一個(gè)可視化的界面，可以直觀地創(chuàng)建和編輯網(wǎng)頁(yè)內(nèi)容，同時(shí)也支持手動(dòng)編輯代碼。Dreamweaver提供可視化界面，可以直觀地拖拽和編輯網(wǎng)頁(yè)元素，無(wú)需手動(dòng)編寫代碼。除了可視化界面，Dreamweaver也支持手動(dòng)編輯代碼，適合于開發(fā)人員和設(shè)計(jì)師。Dreamweaver可在Windows和macOS等多個(gè)平臺(tái)上運(yùn)行。Dreamweaver集成了代碼編輯器、預(yù)覽窗口、文件管理器等功能，提供全面的開發(fā)環(huán)境。
1）安裝和配置
官網(wǎng)地址：Website design software | Adobe Dreamweaver
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Dreamweaver。打開Dreamweaver后，，根據(jù)需要進(jìn)行編輯器設(shè)置，如界面語(yǔ)言、字體、代碼顏色等。
2）編輯HTML文件
在Dreamweaver中，點(diǎn)擊左上角的"File"菜單，選擇"New"，然后選擇"HTML"，即可新建一個(gè)空白的HTML文件。內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>使用可視化界面，可以直接拖拽頁(yè)面元素、調(diào)整布局、插入圖片等。若需要手動(dòng)編輯HTML代碼，可以在下方的代碼編輯器中進(jìn)行修改。Dreamweaver會(huì)自動(dòng)提供代碼補(bǔ)全和語(yǔ)法高亮功能。在Dreamweaver中，可以實(shí)時(shí)預(yù)覽網(wǎng)頁(yè)效果，點(diǎn)擊右上角的"Live View"按鈕即可。
3）CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的編輯和預(yù)覽，可以幫助創(chuàng)建更豐富的網(wǎng)頁(yè)效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼，并實(shí)時(shí)查看效果。
4）網(wǎng)頁(yè)上傳和發(fā)布
Dreamweaver集成了FTP功能，可以直接將編輯好的網(wǎng)頁(yè)上傳到服務(wù)器。點(diǎn)擊"Site"菜單，選擇"Manage Sites"，配置好站點(diǎn)設(shè)置，即可進(jìn)行上傳和發(fā)布。
5）Dreamweaver模板和庫(kù)
Dreamweaver提供模板和庫(kù)功能，可以保存和復(fù)用常用的網(wǎng)頁(yè)元素和樣式，提高開發(fā)效率。
參考文檔：https://www.cjavapy.com/article/3299/
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
