前端需要了解的调试技巧

众所周知，对于前端来讲，接触最多的应该就是Chrome浏览器了，其自带的调试工具无疑让前端们在修改BUG时更加得心应手。

尽管很多人都用过Chrome的调试工具，但是Chrome的调试工具还有很多可挖掘的地方，如果把这些小技巧都掌握了，也能提高自己的开发效率。

下面就来讲下我平常使用较多的调试技巧。

 

1. 重复发送请求

一般来讲，在开发一个新功能模块需要与后端联调或者说项目上线需要解决线上BUG时，我们需要反复去给后端调用同一个接口方便他们调试。

如果是单纯的点击按钮发送请求的接口还好，但是如果是需要前面填写一大堆信息才能发送请求的接口，那重复发送请求未免太繁琐了。

不过Chrome早就为我们想到了这一点。

 

如图所示，我们只需要在你想再次发送的网络请求上右键，然后选择“Replay XHR”即可，Chrome就会自动为我们再次发送该请求，无需做其他的任务操作。

选中该请求然后按下R键也能达到同样的效果.

 

2. 控制台发送请求

这一点是基于上一点的补充，有时候后端不仅会让我们重复发送请求，还会要求我们修改请求的参数，这可怎么办？

不要着急。Chrome同样也想到了这一点，并且还可以让我们自由的去设计请求参数。

 

首先同样的在你需要重复发送的请求上右键，然后选择Copy---Copy as fetch，接下来我们只需要打开控制台，然后使用我们最熟悉的Ctrl + V

这里不管是body参数还是query参数都可以随我们自己的要求去随意更改，更改完成按下回车即可.

 

但是一般因为项目的封装处理，我们得到的会是一个Promise对象，所以还需要做下处理才能得到我们想要的结果。

 

3. $_

同样的对上一点的补充，我们可以看到，在需要对Promise进行处理时，后续加的链式调用未免有点臃肿了，尤其如果是我们想看每一步的具体数据时，会显得更加的麻烦。

举个例子，需求需要你对字符串转化成数组，然后再对这个数组进行处理，然后再转化回字符串，中间你想看下每一步的处理结果，那么$_可以帮助我们达到这个效果。

而$_的作用就是引用上一步的操作结果，而不需要从头开始调用。

 

如图所示，使用$_就可以获得上一步的操作结果，并且可以随意的获得每一步的数据，尤其是在多链式调用时，更是能够准确获得每个步骤的结果。

4. $0

我们前端经常会在调试中去选取页面上的某一个元素来查看它的样式、属性什么的，看样式还是比较方便的，但是查看其的属性时还是没有那么快捷，需要获取到dom对象再去打印其的属性。

不过我们可以通过$0来快速打印。

 

如图所示，当我们选取了页面上的某一个元素之后，通过$0就可以拿到这个元素。并且可以直接在控制台上打印其的各种属性，比在代码内打印查看要方便很多。

 

5. 截取网页图片

以上几个都是个人平常开发中常用的调试技巧。还有一些开发中不是那么常用，但是部分情况下还是会用到的，比如截取网页图片。

可能有人会问，截图工具不是一大把吗？为什么还要用到调试工具？

那是因为，通过这种方式截图，你可以截取超过一屏的内容，网页有多长，你就能截取多长，而且还可以选中页面元素来部分截屏。

 

 

打开控制台后，我们使用Ctrl + Shift + P快捷键打开Command指令，然后选择Capture full size screenshot 即可截取全部网页，而Capture node screenshot则是截取选中区域图片。

但是要注意，如果给body设置了height:100%的话，Capture full size screenshot是无法截取网页全图的，所以截取的话需要先取消一下height:100%的样式再截取.

 

 

当然其他的调试技巧还有很多，这里就不一一细讲了，只讲我个人经常使用并且觉得确实有用的分享给大家，如果对这方面有兴趣的话可以自行查找文档查看。