者:极客小俊
一个把逻辑思维转变为代码的技术博主

引言

我们平常在项目开发当中, 利用调试工具来调试CSS相关的代码, 它可以帮助我们了解哪些CSS 功能被使用，CSS代码效率，以及CSS代码的执行情况，而这些都是 CSS 代码检查与调试的核心, 它在某种情况下，会影响我们整个网站应用程序的整体性能, 所以掌握必要的调试技巧是很有必要的!

使用Chrome DevTools 调试CSS代码

我们平常可以使用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