通用篇
copy
可以通过全局方法copy()在console里面copy任何你能拿到的资源，相当于执行了常规的复制操作。$_是对上次执行的结果的引用。
快捷键和通用技巧
切换DevTools窗口的布局展示
通常我们使用DevTools时，一般展示在页面底部，我们如果想把它切换到右边，可以使用快捷键ctrl + shift + D来实现。
递增/递减
调整样式的时候，我们会使用上/下箭头来实现某个样式数值的递增或递减。上/下箭头能实现递增/递减1，通过上下箭头结合Shift可以实现10的跨度，结合ctrl可以实现100的跨度，结合alt可以实现0.1的跨度。
elements， logs， sources & network 中的查找
DevTools 中的前4个主要的面板，每一个都支持 [ctrl] + [f] 快捷方式，你可以使用对应的查询方式来查找信息。
Console，Network，Source还可以通过大小写来区分。
截图
在不借助其它工具的情况下，可以通过Command菜单来实现Dom节点的截图。
首先选中你要截取图片的dom，再Ctrl+Shift+p，输入screen，选择Capture node screenshot即可截取我们选中的dom的页面，Capture full size screenshot可以截取完整的当前页面。
快速切换面板
devTool中使用双面板布局，形式是：
元素面板+ 资源面板 ，它根据屏幕可用的部分，经常将不同面板横向或者纵向的排列。打开 Ctrl+Shift+p打开command，在 菜单并且输入 layout，即可选择
资源面板的布局。
快速切换主题
同上，输入值由ctrl+shift+p 输入theme即可切换明亮主体与暗黑主题。
console篇
console中的$
在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。$1 是对上一次我们选择的节点的引用，以此类推$2 是对在那之前选择的节点的引用，等等，一直到 $4。可以在元素面板选中某个dom，在console中输入$0验证下。
console中的“debugger”
console.log()是我们调试过程中最常用的方法之一，有时候，我们先cosole.log()了一个对象，又修改了这个对象中的某个属性，再次console.log()，这时我们发现两次打印出来的该对象值是一样的，都是修改后的值。为什么会出现这种情况呢？console 中打印对象的内容之前，是以引用的方式保存的。（WebKit的console.log并没有立即拍摄对象快照，相反，它只存储了一个指向对象的引用，然后在代码返回事件队列时才去拍摄快照。也就是说，WebKit内核的Chrome浏览器 的控制台对应引用类型的数据读取是默认值读取一层数据，当你点击展开时，会再去堆内存中读取属性值和下一层的数据。）
那我们应该怎么来调试呢？
1、使用debugger断点来看
2、使用JSON.stringify()来处理打印结果
console中的条件断点
可以编辑一个条件断点。右击行号，选择 Add conditional breakpoint...(添加条件断点)
示例如下：
console中的几个方法介绍
console.arrest()
当我们传入的第一个参数为 “假”时，console.assert 打印跟在这个参数后面的值。
let a = null;
console.arrest(a, 'a is empty')
就不用再写这种let a = null; if(!a) {console.log('a is empty')}
console.log的{}
例如 const name=‘张三’;
const age = 10;
const id = 1;
console.log({name,age,id});
console.table
如果是一个数组或者一个对象，可以通过console.table以列表的形式展示。
还可以通过console.table() 的第二个参数来选择打印出数组的特定属性。
console.dir
有时候，我们需要查看某个dom的详细信息，但是通过console.log()只能获取dom的基本结构，这时我们可以通过console.dir()打印出当前选择的dom的全部信息。
给log加上时间戳
ctrl+shift+p打开command，输入time，选择 show timestamp，即可给打印信息带上时间信息。
监测执行时间
-
console.time()— 开启一个计时器 -
console.timeEnd()— 结束计时并且将结果在console中打印出来console.time()
setTimeout(()=> {
console.timeEnd()
},1000)
可以在控制态看到结果如下：
network篇
我们看network面板大多数情况下是为了看各个接口的请求情况，即主要像看1区域，我们可以通过点击3区域隐藏2处资源请求世间面板，多看几条1处的请求。
请求过滤
可以字符串、正则匹配请求，还可以匹配请求方法，请求状态等。
重新发送xhr请求
实际工作中，我们会遇到请求接口成功了，但是看不到响应数据的情况，这时我们就可以通过重新发送请求的方式来获取响应数据。
XHR/fetch断点
有些场景下，我们需要对已经发送的请求进行补货，这时我们可以使用XHR/fetch断点。
点击+，在输入框中填入想要拦截的url所包含的字段，我们也可以选择所有请求都拦截的选项Any XHR or fetch。
面板元素技巧
通过‘h’来隐藏元素
选中你想要隐藏的元素，点击h即可隐藏该dom元素。
dom拖放
有时候，我们想看某个dom在页面中某处的显示效果，只要在Elements选中该dom，可以随意拖放到任何dom元素下。结合control+上箭头/下箭头可以实现dom上移下移。
dom编辑
选中dom，右键，选择Edit as HTML可以对当前的dom进行编辑，可以通过ctrl+z进行撤销。
dom断点
有时候，我们会在js中修改dom，我们想捕捉什么地方修改了当前的dom，可以通过dom断点来捕获。
- 选择 subtree modifications：监听任何它内部的节点被 移除或者添加的事件
- 选择 attribute modifications：监听任何当前选中的节点被添加，移除或者被修改值的事件
- 选择 node removal：监听被选中的元素被移除的事件
