作为一名开发，相信大家平时和 Chrome Devtools 接触不少，但是用的最多的可能也就是调调样式或者console一下。
这里整理了一些简单又好用的调试功能，相信会对你的调试有一定的帮助！
注：这里的功能都是基于 96 版本。
1. 滚动到视图之中 scroll into view
在新需求中碰到了一个长页面中，搜到了我想要修改的节点元素，我该怎么找到这个元素在页面的哪里呢？还在傻乎乎的上下翻动页面寻找嘛？教你一招，直接右键 ，然后选择Scroll into view，它就自动跳出来了。
2. 截图新方式
手边没有合适的截图工具，或者还在打开某某软件来截图？没点截图骚操作怎么行。
Command+Shift+P (Mac) 或者 Control+Shift+P （Window）调出 command 输入 Capture full size screenshot，就能获取一张完整地截当前网页长图，从最上截到最下。
同理，还有其他三种截图方式：
3. 拾色器
你是不是还在电脑上常备颜色选择器的某某软件？Chrome 贴心的为你准备好了。
4. CSS Overview
这是 Chrome 96 中的预览功能，它可以更好的帮助你了解页面上的 CSS 并以便做出一些改进。
里面的内容包括：
- 概览总结。页面上的一个高级摘要，比如页面上有元素，选择器的数量等。
- 颜色信息。根据页面上的所有颜色根据用途进行了分组，如文本颜色，背景颜色等。同时还向你显示了低对比度的文本，可以帮助你改善页面的可访问性。
- 字体信息。展现了页面中的所有字体及其出现次数。
- 未使用的样式声明。即一些定义了的，但是没有被使用的样式。
- 媒体查询。页面中定义的所有媒体查询。
tips: 以上所有列表点击之后都能显示相应受影响的元素列表。
5. 检查动画
他有两个主要的用途：
- 检查动画。放慢、重放或检查动画组的源代码。
- 修改动画。您想要修改动画组的时间、延迟、持续时间或关键帧偏移。目前不支持贝塞尔曲线编辑和关键帧编辑。
动画检查器支持 CSS 动画、CSS 过渡和 Web 动画。但是requestAnimationFrame目前不支持动画。
6. 布局调试面板
flex or grid 属性太多记不住？直接给你做成可视化。[示例]
7. 选择 JavaScript 上下文
默认情况下，JavaScript 上下文为当前文档的浏览上下文。假设你的网页上有一个嵌入 <iframe> 的广告，您希望运行 JavaScript 以调整广告的 DOM，那你必须选择广告的浏览上下文。
8. 增强 log 的阅读体验
有时候当你用 console.log() 打印一个简单的变量，都容易记不住哪个值是哪个变量打印的，当数量一多，阅读起来更是非常费劲。
// bad
const a = 5;
const b = +new Date();
const c = 'str';
const d = 10;
console.log(a,b,c,d)
> 5 1640496322514 'str' 10
// very bad
console.log('a', a);
console.log('b', b);
console.log('c', c);
console.log('d', d);
为了让它变得更容易阅读，你只需要用一个 {} 将起包裹住, 或者将其和 console.table 搭配使用。
// good
console.log({a,b,c,d})
// or
console.table({a,b,c,d})
9. copy(...)
浏览器控制台中的内容想复制出来怎么办，直接 copy 呀！
10. 打印时间
想测试一段代码的运行时间怎么办？使用 console.time() 和 console.timeEnd()就行了。
console.time();
for (let i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();
11. $_
tips: 如果您正在使用使用
$的库（例如jQuery），则此功能将被覆盖，并且$将对应于该库的实现
我们在调试的时候，会经常想看看上一个表达式输出的结果，难道还要重新再输入输出一次吗？
这次不需要了，使用$_，它会返回上一次执行结果的引用。
假设我们有这样一个场景，需要反转一个字符串 'abcdefg',自然是这样：
'abcdefg'.split('').reverse().join('')
// gfedcba
代码确实反转了字符串。但是假设你仍然不理解split()，reverse()，join()方法的作用以及运行这些中间步骤的结果，所以现在你想要一步一步地执行上面的代码，就可以很好的使用 $_。
// bad
'abcdefg'.split('');
> ['a', 'b', 'c', 'd', 'e', 'f', 'g']
['a', 'b', 'c', 'd', 'e', 'f', 'g'].reverse();
> ['g', 'f', 'e', 'd', 'c', 'b', 'a']
['g', 'f', 'e', 'd', 'c', 'b', 'a'].join('');
> 'gfedcba'
// good
'abcdefg'.split('');
$_.reverse();
$_.join('');
> 'gfedcba'
12. Block request URL
如果你想知道当页面的某些关键资源不可用，或者加载失败了的时候，页面的外观和行为会是怎样的呢？我们可以通过阻拦这个请求，来达到这个目的。
同理, Block request domain 可以阻拦选中域名下的所有资源请求。
13. Replay XHR
我们在前后端联调的时候，是不是会经常重复发送某个关键请求呢？还在刷新页面吗（那我是不是还得再多等几秒白屏时间）？直接 Replay XHR就行了。
14. 获取元素的引用
我们经常会获取页面上某个元素的引用对其进行操作，一般会用 document.getElementById 或者 document.getElementsByClassName来获取元素。教你几招，效率 up up。
$0 - $4
$0 返回的是最近选择的元素的引用, $1 返回最近选择的第二个，依此类推。
Store as global variable
可以将元素保存为全局变量
Copy JS path
Copy JS path 自动就用 querySelector 帮你选择好了元素，再也不用我手动去写选择器啦。
15. 自定义的代码片段
在平常开发中，我们会有一些经常使用的代码片段，或者跑一些自动化脚本，这时候我们就可以把这些代码存放在 Snippets 中，方便使用。
这里我放一段引入 lodash 的代码，大家有兴趣可以自己试一下。这里还有更多有趣的代码片段供大家选择。
(function () {
'use strict';
var element = document.createElement('script');
element.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js";
element.type = "text/javascript";
document.head.appendChild(element);
})();
16. 忽略 Chrome 拓展脚本
当使用 Chrome DevTools 的 Sources 面板单步调试代码时，有时您会在不认识的代码上暂停。你可能调试到了一个你安装的 Chrome 扩展程序的代码，重新开个无痕窗口？不需要，可以直接忽略 Chrome 拓展脚本。
17. 禁用 JavaScript
想看看页面被禁用了 JavaScript 之后还具有怎样的外观和行为怎么办，可以试试这个。
18. 打断点的六种方式
在我们平时开发的时候，经常会打断点进行调试，只会那么一种打断点方式可不行，给大家介绍下其他的打断点方式。大家可以用这个 Demo 进行尝试。
在某一行上打断点
这是最常用的打断点的方式了，就不多作介绍了。在代码的特定的某一行上打上断点，执行到这一行就会暂停执行。
条件断点
顾名思义，就是只有当你设置的条件为真的时候，才会触发这个断点。
DOM 断点
如果你想要暂停更改 DOM 节点或者其子节点的代码时，你就可以使用该断点方式。
XHR 断点
当你看到请求的 URL 不正确怎么办？你可以通过在 XHR 断点中输入想匹配的字符串，当请求的 URL 包含该字符串的时候，代码就会暂停啦！
事件监听断点
想事件触发的时候暂停却不知道断点应该打在哪里？这里有这么多事件监听断点供你选择！
异常断点
开发时代码抛出了异常缺没注意到？这个断点可以帮助你快速找到哪里抛出了异常。
函数断点
这种断点需要以 debug(functionName) 的方式写在代码中就可以了。
function sum(a, b) {
let result = a + b; // 会在这行暂停
return result;
}
debug(sum); // Pass the function object, not a string.
sum();
