chrome devtools的使用—— Network面板

咖妃

2022年06月14日 23:40 · 阅读 81

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

前言

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

Network

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

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

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

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打开查看）：

截屏

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

条件过滤

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

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

指定条件有哪些？

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 的请求。

具体类型筛选，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。