细说网页开发者工具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......

作者：hojun
链接：https://www.jianshu.com/p/b399a071b86a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。