Chrome 开发者工具 network详解

chrome 控制面板network属性（补充）

默认情况下，请求表列显示以下列。您可以添加和删除列（愚人码头注：右键单击列表的任何标题栏可以以添加或删除信息列）。

• Name(名称) : 资源的名称。 Status(状态) : HTTP状态代码。 Type(类型) : 请求的资源的MIME类型。

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

  • Parser(解析器) : Chrome的HTML解析器发起了请求。
  • Redirect(重定向) : HTTP重定向启动了请求。
  • Script(脚本) : 脚本启动了请求。
  • Other(其他) : 一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址。

• Size(尺寸) : 响应头的大小（通常是几百字节）加上响应数据，由服务器提供。

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

• Timeline(时间轴) : Timeline 列显示所有网络请求的视觉瀑布。点击此列的标题栏会显示其他排序字段的菜单。

查看DOMContentLoaded和load事件信息

Network(网络)面板会高亮显示两个事件：DOMContentLoaded和load。

当页面的初始的标记被解析完时，会触发DOMContentLoaded。 它在Network(网络)面板上的两个位置显示：

• 在 Overview (概览)窗格中的蓝色垂直线表示这个事件。
• 在 Summary (概要)窗格中，您可以查看事件的确切时间。
  

当页面完全加载时触发load事件。 它显示在三个地方：

• 在 Overview (概览)窗格的红色垂直线表示这个事件。
• 在 Requests Table (请求列表)中的红色垂直线也表示这个事件。
• 在 Summary (概要)中，您可以查看改事件的确切时间。

查看单个资源的详细信息

点击资源名称（在Requests Table(请求列表)的Name(名称)列中）可以查看该资源的更多信息。

可用的标签页取决于您选择的资源类型，但以下四个标签页是最常见的：

• Headers (标头) : 与资源相关的HTTP头。
• Preview (预览) : 预览JSON，图片和文字资源。
• Response (响应) : HTTP响应数据（如果有）。
• Initiator(发起人) : 发起请求的对象或进程。
• Timing (时序) : 资源的请求生命周期的明细分类。
  

查看网络时序

点击Timing(时序)选项卡可查看单个资源的请求生命周期的明细分类。

生命周期显示在以下类别中花费的时间：

• Queuing (排队)
• Stalled (停滞) 如果适用： DNS lookup (DNS查找)， initialconnection (初始连接)， SSL handshake (SSL握手) Request sent (请求发送)
• Waiting(等待)（到开始下载第一个字节的时间（TTFB））
• Content Download (内容下载)

查看HTTP头信息

点击Headers显示该资源详细的头信息。

Headers(头信息)标签页显示资源的请求URL，HTTP方法，和响应状态代码。 另外， 它列出HTTP响应和请求头信息及他们对应的值，和任何查询字符串参数。

• Request URL：请求地址
• Request Method：请求方法
• Status Code：状态码 Remote
  Address：远程地址
  Referrer Policy：控制请求头中referrer的内容，包含一下几种值

1. “”, // 按照浏览器机制设置referrer 等同于"no-referrer-when-downgrade"

2. “no-referrer”, // 不显示referrer的任何信息在请求头中

3. “no-referrer-when-downgrade”, // 默认值，当从https网站跳转到http网站或者请求其资源时（安全降级HTTPS→HTTP），不显示referrer的信息，其他情况（安全同级HTTPS→HTTPS，或者HTTP→HTTP）则在referrer中显示完整的源网站的URL信息。

4. “same-origin”, // 只会显示referrer信息给同源网站，并且是完整的URL信息。

5. “origin”, // 表示浏览器在referrer字段中只显示源网站的源地址（即协议、域名、端口），而不包括完整的路径。

6. “strict-origin”, // 该策略更为安全些，和origin策略相似，只是不允许referrer信息显示在从https网站到http网站的请求中（安全降级）。

7. “origin-when-cross-origin”, // 当发请求给同源网站时，浏览器会在referrer中显示完整的URL信息，发个非同源网站时，则只显示源地址

8. “strict-origin-when-cross-origin”, // 和origin-when-cross-origin相似，只是不允许referrer信息显示在从https网站到http网站的请求中（安全降级）。

9. “unsaft-url”, // 浏览器总是会将完整的URL信息显示在referrer字段中，无论请求发给任何网站。
   Referrer-Policy更改方法
   可以有以下5种方法：

             1. 通过Referrer-Policy HTTP header设置：
   
             Referrer-Policy: origin
             2. 通过<meta>元素改变Referrer Policy，直接修改名为referrer的内容
   
             <meta name="referrer" content="origin">
             3. 给 <a>, <area>, <img>, <iframe>, 或者<link>元素设置referrerpolicy属性
   
             <a href="http://example.com" referrerpolicy="origin">
             4. 如需设置不显示referrer信息时，也可以给 <a>, <area>, <link>元素设置rel的链接关系。
   
             <a href="http://example.com" rel="noreferrer">
   

• Connection：是否建立长链接。1、keep-alive：建立长链接。2、close。关闭

http1.0 默认是关闭的，需要在 http 头加入”Connection: keep-alive”，才能启用Keep-Alive

http 1.1 默认启用 keep-alive，加入”Connection: close “才关闭

keep-alive 的优缺点
优点：keep-alive 模式更加高效，因为避免了连接建立和释放的开销
缺点：长时间的 tcp 连接容易导致系统资源无效占用，浪费系统资源

• Content-Length: 请求体长度
• Content-Type: 请求体类型
• Server: 服务器名

复制，保存和清除网络信息

右键单击Requests Table(请求列表)以复制，保存或删除网络信息。一些选项是上下文相关的，所以如果你想在单个资源上操作，您需要右键单击该资源行。下面的列表描述了每个选项。

• Copy Response (复制响应) : 将所选资源的HTTP响应复制到系统剪贴板。
• Copy as cURL (复制为cURL) : 将所选资源的网络请求作为 cURL 命令字符串复制到系统剪贴板。 请参阅将 复制请求为cURL命令 。
• Copy All as HAR(全部复制为HAR) : 将所有资源复制到系统剪贴板作为 HAR 数据。 HAR文件包含描述网络“瀑布”的JSON数据结构。一些 第三方工具 可以使用HAR文件中的数据重建网络瀑布。有关详细信息，请参阅 Web性能强大工具：HTTP归档（HAR）
• Save as HARwith Content (另存为带内容的HAR) : 将所有网络数据与每个页面资源一起保存到HAR文件中。二进制资源（包括图像）被编码为Base64编码文本。 Clear Browser Cache (清除浏览器缓存) : 清除浏览器高速缓存。 提示 ：您也可以从 Network Conditions(网络条件) 抽屉式窗格中启用或禁用浏览器缓存。
• Clear Browser Cookies (清除浏览器Cookie) : 清除浏览器的Cookie。
• Open in Sources Panel(在源文件面板中打开) : 在 Sources (源文件)面板中打开选定的资源。
• Open Link in New Tab (在新标签页中打开链接) : 在新标签页中打开所选资源。您还可以在 Requests Table (请求列表)中双击资源名称。
• Copy Link Address (复制链接地址) : 将资源URL复制到系统剪贴板。
• Save (保存) : 保存所选的文本资源。仅显示在文本资源上。
• Replay XHR (重新发送XHR) : 重新发送所选的 XMLHTTPRequest。仅显示在XHR资源上。