「译者：T5450LX1」
「把思维能力变革为标识符的控制技术写手」结语
他们平时在工程项目合作开发之中, 单厢借助许多增容辅助工具来检验CSS有关的标识符, 它能协助他们介绍什么样CSS 机能被采用，CSS标识符工作效率，和CSS标识符的继续执行情形，而那些都是 CSS 标识符检查和与增容的核心理念, 它在这种情形下，会负面影响他们整座中文网站插件的总体操控性, 因此掌控必要性的增容基本功是很有必要性的!
采用Chrome DevTools 增容CSS代码
他们平时能采用chrome插件便携式的Chrome DevTools增容辅助工具 来检查和与增容CSS标识符!
此基础纯手工增容 CSS 标识符
加速全自动查阅原素的CSS式样
能在chrome插件关上网页中按下快捷键F12 关上chrome合作开发增容辅助工具,接着采用斜线辅助工具 在Element快捷键中间接优先选择html标识符 , 最终在左侧的Style中就能看见现阶段那个原素的色调、字体、大小等CSS有关重要信息
如图:
加速查看css link内部JSP
基本概念
在他们优先选择好原素结点后, 左侧的 Styles 工具栏中，再次出现的现阶段原素的 CSS特性, 旁的镜像文档能间接点选关上表述CSS准则内部JSP 能查阅式样的示例
加速给优先选择的原素加进 囗式样
基本概念
这种方法相当于向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特性值减少1Alt+ 方向键Up 支持（windows，Linux）则是每点选一次给CSS特性值增加0.1Alt+ 方向键Down 支持（windows，Linux）则是每点选一次给CSS特性值减少0.1Shift + 方向键Up 则是每点选一次给CSS特性值增加10Shift + 方向键Down 则是每点选一次给CSS特性值减少10ctrl + Shift + Page Up 支持(windows，Linux）则是每点选一次给CSS特性值增加100ctrl + 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项, 接着回再次出现很多复选框机能
平时我会用到的快捷键如下表:
复快捷键描述如图
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增容检验标识符辅助工具
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/
如图
它会提示波峰值高那么是不好的, 总的趋势应该是在JSP的后面有更高的特异性
如下图
END
以上就是平时我在工作与学习之中会采用到的许多CSS标识符检验增容辅助工具, 希望能给您带来一点协助!
感谢您的阅读!
原创实属不易,如果能协助到各位请加个星标、点赞、在看 您的支持就是我继续创作下去的动力!
