者:極客小俊
一個把邏輯思維轉變為代碼的技術博主

引言

我們平常在項目開發當中, 利用調試工具來調試CSS相關的代碼, 它可以幫助我們了解哪些CSS 功能被使用，CSS代碼效率，以及CSS代碼的執行情況，而這些都是 CSS 代碼檢查與調試的核心, 它在某種情況下，會影響我們整個網站應用程序的整體性能, 所以掌握必要的調試技巧是很有必要的!

使用Chrome DevTools 調試CSS代碼

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

基礎手工調試 CSS 代碼

快速手動查看元素的CSS樣式

可以在chrome瀏覽器打開頁面中按下快捷鍵F12 打開chrome開發調試工具,然后使用箭頭工具 在Element選項中直接選擇html代碼 , 最后在右側的Style中就可以看到當前這個元素的顏色、字體、大小等CSS相關信息

如圖:

快速查看css link外部樣式表

概念

在我們選擇好元素節點之后, 右側的 Styles 選項卡中，出現的當前元素的 CSS屬性, 旁邊的鏈接文件可以直接點擊打開定義CSS規則外部樣式表 可以查看樣式的源文件

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

概念

這種方法相當于向html標簽的 style 屬性一樣的原理!

當我們在Element選項中直接選擇html代碼中的一個元素之后 , 在右側的Style中, 點擊 element.style 就可以給當前選擇的這個元素增加行間CSS樣式了!

這個方法在實際應用開發當中很實用， 根據添加的行間css屬性我們就很容易快速判斷并且檢測出元素的CSS屬性的問題出在什么地方!

如圖

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

概念

平常在開發當中 也會用到這個小技巧, 來快速檢測自己寫的CSS是否有誤!

添加CSS聲明

當我們在Element選項中直接選擇html代碼中的一個元素之后 , 在右側的Style中單擊要添加聲明的樣式規則的{}大括號中間部分, 就可以出現光標，輸入CSS屬性名，最后輸出完成后 按 enter 鍵即可!

修改CSS聲明

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

如圖

快速給元素添加class類

概念

當我們在Element選項中直接選擇html代碼中的一個元素之后 , 在右側的Style選項卡中有一個 .cls 的按鈕,點擊這個按鈕會顯示一個 Add new class 的輸入框，輸入想要添加的class類名之后按 enter 鍵就可以了

這樣就可以直接點擊 添加好的class類 復選框可以來回切換樣式 進行CSS屬性的測試

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

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

我們在Element選項右側的Style選項卡中編輯CSS屬性值的時候，可以使用鍵盤上的快捷鍵將值遞增/遞減的操作

• 方向鍵Up 則是每點擊一次給CSS屬性值增加1
• 方向鍵Down 則是每點擊一次給CSS屬性值減少1
• Alt+ 方向鍵Up 支持（windows，Linux）則是每點擊一次給CSS屬性值增加0.1
• Alt+ 方向鍵Down 支持（windows，Linux）則是每點擊一次給CSS屬性值減少0.1
• Shift + 方向鍵Up 則是每點擊一次給CSS屬性值增加10
• Shift + 方向鍵Down 則是每點擊一次給CSS屬性值減少10
• ctrl + Shift + Page Up 支持(windows，Linux）則是每點擊一次給CSS屬性值增加100
• ctrl + Shift + Page Down支持(windows，Linux）則是每點擊一次給CSS屬性值減少100

拾色器的使用

概念

一般可以使用拾色器來快速修改元素的顏色

在Style選項卡中,選中目標html元素后 將鼠標懸停在目標元素的顏色屬性小圖標上點擊一下，就可以出現拾色器了 , 如果你很會搭配顏色這個小工具還是挺有用的!

如圖

CSS Overview (當前頁面CSS信息提取)

這個功能還是非常強大的! 但是chrome開發調試工具 默認是沒有開啟的, 所以需要我們手動去開啟

如何在chrome開發調試工具中開啟CSS Overview功能

步驟

打開chrome瀏覽器---->F12進入調試工具----->點擊調試工具右上方的小齒輪setting圖標進入設置---

---->選擇Experiments----->勾選CSS Overview 選項即可!

如圖

注意: 開啟之后要重新開啟一下調試工具!

CSS Overview的作用

這個功能可以給開發者展示出當前頁面 CSS 屬性的所有信息，比如顏色、字體、對比度問題、未使用的聲明和media查詢, 通常用這個工具來判斷當前CSS 代碼的質量。

CSS Overview功能包含五個信息板塊

1.Overview summary

重點可以顯示出一些當前頁面中的CSS的使用情況!

2.Colors

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

3.Font info

在這里可以顯示出當前頁面中 所使用到的字體以及字體css屬性相關的所有信息!

也就是可以在這里看到每一種使用到的字體所設置的css字體相關屬性

4.Media queries

在這里可以查看到當前頁面中使用到的媒體查詢相關信息

Coverage panel (檢測信息覆蓋度)

這個功能主要是可以用來檢測CSS或JS 文件的代碼數量以及使用評率, 也就是說它可以提示項目應用中加載的每個文件使用多少CSS

打開步驟

打開chrome瀏覽器---->F12進入調試工具----> Ctrl + shift + P 快捷鍵，輸入Coverage，然后再選擇: Show Coverage，最后點擊刷新的小圖標 就可以了!

小提示 可以在 URL Filter輸入框中過濾出 .css文件, 只要輸入.css 就可以專門顯示 CSS文件了

如圖

這些數據看似不重要，但可能有些時候可以幫助你 建立優化思維以及策略!

Rendering Panel (渲染面板)

聽名字就知道它的作用是跟CSS效果渲染有關系的, 平常使用它 來檢測代碼的渲染時間以及渲染過載的區域!

關于css渲染涉及到瀏覽器構成,這里就不過多提及，以后我會出一篇詳細做講解!

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

打開chrome瀏覽器---->F12進入調試工具----> Ctrl + shift + P 快捷鍵----->輸入Rendering---->然后選擇 Show Rendering項, 然后回出現很多復選框功能

平常我會用到的選項如下表:

如圖

渲染面板中我們可以獲取到 一些常規檢查中沒有的數據信息, 這些信息對于了解 CSS 代碼 或者是 JS代碼的性能以及消耗設備的資源等 都提供了很多依據和參照, 在深度優化的時候或許能給你帶來一絲啟發!

Performance Monitor (性能監視器)

故名意思就是用來查看代碼運行的性能監視界面,

打開步驟

打開chrome瀏覽器---->F12進入調試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance Monitor---->最后選擇 Show Performance Monitor 項 即可打開,

在這個面板當中可以勾選一些選項如下

CPU usage

當前CPU的使用率,也就是CPU占用率

JS heap size

指的是JS對象堆的占用的內存大小

DOM nodes

內存中DOM節點個數，這個會隨著頁面的效果變化而增加或減少

JS event listeners

JS事件偵聽器個數

如圖

Layouts/sec

在用戶查看頁面的過程當中，頁面中的布局元素重排

Style recalcs / sec

頁面中的樣式重繪

以上兩個選項通常也是用于檢測與分析我們的CSS代碼性能, 例如我們在CSS中使用了left或top屬性那么就會產生一些布局上的重繪, 那么如果將這些屬性加載到JS動畫中，則可能每秒都觸發幾十甚至是上百次重繪操作

處于性能優化考慮 , 我們如果使用了CSS3中的transform屬性中的translateX/Y來做動畫效果 ,那么會發現它并不會觸發重繪的流程,而只是組合畫面 而這些都是基于顯卡GPU, 而CPU 的使用率會大大降低!

所以我們平常在開發JS效果的過程當中使用 translate()來移動元素，而不用 top或left來移動元素的根本原因!

我們可以來看一下對比圖:

小結: 所以通過 Layouts/sec與Style recalcs/sec 兩個選項展示了在頁面中觸發重繪和布局的CSS相關信息

以上這些在平常前端開發當中可以幫助你獲取一些實時應用程序的性能數據,在判斷性能優劣的時候也是非常有幫助的!

Performance Panel (性能面板)

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節點、事件監聽等所需要的渲染總體時間!

國外在線CSS調試檢測代碼工具

1.CSS Specificity Visualizer

概述

Specificity Visualizer個人覺得是一款國外非常不錯的在線css檢測工具

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

如圖

我們只需要打開訪問地址后 粘貼你想要檢測的CSS代碼, 然后點擊Visualize it按鈕進行檢測, 然后回在下面顯示出特殊樣式選擇器 以及選擇器的權重等相關信息

操作圖

標記為紅色的地方說明這些選擇器還可以優化得更好!

2.CSS Specificity Graph Generator

概述

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

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

如圖

它會提示波峰值高那么是不好的, 總的趨勢應該是在樣式表的后面有更高的特異性

如下圖

END

以上就是平常我在工作與學習當中會使用到的一些CSS代碼檢測調試工具, 希望能給你帶來一點幫助!

感謝你的閱讀!

"點贊" "評論" "收藏"

大家的支持就是我堅持創作下去的動力!?

?如果以上內容有任何錯誤或者不準確的地方，歡迎在下面 留個言指出、或者你有更好的想法，歡迎一起交流學習?

HTML從哪入手？

自學的話，首先要理解html的作用。html，hypertext markup language，超文本標記語言，用來展示網頁中的內容。同時 HTML 也是我們學習前端開發的基礎。隨著 web 前端技術的飛速發展，HTML 和 CSS 也成為了編程者的必備技能。而要想做一個網頁光會這一門語言是不夠的，還需要自學css，JavaScript。其中html和css較JavaScript容易。

可以這樣理解，HTML，是一個文件類型，可以被瀏覽器解析。如果不使用瀏覽器打開，我們看到的將是一行行代碼，在瀏覽器中打開以后呢，就會出現一些靜態效果了。下面介紹一下初步的一些HTML語法知識。

HTML 標簽非常注重語義化，很多標簽都是通俗易懂的，大大降低了我們學習的難度。這套 HTML 教程更是為了避免初學者走太多的彎路，指出了許多其它 HTML 教程中沒有提到的學習誤區，并且給初學者提供了一個具體的學習思路，除了注重 HTML 知識點的講解，更加注重 web 前端開發技巧和思維。幫助大家快速入門，其中包含大量的實踐經驗，將知識系統化，濃縮為精華，用通俗易懂的語言直指網頁設計初學者的痛點。

學海無涯，苦做舟，學習如同修行，只有潛心才可以領悟真諦。HTML 中的每一個小知識點都可以讓頁面發生不同的變化，現在就讓我們行動起來，跟著 HTML 教程的步伐，讓我們一起走進 HTML 的世界。

HTML語言特點

超級文本標記語言文檔制作不是很復雜，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特點如下：

● 簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。

● 可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。

● 平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。

● 通用性：另外，HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

什么時候用HTML

B（Browser）/S（Server）架構方向，也是我們以后主攻方向

為什么要學HTML

我們以后主要為企業內部提供解決方案，例如：企業內部的辦公系統、供應鏈管理系統、客戶關系管理系統等，而這些系統通常對界面的表現要求較低，對業務處理和數據處理要求較高，并且要求降低升級維護的成本，B/S架構可以更好的被企業接受，所以我們以后主要的方向是開發基于B/S架構的應用，B/S架構的開發通常又被叫做Web開發，Web開發通常包括Browser瀏覽器端的開發以及Server服務器端的開發。

雖然我們是學習Java后臺服務器編程，但是前端頁面編寫要了解，能看懂，簡單的頁面效果可以實現即可；

怎么開發HTML

創建一個以 .html或 .htm 結尾的文件，用文本編輯器打開就可以開發

怎么運行HTML

用瀏覽器打開以.html或.htm的文件就可以自上而下解析執行，不需要編譯

DTD：Document Type Definition

● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

● DTD文件的作用

● 幫助你編寫合法的代碼

● 它讓瀏覽器正確地顯示器代碼，或者說DTD只是寫給檢查器看的

HTML與W3C（World Wide Web:www）

HTML規范是由w3c負責制定的，W3C是世界萬維網聯盟（World Wide Web:www）

安裝瀏覽器

FireFox、Google、IE

HTML元素

HTML標簽

<>表示開始標記

</>表示結束標記

<html>開始標簽

</html>結束標簽

html為元素

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。

HTML 元素語法

● HTML 元素以開始標簽起始

● HTML 元素以結束標簽終止

● 元素的內容是開始標簽與結束標簽之間的內容

● 某些 HTML 元素具有空內容（empty content）

● 空元素在開始標簽中進行關閉（以開始標簽的結束而結束）

● 大多數 HTML 元素可擁有屬性

嵌套 HTML 元素

大多數 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文檔由嵌套的 HTML 元素構成。

HTML 文檔實例

上面的例子包含三個 HTML 元素。

HTML 實例解釋

● <p> 元素：

這個 <p> 元素定義了 HTML 文檔中的一個段落。

這個元素擁有一個開始標簽 <p>，以及一個結束標簽 </p>。

元素內容是：This is my first paragraph。

● <body> 元素：

<body> 元素定義了 HTML 文檔的主體。

這個元素擁有一個開始標簽 <body>，以及一個結束標簽 </body>。

元素內容是另一個 HTML 元素（p 元素）。

<html> 元素：

這個元素擁有一個開始標簽 <html>，以及一個結束標簽 </html>

元素內容是另一個 HTML 元素（body 元素）。

不要忘記結束標簽

即使您忘記了使用結束標簽，大多數瀏覽器也會正確地顯示 HTML：

上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。

注釋：未來的 HTML 版本不允許省略結束標簽。

空元素

有一些元素必須使用單個標簽表示。這些被稱為空元素。

一個這樣的元素是 hr 。

hr 是一個分組元素，用于表示一個段落級別的內容。

您可以使用以下兩種方式之一使用void元素 - 第一種方法是僅指定開始標記，如以下代碼所示。

瀏覽器知道hr是一個void元素，因此不希望看到結束標記。

您可以使元素與空元素一致，如下面的代碼所示。

HTML注釋

注釋是關于HTML元素的有用信息。注釋使HTML文檔更易讀和可理解。

HTML中的注釋以標簽<！-- 開頭，并以 --> 結尾。

瀏覽器將忽略您在這些標記中放置的任何內容。

以下代碼具有HTML注釋。

HTML標簽

超文本標記語言（外國語簡稱：HTML）標記標簽通常被稱為HTML標簽，HTML標簽是HTML語言中最基本的單位，HTML標簽是HTML（標準通用標記語言下的一個應用）最重要的組成部分。

HTML標簽的大小寫無關的，例如“主體”<body>跟<BODY>表示的意思是一樣的，推薦使用小寫。

實例

標簽定義及使用說明

<html> 標簽告知瀏覽器這是一個 HTML 文檔。

<html> 標簽是 HTML 文檔中最外層的元素。

<html> 標簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標簽）的容器。

瀏覽器支持

所有瀏覽器都支持 <html> 標簽。

段落標簽：<p></p>

定義：可以把 HTML 文檔分割為若干段落

標題字：<h1></h1>至<h6></h6>

標題是通過 <h1> - <h6> 等標簽進行定義的

<h1>定義最大標簽，<h6>定義最小標簽

換行：<br>

定義：<br> 可插入一個簡單的換行符

<br> 標簽是空標簽，它沒有結束標簽

注釋：<!-- 這是HTML注釋 -->

水平線：<hr/>

預留格式<pre>內容</pre>

定義：頁面中輸入什么樣式就顯示什么樣式

實例：< >

搭配視頻效果更佳~~

https://www.ixigua.com/690746767030039398