前言

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

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

第二个Clear按钮,可以清除记录下来的Network内容。

第三个是捕获网页加载截图(Capture Screenshots)。可以记录每次的页面有新加载的时候的截图。可以通过这个截图了解页面的具体显示过程。

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

第五个是显示request(请求)列表的样式的按钮,提供大和小(large|small)两种。
下图的选择大的样式

下图是显示小的样式

第六个是总的概览图(咳咳,作用未知。知道的小伙伴欢迎留言)

第七个是Group by frame(咳咳,作用未知。知道的小伙伴欢迎留言)

第八个是Preserve log。勾选这个按钮可以保存network不被页面刷新清除。下图是我们勾选Preserve log刷新四次的效果,可以看到四次network的记录

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


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

Filder

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

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

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

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

接下来我们打开一个请求,第一栏是header,这里有请求头和响应头数据。(写爬虫的时候经常用到)

Preview,表示响应预览。doc的就是显示的代码,若是图片,就可以看到预览图。


Response表示返回值,doc的还是显示的代码,有一些会返回的json格式。比如一言接口的返回值。


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

还有一个是Cookie,记录这request请求发送和接收到的cookie


未完待续……Continued……

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦