Chrome的调试技巧系列三

Network面板篇

Request initiator

initiator的这个单词翻译过来是“发起者”，所以在Network 的initiator这列可以看到是哪一行代码是发起请求的发起者

鼠标悬停在这个initiator上，你可以看到完整的调用信息，不论是自己的文件还是外部引用的文件，下图好像把initiator那列遮掉了，大家可以自己试试。

请求过滤

在Network面板可以找到一个Filter框，这个是个过滤器，可以输入一些条件过滤一些你想找的请求，可以输入字符串和正则表达式。

比如我们想过滤出是post的请求，可以输入method，会有提示

再比如过滤一下想要的域名，输入domain:xxx,一样会有提示的哦~

其他的过滤条件大家可以自己试试

自定义请求表

这里的自定义就是Network下面的这几列

这几列是可以展示可以隐藏的，在任意表头右键就可以看到了，可以自由定义你想看到的列表。

Replay XHR

Replay XHR就是重新发送请求，经常我们和后端联调的时候，后端让你再发一次请求，你总是刷新页面呢，现在可以直接重新请求接口，不需要刷新页面，参数也是一致的哟~
只要任意一行的请求右键，然后选择Replay XHR，就可以不刷新页面用相同的参数再请求一次接口，完美！

Sources面板篇

XHR/fetch断点

给请求加断点，先找到Sources面板的XHR/fetch Breakpoints

然后添加一个要打断点的域名，那么就会暂停你填的域名的请求

也可以不填，那么所有请求都会被暂停

右键可以移除断点

Element面板篇

h

通过 ‘h’ 来隐藏元素，比如你遇到什么问题想要带着截图去问，但是你的页面有敏感信息，你就可以用这招哦，复原的话还是按h就可以了，原理其实就是给这个元素加了 visibility: hidden

插入样式规则的按钮

在任意的样式选择器的后面区域，你可以看到三个小圆点，鼠标移上去就可以看到四个编辑器，分别是text-shadow、box-shadow、color、background-color

点击第一个text-shadow ,文字阴影可以自由调试

点击第二个box-shadow,一样的自由调试

后面两个大家可以自己试试

Drawer面板篇

Drawer 是个啥？

Chrome DevTools 有很多部分，被分为9个 tab (俗称选项卡) ( Elements ， Console ， Sources ， Network ， 等等…)。但是，那仅仅是它的一部分而已！有一组平行的选项卡，被隐藏在主窗口之下。这个组合被称为 Drawer。按 [esc] 来显示它，再次按 [esc] 隐藏它。

Sensors

Sensors(控制传感器),可以模拟定位，手动输入自己的经纬度
这个值可以被navigator.geolocation.watchPosition（或 .getCurrentPosition ）捕捉到哟，还可以模拟设备在3D空间的位置

navigator.geolocation.watchPosition(data => console.log(data))

Coverage

coverage(检查代码覆盖范围)，可以跟踪看到当前加载执行的js和css文件，可以看到未使用的百分比，蓝色的是运行的，红色的是未运行的，可以看到自己写了哪些用不着的代码哦~

Changes

Changes(检查修改内容)，在浏览器上修改样式的时候，可以通过这个面板来查看哪里修改了，绿色是新增的，红色是未修改的。

还有其他的面板可以自己探索探索哟~

参考：https://juejin.im/book/5c526902e51d4543805ef35e

公众号

欢迎大家关注我的公众号： 石马上coding，一起成长