chrome devtools的使用—— Network面板

·  阅读 81
chrome devtools的使用—— Network面板

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第17天,点击查看活动详情

前言

hi,all~,今儿个,我们来介绍chrome 开发者工具的第四个板块——Network面板。作为使用最多的面板之一,你对它又有多少了解呢?

Network

Netwrok面板中会记录应用程序的每一次网络交互信息,每次交互的详细时间、HTTP请求头和响应头、cookies、WebSocket的数据等等...

面板的资源数据依赖的是 javascript 的资源计时 api : performance,对于每一个资源的加载都提供详细的同步数据。比如,明确列出当一个http开始请求的时间及最后字节接收完的时间以及详细过程。我们也可以通过 window.performance.getEntries() 方法获取资源加载列表,下面给出列表中第一个对象的属性截图。

image.png

简单过一遍这些属性的含义(这些属性都是只读的)

  • connectEnd:浏览器与服务器完成建立用以检索资源的网络连接的时间戳
  • connectStart:浏览器与服务器开始建立用以检索资源的网络连接的时间戳
  • damainLookupEnd:浏览器完成资源的域名解析的时间戳
  • damainLookupStart:浏览器开始进行资源的域名解析的时间戳
  • duration:资源请求从开始到结束的时间差
  • entryType:PerformanceEntry对象的类型,该对象封装一个单一的性能指标作为性能表的一部分,此类型值
  • 是"frame","mark","measure","navigation","resource","server"的其中一个。
  • fetchStart:浏览器开始获取资源的时间戳
  • initiatorType:资源文件的类型
  • name:资源的url
  • redirectEnd:接收到重定向资源的最后一个响应字节的时间戳
  • redirectStart:启动重定向以获取资源的开始时间戳
  • requestStart:浏览器从服务器请求资源的开始时间戳
  • responseEnd:浏览器接收到资源最后一个字节的时间戳,或者关闭传输连接的时间戳
  • responseStart:浏览器接收到服务器的响应的第一个字节的时间戳
  • secureConnectionStart:浏览器开始握手协议,以保护当前连接的安全性,握手开始的时间
  • startTime:浏览器开始获取资源前的时间戳(整个过程的开始时间)
  • workerStart:如果当前上下文是"worker",返回开始获取资源的时间戳,否则返回0(应该是应用于双工通信的)

整个network面板如下图所示(注: 导入/导出 HAR 文件, 可在Charles打开查看):

image.png

截屏

截屏可以记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取,如下图所示(图中还包括请求概览)。

image.png

条件过滤

选择框内可输入过滤关键字进行资源列表的过滤,如下图所示(可支持正则匹配)。

image.png

也可进行指定条件的搜索,如下图。

image.png

指定条件有哪些 ?

  • domain:资源所在的域,即url中的域名部分。
  • has-response-header:资源是否存在响应头,无论其值是什么。如 has-response-header:Access-Control-Allow-Origin
  • is:当前时间点在执行的请求。当前可用值:running
  • larger-than:显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K
  • method:使用何种HTTP请求方式。如 GET
  • mime-type:也写作content-type,是资源类型的标识符。如 text/html
  • scheme:协议规定。如 HTTPS
  • set-cookie-name:服务器设置的cookies名称
  • set-cookie-value:服务器设置的cookies的值
  • set-cookie-domain:服务器设置的cookies的域
  • status-code:HTTP响应头的状态码

按钮组

根据按钮规定的条件进行筛选, 按钮组有: All, XHR, JS, CSS, Img, Media, Font, Doc(Document), WS(WebSocket), Manifest, Other

Invert 反选,下图中原本筛是状态码为 200 的请求,选中 Invert 后,就变成了筛选不是 200 的请求。

image.png

具体类型筛选,All (全部)、XHR (XMLHttpRequest 和 fetch)、JS(JavaScript)、CSS (样式表)、Img (图片资源)、Media (媒体资源)、Font (字体资源)、Doc(Documents)、WS (WebSocket)、Wasm(WebAssembly)、MainFest、Other。

Hide data URLS:隐藏前缀为 data: 协议的 URL

has Blocked cookies:是否展示被阻止的 cookies;

blocked requests: 是否展示被阻止的 request。

保存日志

在页面重新加载或者url改变时保留日志(包括资源列表和时间轴上的数据)。

是否缓存

当打开开发者工具时生效,打开这个开关,则页面资源不会存入缓存,可以从Status栏的状态码看文件请求状态。

限流控制(网速模拟)

模拟不同网速下的环境加载当前页面,直接看图就能知道怎么用了。

image.png

时间轴

image.png

图中有两条线,一条蓝色的,一条红色的。

蓝色线代表DOM已加载完成(DOMContentLoaded事件),红色线表示页面加载完(包括资源引用)(load事件)

资源列表

在 Name 处右键可以选择/取消展示的字段。

image.png

  • Name:资源名称。

  • URL:请求的 URL。

  • Method:请求方式,GET、POST等。

  • Status:HTTP状态代码。

  • Protocol:请求协议。

  • Domain:域名。

  • Type:请求的资源的MIME类型。

  • Initiator:发起请求的对象或进程。它可能有以下几种值:

  • Parser(解析器):Chrome的 HTML 解析器发起了请求(鼠标悬停显示JS脚本)。

  • Redirect(重定向):HTTP重定向启动了请求。

  • Script(脚本):脚本启动了请求。

  • Cookies:该请求包含的 cookies 个数。

  • Size:服务器返回的响应大小(包括头部和包体),可显示解压后大小。

  • Time:总持续时间,从请求的开始到接受响应中的最后一个字节。

  • ConnectionId:链接ID。

  • Waterfall:各请求相关活动的直观分析图。

image.png

  • Queuedat:执行到 Initator 的时间
  • Startedat:开始请求流程的时间
  • Queueing:排队:已有高优先级的请求、已经达到了 TCP 链接数量、浏览器正在磁盘缓存中短暂分配空间
  • Stalled:由于排队而停下来等待的时间
  • DNSLookup:DNS 查找 IP
  • Initialconnection:初始化链接
  • Proxynegotiation:代理协商
  • Requestsent:请求发送
  • ServiceWorkerPreparation:浏览器准备启动 ServiceWorker
  • RequesttoServiceWorker:向 ServiceWorker 发送请求
  • Waiting(TTFB):第一个字节返回的时间。TTFB 代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。
  • ContentDownload:浏览器正在接收响应

信息归总

image.png

  • requests:若勾选Hide data URLs,会屏蔽掉 data: 开头的资源。
  • transferred:所有资源的压缩大小即网络传输的资源大小。
  • resources:所有资源未压缩的大小。
  • Finish:页面上所有 http 请求发送到响应完成的时间总和。
  • DOMContentLoaded:DOM 树构建完成的时间。
  • Load:页面加载完毕的时间。

最后

Network 面板大致介绍完毕,那这篇文章就到这结束了,bye~

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改