前言
从毕业入职工作以来，Chrome DevTools真的可以称为前端开发的最亲密的friend了。通过这段时间的不断学习和使用，对Chrome DevTools也总结了一套自己的经验使用方法，在这里我也会把自己的总结分类，分享出来并和大家一起讨论。在此文章中会优先介绍前两大类，后续的其他相关分类用法会在之后的文章中陆续推出，请敬请期待哟~
那么在这篇文章中会根据自己的思路先向大家介绍console的花式用法和命令菜单的花式用法，从浅入深，逐步深入。文章中我也会结合平时开发的项目，清晰直观的展示我所推荐的一些用法所带来的好处，也希望大家多多提出意见或者进行补充，来打造一篇个性化的Chrome devTools的文章咯~
console花式玩法
这一个板块主要会介绍console的两处不同新颖玩法，会分别介绍除了console.log的一些api方法应用场景以及巧用变量打印的代码演示分析。
一. console对象专栏
那么在正式介绍之前，我们先看一下console对象里面都有那些方法。
那么我会从头开始依次介绍几种比较常用的方法：
1. 断言条件判断打印：console.assert()
在某个特定的环境以及场景下，想打印具体的日志，但不影响程序的继续执行。
let testValue = 10086
console.assert(testValue === 10087,'测试testValue的值')
console.log('代码继续执行')
2. 清空控制台：console.clear()
3. 统计函数执行次数：console.count()
console.count(); //输出：default: 1
console.count('a');//输出：a: 1
console.count(); //输出：default: 2
console.count('b');//输出：b: 1
我们可以用来统计一个函数被调用的次数，也可以给函数传参，根据参数的不同类型分组来统计函数被调用的次数。
function foo(param = '') {
param ? console.count(param) : console.count()
}
foo() //default: 1
foo() //default: 2
foo() //default: 3
foo('A') //A: 1
foo('A') //A: 2
foo('B') //B: 1
4. 重置count计数的方法：console.countReset()
调用该方法会重置console.count()方法的计数
console.count();
console.countReset();
console.count();//输出 default: 1
console.count('a');
console.countReset('a');
console.count('a');//输出 a: 1
5. 打印DOM对象节点方法：console.dir()
在打印字符串或者对象上和console.log()并没有太大的区别，仅仅是展示形式的不同。但是在打印dom对象上，console.log()打印的是纯标签格式，而console.dir()则是打印输出DOM树的对象格式。
这里说明一下console.dirxml()就是用来显示网页的某个节点（node）所包含的html/xml代码。
6. 常用方法：console.log(),info(),warn(),error()
console.log('打印普通信息')
console.info('打印提示性信息')
console.warn('打印警示信息')
console.error('打印错误信息')
这里注意一下，图里红框框住的Default levels。里面按照严重的级别排序分别为：Verbose（详细）,Info（信息），Warnings（警告）,Error（错误）。我们可以通过下拉框的选择搭配Filter的功能来对控制台打印的信息进行筛选。
7.1 分组输出信息：console.group(),groupEnd()
有的时候你想要将你打印的信息更加直观，可以选择分组查看，并且控制台里可以折叠/展开。
console.group('收货信息'); //外层组
console.log('name: 君君');
console.log('telephone: 188xxxx3135');
console.group('收获地址'); // 内层组
console.log('city: 北京');
console.log('street: 次渠');
console.groupEnd();
console.groupEnd();
7.2 console.groupCollapsed
与console.group方法很类似，但是在打印的时候第一次显示的时候是收起的，需要手动将其展开。
console.groupCollapsed('收货信息'); //外层组
console.log('name: 君君');
console.log('telephone: 188xxxx3135');
console.groupCollapsed('收获地址'); // 内层组
console.log('city: 北京');
console.log('street: 次渠');
console.groupEnd();
console.groupEnd();
8. 表格形式输出：console.table()
它可以将复合类型的数据，也就是数组对象的类型转换为表格的形式。
var arr = [ { name: '吴亦凡', varietyShow: '中国新说唱' }, { name: '张艺兴', varietyShow: '极限挑战' }, { name: '鹿晗', varietyShow: '奔跑吧兄弟' }, { name: '黄子韬', varietyShow: '创造营' },]
console.table(arr)
9. 测试执行时间或者执行效率：console.time(),timeLog(),timeEnd()
time()方法可以启动一个新计时器，并且对测量某个事项花费的时间非常有用。如果想要停止计时器，可以调用timeEnd()并向其传递到初始值设定项的相同字符串。控制台随后会在timeEnd()方法出触发时记录标签和经过的时间。
console.time("test loop");
for (var i = 0; i < 100000000; i++) {
// 开始循环执行
}
console.timeEnd("test loop");
// test loop: 221.094970703125ms
下例的输出分别打印了用户从打开页面到关闭第一个alert的record time，和关闭第二个alert的record time。
console.time("record time");
alert("continue");
console.timeLog("record time");
alert("continue again");
console.timeEnd("record time");
// record time: 2754.39599609375ms
// record time: 5741.634033203125ms
10. 追踪代码的调用栈：console.trace()
function addSum(a,b){
console.trace();
return a+b;
}
var x = addSum3(1,1);
function addSum3(a,b){return addSum2(a,b);}
function addSum2(a,b){return addSum1(a,b);}
function addSum1(a,b){return addSum(a,b);}
11. 性能分析：console.profile()
function doTask(){
doTaskA(1000);
doTaskB(1000000000);
doTaskC(1000,10000);
}
function doTaskA(count){
for(var i=0;i<count;i++){}
}
function doTaskB(count){
for(var i=0;i<count;i++){}
}
function doTaskC(countX,countY){
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
}
console.profile();
doTask();
console.profileEnd();
chrome浏览器想要查看性能面板，不会在控制台直接打印，需要点击右上角的三个点，需要点击More tools下的Javascript Profiler。
二. 变量打印专栏
在京东主站的页面上我们会在console控制台里看到下面的这样一段文字，让我们一起简单剖析一下它的实现方式。
剖析之前，先总结一下知识点：
- %s 字符串
- %d或%i整数
- %f浮点数
- %o%O object对象
- %c css样式
那么京东主站的这一串文字，我们就可以采用%c css样式加 \n 换行符来实现，具体代码如下：
console.log('%c本页面由 凹凸实验室（JDC-体验技术部） 负责开发，你可以通过 https://aotu.io 了解我们。\n \n如果你对我们在做的事情也有兴趣，欢迎加入 aotu@jd.com（注明来自console）\n\n本项目骄傲的使用了 凹凸实验室 出品的Nerv框架，相关内容及生态你可以通过官网了解更多。\n https://nerv.aotu.io/','color:#1890ff'
注：console.log打印输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，这个无法用%c的css样式覆盖掉。
三. console内置指令专栏
类似于jquery的用法，可以在console面板里直接选择DOM元素，触发事件，监视事件以及添加和删除元素等等。
下面会介绍各种$的格式基础用法：
1. $_ : 会记录控制台上次运行的结果，以便下次执行
2. $x：根据表达式将匹配到的节点放到一个数组里后返回
这里以我们项目中的美丽日记进行举例元素的匹配情况
$x('//li') 匹配所有li元素标签
$x('//li//a') 匹配所有li元素下a元素标签
$x('//li[a]') 匹配包含a元素的所有li元素标签
3. 1,3,5：代表你最近选中过的5个DOM节点
操作以图中项目举例
4. $$('xxx')：返回的是满足所有条件的一个集合，类似于document.querySelectorAll() 的封装
二. 花式操作命令菜单
devtools虽然功能已经很强大，但是毕竟面板无法有限的同时展现全部功能。那么我们可以通过Windows(ctrl + shift + p)或者Mac(command + shift + p)打开输入我们想要实现的功能。这里我会就我平时工作中项目里常用到的六大模块进行详细阐述
1：打印结果加上时间戳格式
在命令菜单中输入show timestamps可以为自己的打印结果加上时间戳，可以更直观的看到整体打印的执行时机。
2：监控fps指标工具
该工具功能会显示实时fps面板，进行页面的fps指标展示，同时可观察界面交互时内存的使用情况。
可以通过命令菜单Show frames per second(FPS) meter开启。
激活后，可以在页面左上角观察到一个黑色的区域，里面包含了画面帧的实时数据。有了这个工具，我们可以及时的观察到在我们操作页面的过程中直接看到什么而导致页面帧刷新频率的下降。
如果动画以60FPS的速度运行，那么它看起来很平滑。低于60FPS意味着某些帧渲染花费的时间太长，并且动画看起来不流畅，甚至有些混乱，页面急需进行优化。FPS仪表中显示的另一件事是GPU内存使用情况，在上一个图中为512MB中的2.3MB,这意味着GPU使用率较低。
3：更为强大的性能监视器 Performance Monitor
有的时候我们对一个项目或者说对一个页面进行javascript或css优化的时候，有时候想要找到一个直观的方法来定位我们优化的效果。这个时候我们可以通过Performance Monitor性能监视器进行实时的监控。
打开命令菜单输入 > Show Performance Monitor来打开性能监视器，性能指标如下：
CPU usage： CPU占用率
JS head size: JS内存使用的大小
DOM Nodes: 内存中挂载的DOM节点个数
JS event listeners：事件监听数
Layouts / sec：布局重排，浏览器用来计算页面上所有元素的位置以及大小
Style recalcs / sec：页面样式重绘
这里我推荐一篇文章，关于Paul Irish的为什么使用Translate()移动元素优于Top/Left。这里简单说明一下，top和left属性会触发整个像素的渲染流程（涉及绘制，布局和组合），与动画搭配起来，每秒会触发相当多的操作。但是transform属性，根据我们推荐的性能监视器Performance Monitor你就会发现，并不会触发绘制和布局。
4：代码覆盖率功能
在命令菜单可以通过Coverage功能来查看代码的覆盖率，该功能同时适用于JS和CSS，通过动态收集代码执行过程中有多少比例的代码真正的在执行，来发挥它的价值。进而来提高改进WEB应用的性能。
如上图小动画所示，coverage录制结果表格中会展示所有加载的文件类型，文件运行的使用率以及汇总数据。通过点击对应的静态资源文件，会在sources面板中打开，绿色表示用到，红色表示未用到。
那么我们现在会讨论一下coverage代码覆盖率有什么用：
在录制数据的过程中，如果很大一部分代码没有执行过，意味着用户在访问我们页面的时候会加载太多无用的代码，导致我们页面的完全加载时间，单页应用的启动时间变慢，在慢速网络下尤其低端设备下性能损耗的问题更加明显。通过调研，可以从两个方面来对其进行优化，下面涉及的webpack的打包方式暂不展开描述，只提供一个思想，后续自己会通过实践后再输出一篇相应的文章。
1）去掉死代码
一个页面乃至一个项目会经很多人进行开发，乃免会遗留下很多大量无用的代码，很多人不敢随意删除，导致无用代码积累的越来越多。那么我们可以通过依赖打包工具的这一种方式，在压缩代码时增加支持直接删除死代码的配置项。
2）懒加载代码
有的时候coverage执行中会发现无用的代码比例特别高，但这并不意味着都是完全无用的，而是可能部分代码在页面加载的时候并没有用到，但用户接下来的操作可能会触发那些没有用到的代码。所以我这边提供一个懒加载的思路，希望这些代码在需要用到的时候再加载。webpack里的一些配置及方法可以实现这一部分功能，后续文章中我会介绍到。通过懒加载的这种方式，就可以极大的减少页面初次下载的代码，来提升部分性能。
5：页面截图功能
可以通过Screenshot capture node screenshot对一个dom节点进行截图，实现截取特定节点图片的效果。
或者有时候你想实现全屏截图的效果，可以通过Screenshot Capture full size screenshot命令。
**注意：**全屏截图的效果，并不仅仅只是页面的可视区域的部分截图，而是包含滚动条在内的所有页面的内容。
6：检查动画功能
当我们在开启动画检查功能后，可以实现检查我们的动画或者修改我们的动画，然后直观的在页面上展示的功能。检查时，可以减慢、重播或查看动画组的源代码。修改时，可以修改动画组的时间，延迟（**100%，25%，10%**三挡），持续时间或关键帧偏移。
首先我们如何开启呢，可以通过两种方式，一种是通过命令菜单：Show Animations或者通过右上角的三个点打开More tools的工具，选中Animations。这里以京东主站为例，演示下打开后的效果。
动画功能面板主要分为4个功能，图中以序号的方式进行说明。
- Controls(控件)：可以更改当前选定动画组的速度。
- Overview(概述)：在此处可以选定一个动画组以在Details中检查和修改它。
- Timeline(时间轴)：暂停并从此处开始播放动画，或跳到动画中的特定点。
- Details(详细)：检查并修改当前选定的动画组。
参考资料
developers.google.com/web/tools/c…
developers.google.com/web/tools/c…
