整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者:极客小俊
一个把逻辑思维转变为代码的技术博主
引言
我们平常在项目开发当中, 利用调试工具来调试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小时内与您取得联系。
