chrome调试工具之network

格斗家不爱在外太空沉思
680 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

前言

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

network功能

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

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

image.png

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

image.png

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

image.png

image.png

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

image.png

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

image.png

image.png

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

image.png

network表格面板

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

这个表示请求的耗时

image.png

这个表示请求的类型

image.png

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

image.png

avatar
文章
阅读
粉丝