细说网页开发者工具F12-前端开发利器三

image

前言

写这篇文章是细说网页开发者工具F12 - 前端开发利器三，Network篇，若觉得不错请关注作者。
哎，是时候让人类感受黑暗的恐惧了！......居然停电了。
这次我们来细说F12工具的Network面板。

image

功能有些多，我们从上往下来介绍，首先是记录network的开关，默认为打开状态。

image
第二个Clear按钮，可以清除记录下来的Network内容。
image
第三个是捕获网页加载截图(Capture Screenshots)。可以记录每次的页面有新加载的时候的截图。可以通过这个截图了解页面的具体显示过程。
image

第四个是Filter滤镜功能，就是提供下面红框框起来的功能的。下文在详细介绍

image
第五个是显示request(请求)列表的样式的按钮，提供大和小(large|small)两种。
下图的选择大的样式
image
下图是显示小的样式
image
第六个是总的概览图(咳咳，作用未知。知道的小伙伴欢迎留言)
image
第七个是Group by frame(咳咳，作用未知。知道的小伙伴欢迎留言)
image
第八个是Preserve log。勾选这个按钮可以保存network不被页面刷新清除。下图是我们勾选Preserve log刷新四次的效果，可以看到四次network的记录
image

第九个是Disable cache(禁用缓存)。功能就是禁用本地缓存，强制刷新

image
image
第十个是离线，效果如下，就是断网状态。
image

Filder

接下来细说Filder，第一个作用未知，咳咳

image

第二个All表示显示所有类型的request

image
XHR表示显示xhr请求，就是常说的ajax。
image

js,css,img,media,font略过，doc表示document

image
接下来我们打开一个请求，第一栏是header,这里有请求头和响应头数据。(写爬虫的时候经常用到)
image
Preview，表示响应预览。doc的就是显示的代码，若是图片，就可以看到预览图。
image
image
Response表示返回值，doc的还是显示的代码，有一些会返回的json格式。比如一言接口的返回值。
image
image

Timing,记录着整个请求的时间段

image
还有一个是Cookie,记录这request请求发送和接收到的cookie
image
image
未完待续......Continued......