前言

上一篇简介了调试工具里的 sources，这次讲解调试工具里的另一个选项卡 network，以查看调取接口是否正确，后台返回的数据，查看请求状态、请求类型、请求地址等等，熟练掌握了 network 可以解决大部分网络问题

network 功能

network 面板里提供了非常多的功能，我们来看看我们最常用到的有哪些功能

1.这个小红点表示录制，这个录制是默认开启的，表示监听整个页面运行过程中所产生的所有网络请求

2.表示清空目前监控到的所有网络请求

3.表示筛选，默认情况下是开启的，打开之后下面会出现很多选项，因为页面上有时候网络请求类型特别多，所有的网络请求，ajax 网络请求，js，css 网络请求，img 网络请求等等，想具体监控什么类型的网络请求可以点击不同的选项来监听

4.表示持久日志,不勾选的话刷新页面。之前的网络请求就会消失，勾选了就不会消失

5.表示禁用缓存，有时候有些网络请求会使用缓存，我们不希望监控网络缓存，将这个选项勾上之后刷新页面就不会再使用缓存了

6.表示限流器，用来模拟网速变慢，我们在开发的过程中项目都运行在本地，所以网络速度基本上是最快的，有时候我们要监控一下网络慢的时候页面，组件有没有正常展示出来，我们就可以把网速模拟变慢

network 表格面板

这个表格面板里的每一行都是一个网络请求

点击某一行就会显示出来详情

在 headers 里可以看到请求头和响应头，响应码，请求方法，请求的路径

在 preview 里会把响应的结果进行预览，我查看的是张图片所以预览出来的就是张图片，但是响应的并不是原始的格式，是预览出来的格式

如果想看完整的格式可以点击 response，在 response 有服务器响应的原始格式，谷歌浏览器对服务器的原始格式只支持纯文本，不支持二进制

在表格里这一列表示响应码

在表格里这一列表示资源的尺寸

这个表示请求的耗时

这个表示请求的类型

这个表示请求的瀑布图，这里面的请求有先后顺序，先请求这个再请求那个，也有同时进行的