Network request details

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

如果你点击网络请求列表的某项,这个请求的详细信息面板就会出现。这个面板提供了关于这个请求的详细信息。

Network request details

点击某个请求之后,在右侧显示了一个新的如下的面板,展现了这个请求的详细信息。

面板上部有一些选项卡,可以让你在不同的页面切换。选项如下:

  • Headers
  • Cookies
  • Params
  • Response
  • Cache
  • Timings
  • Security (仅在安全请求下出现)
  • Stack trace (仅在请求有堆栈的情况下出现,也就是说请求是脚本调用其他脚本的时候)。Firefox 55 添加。

点击面板上工具栏最左侧的图标可以关闭本面板,返回请求列表。

Headers

你可以在请求头上右键菜单里以 json 格式复制一些或者全部的信息:

复制选项只复制你选中的键值对,复制全部选项会以一个标准的 json 格式复制 headers 的全部值:

{
  "Response headers (1.113 KB)": {
    "headers": [
      {
        "name": "accept-ranges",
        "value": "bytes"
      },
      {
        "name": "age",
        "value": "0"
      },
      {
        "name": "backend-timing",
        "value": "D=74716 t=1560258099074460"
      },
      {
        "name": "cache-control",
        "value": "private, must-revalidate, max-age=0"
      },
      {
        "name": "content-disposition",
        "value": "inline; filename=api-result.js"
      },
      {
        "name": "content-encoding",
        "value": "gzip"
      },
      {
        "name": "content-length",
        "value": "673"
      },
      {
        "name": "content-type",
        "value": "text/javascript; charset=utf-8"
      },
      {
        "name": "date",
        "value": "Tue, 11 Jun 2019 13:01:39 GMT"
      },
      {
        "name": "mediawiki-login-suppressed",
        "value": "true"
      },
      {
        "name": "p3p",
        "value": "CP=\"This is not a P3P policy! See https://en.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info.\""
      },
      {
        "name": "server",
        "value": "mw1316.eqiad.wmnet"
      },
      {
        "name": "server-timing",
        "value": "cache;desc=\"pass\""
      },
      {
        "name": "strict-transport-security",
        "value": "max-age=106384710; includeSubDomains; preload"
      },
      {
        "name": "vary",
        "value": "Accept-Encoding,Treat-as-Untrusted,X-Forwarded-Proto,Cookie,Authorization,X-Seven"
      },
      {
        "name": "via",
        "value": "1.1 varnish (Varnish/5.1), 1.1 varnish (Varnish/5.1)"
      },
      {
        "name": "x-analytics",
        "value": "ns=-1;special=Badtitle;WMF-Last-Access=11-Jun-2019;WMF-Last-Access-Global=11-Jun-2019;https=1"
      },
      {
        "name": "x-cache",
        "value": "cp1075 pass, cp1075 pass"
      },
      {
        "name": "x-cache-status",
        "value": "pass"
      },
      {
        "name": "x-client-ip",
        "value": "204.210.158.136"
      },
      {
        "name": "x-content-type-options",
        "value": "nosniff"
      },
      {
        "name": "X-Firefox-Spdy",
        "value": "h2"
      },
      {
        "name": "x-frame-options",
        "value": "SAMEORIGIN"
      },
      {
        "name": "x-powered-by",
        "value": "HHVM/3.18.6-dev"
      },
      {
        "name": "x-search-id",
        "value": "esvan0r5bnnwscyk2wq09i1im"
      },
      {
        "name": "x-varnish",
        "value": "766019457, 417549316"
      }
    ]
  },
  "Request headers (665 B)": {
    "headers": [
      {
        "name": "Accept",
        "value": "*/*"
      },
      {
        "name": "Accept-Encoding",
        "value": "gzip, deflate, br"
      },
      {
        "name": "Accept-Language",
        "value": "en-US,en;q=0.5"
      },
      {
        "name": "Connection",
        "value": "keep-alive"
      },
      {
        "name": "Cookie",
        "value": "WMF-Last-Access=11-Jun-2019; WMF-Last-Access-Global=11-Jun-2019; mwPhp7Seed=5c9; GeoIP=US:NY:Port_Jervis:41.38:-74.67:v4"
      },
      {
        "name": "DNT",
        "value": "1"
      },
      {
        "name": "Host",
        "value": "en.wikipedia.org"
      },
      {
        "name": "Referer",
        "value": "https://www.wikipedia.org/"
      },
      {
        "name": "TE",
        "value": "Trailers"
      },
      {
        "name": "User-Agent",
        "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0"
      }
    ]
  }
}

Header 选项卡有三个主要部分,上部列出了请求的基本信息:

这包括了:

  • 请求的信息
  • HTTP 请求的header
  • 响应的 header

请求的信息

  • 请求的 URL
  • 请求的方法
  • 远端IP地址端口
  • 一个问号图标的状态码,连接到关于这个状态码详情的页面。可以参阅 MDN 上的HTTP Headers 文档
  • Edit and Resend 按钮编辑后重新发送请求。
  • A Raw headers button to display the raw request and response headers.
  • The HTTP version used
  • The Referrer Policy, which governs which referrer information, sent in the Referer header, should be included with requests. (See Referrer-Policy for a description of possible values)

You can filter the headers that are displayed.

Starting in Firefox 67, in addition to showing information about known trackers in the list, the request information section of the Headers panel also shows an icon and a message if the request is to a site that is associated with a known tracker (bug 1485416).

Response headers

The response headers section shows details about the response. If you hover over a line in the response headers section, a question mark links to the documentation for that response header, if available.

If you noticed that the keys in the response header are all in lowercase, while the request headers keys are not, that is by design.

Request headers

The Request headers section shows details about the request headers. If you hover over a line in the request headers section, a question mark links to the documentation for that request header, if available.

Cookies

This tab lists full details of any cookies sent with the request or response:

As with headers, you can filter the list of cookies displayed. The full list of cookie attributes is shown—see the following screenshot showing Response cookies with further attributes shown.

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

The samesite attribute has been shown since Firefox 62 (bug 1452715).

Params

This tab displays the GET parameters and POST data of a request:

Response

The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:

If the response is JSON, it will be shown as an inspectable object:

If the response is an image, the tab displays a preview:

Cache

If the response is cached (i.e. a 304), the Cache tab will display details about that cached resource.

These details include:

  • Last fetched: The date the resource was last fetched
  • Fetched count: The number of times in the current session that the resource has been fetched
  • Data size: The size of the resource.
  • Last modified: The date the resource was last modified.
  • Expires: The date the resource expires.
  • Device: The device the resource was fetched from (e.g. "disk").

HTML preview

If the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.

Timings

The Timings tab breaks a network request down into the following subset of the stages defined in the HTTP Archive specification:

Name Description
Blocked

Time spent in a queue waiting for a network connection.

The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the network.http.max-persistent-connections-per-server preference. If all connections are in use, the browser can't download more resources until a connection is released.

DNS resolution Time taken to resolve a host name.
Connecting Time taken to create a TCP connection.
Sending Time taken to send the HTTP request to the server.
Waiting Waiting for a response from the server.
Receiving Time taken to read the entire response from the server (or cache).

It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:

Security

If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:

The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:

  1. Using SSLv3 instead of TLS
  2. Using the RC4 cipher

Stack trace

Stack traces are shown in the Stack Trace tab, for responses that have a stack trace of course.

Network Monitor Features

The following articles cover different aspects of using the network monitor: