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