Devtools—Network

在上文中，我们初步领略了 Devtools 基本功能，本章节，较为详细介绍下常用的Network 网络面板。

持续更新

---

Network（网络面板）：

所谓Network面板（下图），其实就是检查页面的网络活动工具。啥是网络活动，即通过网络下载或上传的资源。

                           基于上文，我们选择F12建进入DevTools，点击network即可进入对应面板

 

1. 网络日志（下图）

每一行代表一个资源。默认情况下，资源按时间顺序列出。最重要的资源通常是主要的HTML文档。最底层的资源是最后请求的内容。

列名：名称(Name)—状态(Status)—资源类型(Type)—启动器(Initiator)—Size—Time—瀑布

• Status：HTTP响应代码
• Initiator：是什么导致了资源的请求。单击“发起者”列中的链接，将您带到引起请求的源代码。
• Time：请求花了多长时间。
• Waterfall：请求不同阶段的图形表示。将鼠标悬停在瀑布上可以查看细目。

当然了，右键表头，还有其他资源，不过一般情况下还用不到。

 2. 资源详情

一般比较常用的功能，就是检查资源详情，以此来排查错误（常用3个）。我们点击任意一个资源，进入详情页。

2.1 Headers选项卡

可以检查HTTP标头

其中请求头/响应头参数，下链接有详细说明。

https://blog.csdn.net/qq_35781732/article/details/80183790

https://blog.csdn.net/android_bar/article/details/55505448

https://blog.csdn.net/android_bar/article/details/55505514

2.2 Perview选项卡

可以预览这个资源，是的这个资源就是一张.jpg照片

2.3 Response选项卡

也是就是基于本资源请求后，服务器的响应。由于这个资源仅仅是下载的图片，不存在请求，因此无。

3. 工具栏

可以自己简单试试，很好理解（一些检索、筛选等）。未来根据需求使用即可。

参考：

https://developers.google.com/web/tools/chrome-devtools/network/reference

https://github.com/CompileYouth/front-end-study/blob/master/tool/devtools/Network.md

https://blog.csdn.net/ITdevil/article/details/83999256