前言
效率Up，Up🚀🚀🚀，这样子就有更多的时间学习，以及陪女朋友啦✅
如果你用Chrome调试工具，还是停留在console阶段，赶紧来学习一波吧，绝对是满满的干货，让你效率UpUP。
本文侧重点就是关于Chrome DevTools。通过梳理Chrome DevTools 中的小技巧，这些技巧可以帮我们节省很多的时间，直接提升工作效率！
Chrome DevTools 的各种骚操作你了解多少呢？
❝ ❞
❝掘金小册：你不知道的 Chrome 调试技巧
❞
上面是我主要学习高效率使用Chrome DevTools的途径，其中一个是掘金小册，从基础开始讲起，非常受用。另外一个就是国外某网站，里面有「200+ Tips」。
接下来，我总结几个比较实用的✅
❝多图预警
❞
学会使用Command
如何打开Command menu
我们直接看到的DevTools 功能，只是一部分，更多的功能怎么打开呢？
Command 菜单可以帮助我们快速找到那些被隐藏起来的功能，这也是它本身必不可少的原因。
❝打开方式:
❞
[
Ctrl]+[Shift]+[I]打开Chrome调试面包在
Chrome的调试打开的情况下 按下 [Ctrl]+[Shift]+[P](Mac：[⌘]+[Shift]+[P])
比如常见的就是切换主题了
快捷键怎么查看呢，我教你一次性看shortcuts
有时候，你看身边的人使用快捷键的时候，是不是特别帅，你也可以跟他一样潇洒，一样🚀🚀🚀
截屏的新姿势
还在每次都要打开QQ或者是截图软件吗，这次不需要，大大提高你的效率🚀🚀🚀
通过 Capture full size screenshot 命令。请注意，这里说的是全屏，并不是嵌入页面的一部分。
当然了，Command里面功能太多了，等着你去探索，发现新的大陆🚀🚀🚀
Elements面板
获取某个HTML片段代码
当然了还有更简单的操作
- 选中你想要的dom元素，右键，选中copy中的Copy element
获取某个DOM元素Styles
你还在傻傻的一个个复制吗，这次一次就copy all styles
曾经还在为调伪类样式代码苦恼吗？
想不起来已注册事件侦听器的功能定义在哪里
有时候，想要看看某个DOM结点到底绑定了哪些事件，回调函数在哪里注册的，项目很大的话，找起来很不方便，那怎么提高效率呢，下面👇
颜色选择器
有时候，你看见某个网站配色挺好看的，于是你去用单独的取色软件去操作，那样子就太慢啦🚀
在元素面板中展开所有的子节点
有时候，你很想去查看DOM的层级关系，也就是子元素的包含关系，一个一个的去点击级联的 ▶ 按钮太慢了，不如使用右击节点后的 expand recursively 命令：
很大程度上提升了效率🚀🚀🚀
看dom层级的最直观的方式？
在Elements面板调整dom结构很不方便？
有时候，你想要去修改dom结果，但是在Element控制面板上操作不方便，那怎么更高效的操作呢？
Console面板
可以执行常见任务的功能，例如选择DOM元素，触发事件，监视事件，在DOM中添加和删除元素等。
$(selector, [startNode])：单选择器
?（选择器，[startNode]）：全选择器
document.querySelectorAll的简写，返回一个数组标签元素 语法：
$('a')
getEventListeners`获取指定对象的绑定事件
getEventListeners(object)返回在指定对象上注册的事件侦听器。返回值是一个对象，其中包含每个已注册事件类型（例如，click或keydown）的数组。每个数组的成员是描述为每种类型注册的侦听器的对象。 用法:
getEventListeners(document);
$0
在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。
理所当然，$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4
$_
调试的过程中，你经常会通过打印查看一些变量的值，但如果你想看一下上次执行的结果呢？再输一遍表达式吗？
这时候 $_ 就派上了用场，$_ 是对上次执行的结果的 「引用」 ：
console.table()
var data = {code:200,content:[{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]};
console.table(data.content);
console.time()
测试执行效率：
没有Performance API 精准，但胜在使用简便。
let i = 0;
console.time("While loop");
while (i < 1000000) {
i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
// For Loop
}
console.timeEnd("For loop");
console.dir()
打印DOM对象节点
console.dir(document)
看看上面的效果是上面吧🚀🚀🚀
剩下的很多，自己去探索吧🚀🚀🚀
Sources面板
在workspace修改你的文件
你把项目的文件夹直接拖到 Source 面板，DevTools 会将你做出的修改同步到系统的文件中。
有时候可以提高一定的效率哒🚀🚀🚀
检查动画
- 检查动画。您希望慢速播放、重播或检查动画组的源代码。
- 修改动画。您希望修改动画组的时间、延迟、持续时间或关键帧偏移。 当前不支持编辑贝塞尔曲线和关键帧。
怎么操作呢？来来来，我们看一看
- 快捷键 ctrl+shift+p ,打开 Command Menu,键入 Drawer: Show Animations。
DOM断点调试
如上图：「监听form标签，在input框获得焦点时，触发断点调试」
NetWork面板
查一些特定的请求，过滤器用过吗？
有时候，你想看看一些类型的文件，比如Img，js文件
有时候，你想看看请求资源小于100k的
有时候，你想看看请求资源是否成功，还是请求失败
以上问题等等，都是关于NetWork控制面板的，那我们可以使用过滤器
数字1箭头指向的就是过滤器，获取你想要的信息资源
数字2箭头也同样是过滤器作用，不过更加快捷
数字3表示的就是某个资源文件在哪里调用了，点进去就会跳转到对于位置
数字4箭头Waterfall，可以更清楚的看请求一个资源每个阶段画的时间，比如DNS Lookup，建议DNS链接，SSL过程，Request sent发送时间，DownLoad下载某个特定资源时间如下👇
那我们看下怎么具体操作:
不想加载某个资源文库怎么操作呢？
如果你通过自己源码去修改，就out了，这样子效率很明显很低，我们通过「Block request URL」
效率是不是Up，Up🚀🚀🚀
移动开发过程中，想模拟网络3G,4G,2G,没问题
有时候，你做移动端的时候，想试一试网络速度对你项目有啥波动，比如，3G的时候，你首屏加载有多块，需不需要引入骨架图来优化用户体验呢，那你怎么检测呢，看下面👇
- 打开控制面板Network
- 找到online字样按钮，选中你所需要的网络环境即可
网络面板中请求资源更加详细的信息
有时候，项目中会遇到很多问题，比如请求资源就是其中一个，你需要更加完善的信息，这样子才可以更加高效的取诊断出问题，那需要怎么操作呢👇
在此页面下，右键新增你想要查看的信息，会让你的效率🚀🚀🚀
❝NetWork控制面板还有其他的功能，比如请求是否要从缓存中取，也就是Disable cache字样
❞
Layers面板
这个对于查看浏览器渲染阶段中的图层的分成，绘制，分块，光栅化，挺有帮助的，那接下来我带你们看看要怎么操作吧👇
接下来就是怎么查看了：
当然了，你对于渲染流程中阶段还不是很了解的话，可以看看我这篇博客：
里面详细的描述了构建布局树后，图层是怎么一步步的绘制，比如图层会生成绘制列表，然后再提交给合成线程，在一步步，最后在显示器显示。
🚀🚀🚀不够的话，自己去摸索吧。
❤️ 感谢大家
如果你觉得这篇内容对你挺有有帮助的话：
点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
欢迎在留言区与我分享你的想法，也欢迎你在留言区记录你的思考过程。
觉得不错的话，也可以看看往期文章：
[建议👍]再来100道JS输出题酸爽继续（共1.8W字+巩固JS基础）
(建议精读)送你 54 道 JavaScript 面试题/a>
