Chrome开发者工具详解-Network面板

面板组成

包括控制器、过滤器、概览、请求列表、概要。

 

• 控制器——控制面板的外观与功能。
• 过滤器——过滤请求列表中显示的资源,按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。
• 概览——显示HTTP请求、响应的时间轴。
• 请求列表
  • 默认时间排序，可选择显示列。
  • 查看所有的资源请求，包括网络请求，图片资源，html、css、js文件等请求。
  • 可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。
• 概要——请求总数、总数据量、总花费时间等。

请求列表

如果选择All，会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息。

请求的相关信息

打开一个Ajax异步请求，可以看到它的请求头信息，是POST请求还是GET请求、参数有哪些、还可以预