path: root/files/zh-cn/tools/network_monitor/request_details/index.html

---
title: Network request details
slug: Tools/Network_Monitor/request_details
tags:
  - Dev Tools
  - Firefox
  - Networking
translation_of: Tools/Network_Monitor/request_details
---
<p>{{ToolsSidebar}}</p>

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

<h2 id="Network_request_details">Network request details</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p>

<p>面板上部有一些选项卡，可以让你在不同的页面切换。选项如下：</p>

<ul>
 <li><strong>Headers</strong></li>
 <li><strong>Cookies</strong></li>
 <li><strong>Params</strong></li>
 <li><strong>Response</strong></li>
 <li><strong>Cache</strong></li>
 <li><strong>Timings</strong></li>
 <li><strong>Security </strong>（仅在安全请求下出现）</li>
 <li><strong>Stack trace</strong> （仅在请求有堆栈的情况下出现，也就是说请求是脚本调用其他脚本的时候）。Firefox 55 添加。</li>
</ul>

<p>点击面板上<a href="/en-US/docs/Tools/Network_Monitor#Toolbar">工具栏</a>最左侧的图标可以关闭本面板，返回请求列表。</p>

<h3 id="Headers">Headers</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16731/response_headers_68.png" style="border: 1px solid black; display: block; height: 267px; margin: 0px auto; width: 397px;"><strong>复制</strong>选项只复制你选中的键值对，<strong>复制全部</strong>选项会以一个标准的 json 格式复制 headers 的全部值：</p>

<pre class="brush: json">{
  "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"
      }
    ]
  }
}</pre>

<p>Header 选项卡有三个主要部分，上部列出了请求的基本信息：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>

<p>这包括了：</p>

<ul>
 <li>请求的信息</li>
 <li><strong>HTTP 请求的</strong>header</li>
 <li><strong>响应的 header</strong></li>
</ul>

<h4 id="请求的信息"><strong>请求的信息</strong></h4>

<ul>
 <li><strong>请求的 URL</strong></li>
 <li><strong>请求的方法</strong></li>
 <li><strong>远端IP地址</strong>和<strong>端口</strong></li>
 <li>一个问号图标的<strong>状态码</strong>，连接到关于这个状态码详情的页面。可以参阅 MDN 上的<a href="/zh-CN/docs/Web/HTTP/Headers">HTTP Headers 文档</a>。</li>
 <li><strong>Edit and Resend</strong> 按钮<a href="/en-US/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">编辑后重新发送</a>请求。</li>
 <li>A <strong>Raw headers</strong> button to display the raw request and response headers.</li>
 <li>The HTTP version used</li>
 <li>The <strong>Referrer Policy</strong>, which governs which referrer information, sent in the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer" title="The Referer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example."><code>Referer</code></a> header, should be included with requests. (See <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer-Policy</a> for a description of possible values)</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p>

<p>You can filter the headers that are displayed.</p>

<p>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")}}).</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16600/tracker_in_header_panel.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 402px;"></p>

<h4 id="Response_headers"><strong>Response headers</strong></h4>

<p>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.</p>

<div class="blockIndicator note">
<p>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.</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/16441/response_headers.png" style="border: 1px solid black; display: block; height: 327px; margin: 0px auto; width: 435px;"></p>

<h4 id="Request_headers"><strong>Request</strong> headers</h4>

<p>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.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16442/request_headers.png" style="border: 1px solid black; display: block; height: 223px; margin: 0px auto; width: 435px;"></p>

<h3 id="Cookies">Cookies</h3>

<p>This tab lists full details of any cookies sent with the request or response:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>

<p>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.</p>

<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p>

<p>The <code>samesite</code> attribute has been shown since Firefox 62 ({{bug("1452715")}}).</p>

<h3 id="Params">Params</h3>

<p>This tab displays the GET parameters and POST data of a request:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p>

<h3 id="Response">Response</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>

<p>If the response is JSON, it will be shown as an inspectable object:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16332/response_json.png" style="display: block; height: 268px; margin: 0 auto; width: 900px;"></p>

<p>If the response is an image, the tab displays a preview:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p>

<h4 id="Cache">Cache</h4>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p>

<p>These details include:</p>

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

<h4 id="HTML_preview">HTML preview</h4>

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

<h3 id="Timings">Timings</h3>

<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Name</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Blocked</td>
   <td>
    <p>Time spent in a queue waiting for a network connection.</p>

    <p>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 <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p>
   </td>
  </tr>
  <tr>
   <td>DNS resolution</td>
   <td>Time taken to resolve a host name.</td>
  </tr>
  <tr>
   <td>Connecting</td>
   <td>Time taken to create a TCP connection.</td>
  </tr>
  <tr>
   <td>Sending</td>
   <td>Time taken to send the HTTP request to the server.</td>
  </tr>
  <tr>
   <td>Waiting</td>
   <td>Waiting for a response from the server.</td>
  </tr>
  <tr>
   <td>Receiving</td>
   <td>Time taken to read the entire response from the server (or cache).</td>
  </tr>
 </tbody>
</table>

<p>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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p>

<h3 id="Security">Security</h3>

<p>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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>

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

<ol>
 <li>Using SSLv3 instead of TLS</li>
 <li>Using the RC4 cipher</li>
</ol>

<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p>

<h3 id="Stack_trace">Stack trace</h3>

<p>Stack traces are shown in the <em>Stack Trace</em> tab, for responses that have a stack trace of course.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p>

<h2 id="Network_Monitor_Features">Network Monitor Features</h2>

<p>The following articles cover different aspects of using the network monitor:</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">Network request list</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
</ul>