Chrome DevTools 介绍

Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。

Elements

选取DOM节点
修改节点的样式、属性、状态，甚至整个节点html
节点操作：隐藏、删除、拷贝
断点：子节点修改、属性修改、节点移除

Console

最最最简单的、常用的：console.log()。其实，它可以执行常见任务，例如选择DOM元素，触发事件，监视事件，在DOM中添加和删除元素等，用法类似jQuery。

1. 选择器

$(selector, [startNode])：单选择器，document.querySelector的简写
$(selector，[startNode]）：全选择器，`document.querySelectorAll`的简写，返回一个数组$
log

log方法里第一个参数是带有特别标识符的字符串的话，控制台会根据不同的标识符来把后面的参数填充到前面的字符串中去。常见的标识符有以下：

%s 表示输出字符串
%d 表示输出数字（也可以用%i）
%f 表示输出浮点数值
%o 表示输出Dom元素
%O 表示输出JavaScript对象

但是，模板字符串（Template String） console.log(${a}) 基本上可以满足以上

%c 表示对输出的文字应用特殊的样式

console.log("%chahhahahahhahah", "color:red;font-size:16px;") (彩色的输出语句貌似看起来中看不中用，其实不然。大型的web开发项目，特别是多人分模块开发的时候，控制台一大堆console.log输出，你一下子找不到你自己的模块的输出语句。如果给你自己的模块输入语句应用了不同的颜色，相对来说比较好定位到输出的地方，这是提高效率的一个小技巧。)

info/error/warn

基本类似，只是在代表的意义和输出的样式有所区别。

group

用于显示一组的控制台输出，要搭配console.groupEnd来使用。

time

用于显示代码执行的时间，要搭配console.timeEnd来使用。

Sources

断点调试
代码格式化

Network

Record Network Log: 红色表示此时正在记录资源请求信息；
Clear: 清空所有的资源请求信息；
Filter: 过滤资源请求信息；
Use small resource raws: 每一行显示更少的内容；
Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；
Disable cache: 不允许缓存的话，所有资源均重新加载。

Performance

如下划分成4个区域

区域1：控制面板

Screenshots 截图：默认勾选，每一帧都会截图。
Memory 内存消耗记录：勾选后可以看到各种内存消耗曲线

高级配置（模拟手机、慢网络）

Disable javaScript samples 关闭javaScript样本：减少在手机运行时的开销，模拟手机运行时勾选
Network 网络模拟：可以模拟在3G,4G等网络条件下运行页面
Enable advanced paint instrumentation(slow) 记录渲染事件的细节：选择frames中的一块，可以看到区域四多了个Layers
CPU CPU限制：主要为了模拟低CPU下运行性能