1======================= 2Network request details 3======================= 4 5The request details pane appears when you click on a network request in the request list. This pane provides more detailed information about the request. 6 7Network request details 8*********************** 9 10Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request. 11 12.. image:: network-details-fx78.png 13 :alt: Screenshot of the Network Request details pane, without callouts for the close-pane button and the detail tabs 14 :class: center 15 16.. note:: 17 18 The screenshots and descriptions in this section reflect Firefox 78. Earlier versions appeared similarly, but might not include some functionality. 19 20 21The tabs at the top of this pane enable you to switch between the following pages: 22 23- :ref:`Headers <network-monitor-request-details-headers-tab>` 24- **Messages** (only for WebSocket items) 25- :ref:`Request <network-monitor-request-details-request-tab>` 26- :ref:`Response <network-monitor-request-details-response-tab>` 27- :ref:`Cache <network-monitor-request-details-cache-tab>` 28- :ref:`Timings <network-monitor-request-details-timings-tab>` 29- :ref:`Security <network-monitor-request-details-security-tab>` 30- :ref:`Stack trace <network-monitor-request-details-stack-trace-tab>` (only when the request has a stack trace, e.g. a script called by another script). 31 32 33Clicking the icon at the right-hand end of the :doc:`toolbar <../toolbar/index>` closes the details pane and returns you to the list view. 34 35 36.. _network-monitor-request-details-headers-tab: 37 38Headers tab 39----------- 40 41The Headers tab has a toolbar, followed by three main sections. 42 43This includes: 44 45 46- Information about the request 47 48 - Status: The response status code for the request; click the "?" icon to go to the reference page for the status code. 49 - Version: The version of HTTP used. 50 - Transferred: The amount of data transferred for the request. 51 - Referrer policy: The value of the `Referrer-policy header <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy>`_. 52 53- **HTTP Response headers** 54- **HTTP Request headers** 55 56Each section has a disclosure triangle to expand the section to show more information. 57 58 59Headers toolbar 60~~~~~~~~~~~~~~~ 61 62Using the Headers toolbar, you can: 63 64 65- Filter the headers in the Response Headers and Request Headers sections. 66- **Block** the domain involved in this request. The domain is added to the :ref:`Blocking sidebar <network_monitor_blocking_specific_urls>`. 67- Resend the request. The **Resend** button opens a menu with two items: 68 69 - **Resend**: Resends the request. 70 - **Edit and Resend**: Enables an editing mode, where you can modify the method, URL, request headers, or request body of the request. Click **Send** to send the modified request, or **Cancel** to cancel editing. 71 72 73Request Information 74~~~~~~~~~~~~~~~~~~~ 75 76The following information is shown only when the section is expanded: 77 78- **Scheme**: The scheme used in the URL 79- **Host**: The server involved in the request 80- **Filename**: The full path to the file requested 81- **Address**: The IP address of the host 82 83The following information is shown in both the collapsed and the expanded states: 84 85 86- **Status:** The `HTTP response code <https://developer.mozilla.org/en-US/docs/Web/HTTP/Status>`_ for the request. 87- **Version**: The HTTP version used 88- **Transferred**: The amount of data transferred with the request 89- The **Referrer Policy**, which governs which referrer information, sent in the `Referer <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>`_ header, should be included with requests. (See `Referrer-Policy <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy>`_ for a description of possible values) 90- **Blocking**: If the request is to a site that is associated with a known tracker, an icon and a message are shown; otherwise, this field is not shown. 91 92 93Response headers 94~~~~~~~~~~~~~~~~ 95 96The response headers section shows details about the response. For each line in the response headers section, a question mark links to the documentation for that response header, if one is available. 97 98A **Raw** toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text. 99 100.. note:: 101 Note that the keys in the response header are all in lowercase, while the request headers keys are not. `HTTP/2 requires that all headers be lowercase <https://datatracker.ietf.org/doc/html/rfc7540#section-8.1.2>`_; response headers are shown as they are received from the server. (There may be some exceptions, such as ``X-Firefox-Spdy``, which is added by Firefox.) 102 103 104.. image:: response-headers-fx78.png 105 :alt: Screenshot showing the Request headers section of the Request details pane 106 :class: border 107 108You can copy some or all of the response header in JSON format by using the context menu: 109 110.. image:: copy-response-headers-fx78.png 111 :alt: Screenshot showing the Response headers pane, and its context menu with "Copy" and "Copy all" items 112 :class: border 113 114If you select **Copy**, a single key word, value pair is copied. If you select **Copy All**, the entire header is copied in JSON format, giving you something like this (after running the results through a JSON validator): 115 116 117.. code-block:: json 118 119 { 120 "Response headers (1.113 KB)": { 121 "headers": [ 122 { 123 "name": "accept-ranges", 124 "value": "bytes" 125 }, 126 { 127 "name": "age", 128 "value": "0" 129 }, 130 { 131 "name": "backend-timing", 132 "value": "D=74716 t=1560258099074460" 133 }, 134 { 135 "name": "cache-control", 136 "value": "private, must-revalidate, max-age=0" 137 }, 138 { 139 "name": "content-disposition", 140 "value": "inline; filename=api-result.js" 141 }, 142 { 143 "name": "content-encoding", 144 "value": "gzip" 145 }, 146 { 147 "name": "content-length", 148 "value": "673" 149 }, 150 { 151 "name": "content-type", 152 "value": "text/javascript; charset=utf-8" 153 }, 154 { 155 "name": "date", 156 "value": "Tue, 11 Jun 2019 13:01:39 GMT" 157 }, 158 { 159 "name": "mediawiki-login-suppressed", 160 "value": "true" 161 }, 162 { 163 "name": "p3p", 164 "value": "CP=\"This is not a P3P policy! See https://en.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info.\"" 165 }, 166 { 167 "name": "server", 168 "value": "mw1316.eqiad.wmnet" 169 }, 170 { 171 "name": "server-timing", 172 "value": "cache;desc=\"pass\"" 173 }, 174 { 175 "name": "strict-transport-security", 176 "value": "max-age=106384710; includeSubDomains; preload" 177 }, 178 { 179 "name": "vary", 180 "value": "Accept-Encoding,Treat-as-Untrusted,X-Forwarded-Proto,Cookie,Authorization,X-Seven" 181 }, 182 { 183 "name": "via", 184 "value": "1.1 varnish (Varnish/5.1), 1.1 varnish (Varnish/5.1)" 185 }, 186 { 187 "name": "x-analytics", 188 "value": "ns=-1;special=Badtitle;WMF-Last-Access=11-Jun-2019;WMF-Last-Access-Global=11-Jun-2019;https=1" 189 }, 190 { 191 "name": "x-cache", 192 "value": "cp1075 pass, cp1075 pass" 193 }, 194 { 195 "name": "x-cache-status", 196 "value": "pass" 197 }, 198 { 199 "name": "x-client-ip", 200 "value": "204.210.158.136" 201 }, 202 { 203 "name": "x-content-type-options", 204 "value": "nosniff" 205 }, 206 { 207 "name": "X-Firefox-Spdy", 208 "value": "h2" 209 }, 210 { 211 "name": "x-frame-options", 212 "value": "SAMEORIGIN" 213 }, 214 { 215 "name": "x-powered-by", 216 "value": "HHVM/3.18.6-dev" 217 }, 218 { 219 "name": "x-search-id", 220 "value": "esvan0r5bnnwscyk2wq09i1im" 221 }, 222 { 223 "name": "x-varnish", 224 "value": "766019457, 417549316" 225 } 226 ] 227 }, 228 "Request headers (665 B)": { 229 "headers": [ 230 { 231 "name": "Accept", 232 "value": "*/*" 233 }, 234 { 235 "name": "Accept-Encoding", 236 "value": "gzip, deflate, br" 237 }, 238 { 239 "name": "Accept-Language", 240 "value": "en-US,en;q=0.5" 241 }, 242 { 243 "name": "Connection", 244 "value": "keep-alive" 245 }, 246 { 247 "name": "Cookie", 248 "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" 249 }, 250 { 251 "name": "DNT", 252 "value": "1" 253 }, 254 { 255 "name": "Host", 256 "value": "en.wikipedia.org" 257 }, 258 { 259 "name": "Referer", 260 "value": "https://www.wikipedia.org/" 261 }, 262 { 263 "name": "TE", 264 "value": "Trailers" 265 }, 266 { 267 "name": "User-Agent", 268 "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0" 269 } 270 ] 271 } 272 } 273 274Request headers 275~~~~~~~~~~~~~~~ 276 277The Request headers section shows details about the request headers. For each line in the request headers section, a question mark links to the documentation for that request header, if one is available. 278 279A **Raw** toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text. 280 281.. image:: request-headers-fx78.png 282 :alt: Screenshot showing the Request headers section of the Request details pane 283 :class: border 284 285 286.. _network-monitor-request-details-cookies-tab: 287 288Cookies tab 289----------- 290 291This tab lists full details of any cookies sent with the request or response: 292 293.. image:: network_cookies.png 294 :class: border 295 296As 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. 297 298.. image:: highlight-samesite-attribute.png 299 :alt: cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite 300 301The ``samesite`` attribute has been shown since Firefox 62 (`bug 1452715 <https://bugzilla.mozilla.org/show_bug.cgi?id=1452715>`_). 302 303 304.. _network-monitor-request-details-request-tab: 305 306Request tab 307----------- 308 309Request shows the complete request parameters, by default, in a formatted view: 310 311.. image:: json_formatted_request.png 312 :class: border 313 314 315Switch the toggle button to have the raw view presented: 316 317.. image:: json_raw_request.png 318 :class: border 319 320 321.. _network-monitor-request-details-response-tab: 322 323Response tab 324------------ 325 326The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text: 327 328.. image:: html_formatted_response.png 329 :class: border 330 331 332The toggle button for switching between raw and formatted response view has been implemented (`bug 1693147 <https://bugzilla.mozilla.org/show_bug.cgi?id=1693147>`_). The previous HTML example makes use of the formatted view. When the toggle button is turned on, the raw response view will be enabled: 333 334.. image:: html_raw_response.png 335 :class: border 336 337 338If the response is JSON, it will be shown as an inspectable object: 339 340.. image:: json_formatted_response.png 341 :class: border 342 343 344In the raw response view the response will be shown as a string: 345 346.. image:: json_raw_response.png 347 :class: border 348 349 350If the response is an image, the tab displays a preview: 351 352.. image:: response_pane_image.png 353 :class: border 354 355 356If the response is a web font, the tab also displays a preview: 357 358.. image:: response_font.png 359 :class: border 360 361 362For network responses that are initiated by a `WebSocket <https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API>`_ connection, the details pane shows any associated messages. For more information, see :doc:`Inspecting web sockets <../inspecting_web_sockets/index>`. 363 364 365.. _network-monitor-request-details-cache-tab: 366 367Cache tab 368--------- 369 370If the response is cached (i.e. a 304), the Cache tab displays details about that cached resource. 371 372.. image:: response_cache.png 373 :class: border 374 375These details include: 376 377- **Last fetched:** The date the resource was last fetched 378- **Fetched count:** The number of times in the current session that the resource has been fetched 379- **Data size:** The size of the resource. 380- **Last modified:** The date the resource was last modified. 381- **Expires:** The date the resource expires. 382- **Device:** The device the resource was fetched from (e.g. "disk"). 383 384 385HTML preview 386~~~~~~~~~~~~ 387 388If the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload. 389 390 391.. _network-monitor-request-details-timings-tab: 392 393Timings tab 394----------- 395 396The Timings tab provides information about how long each stage of a network request took, with a more detailed, annotated, view of the timeline bar, so it is easy to locate performance bottlenecks. 397 398.. image:: network-timings-tab.png 399 :class: border 400 401 402This tab can include the following sections. 403 404 405Queued, Started, Downloaded 406~~~~~~~~~~~~~~~~~~~~~~~~~~~ 407 408New in Firefox 72, we now show the following timings at the top of the Timings tab, making dependency analysis a lot easier: 409 410- Queued: When the resource was queued for download. 411- Started: When the resource started downloading. 412- Downloaded: When the resource finished downloading. 413 414 415.. note:: 416 Future versions will also show this information when entries in the network monitor timeline graph are moused over (see `bug 1580493 <https://bugzilla.mozilla.org/show_bug.cgi?id=1580493>`_). 417 418 419Request Timing 420~~~~~~~~~~~~~~ 421 422The *Request Timing* section breaks a network request down into the following subset of the stages defined in the `HTTP Archive <https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html>`_ specification: 423 424 425.. list-table:: 426 :widths: 20 80 427 :header-rows: 0 428 429 * - Name 430 - Description 431 432 * - Blocked 433 - Time spent in a queue waiting for a network connection. 434 435 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 <http://kb.mozillazine.org/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. 436 437 * - DNS resolution 438 - Time taken to resolve a host name. 439 440 * - Connecting 441 - Time taken to create a TCP connection. 442 443 * - Sending 444 - Time taken to send the HTTP request to the server. 445 446 * - Waiting 447 - Waiting for a response from the server. 448 449 * - Receiving 450 - Time taken to read the entire response from the server (or cache). 451 452 453Server Timing 454~~~~~~~~~~~~~ 455 456New in Firefox 71, the *Server Timing* section lists any information provided in the `Server-Timing <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing>`_ header — this is used to surface any backend server timing metrics you've recorded (e.g. database read/write, CPU time, file system access, etc.). 457 458The header takes a series of descriptions and durations, which can be anything you like. In the above screenshot for example, the highlighted request's ``Server-Timing`` header contains 4 items — *data*, *markup*, *total*, and *miss*. 459 460 461.. _network-monitor-request-details-security-tab: 462 463Security tab 464------------ 465 466If 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: 467 468.. image:: network_security.png 469 :alt: border 470 471The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses: 472 4731. Using SSLv3 instead of TLS 4742. Using the RC4 cipher 475 476.. image:: security-warning.png 477 :class: center 478 479 480.. _network-monitor-request-details-stack-trace-tab: 481 482Stack trace tab 483--------------- 484 485Stack traces are shown in the *Stack Trace* tab, for responses that have a stack trace of course. 486 487.. image:: network_stack_trace.png 488 :class: border 489 490 491Network Monitor Features 492************************ 493 494The following articles cover different aspects of using the network monitor: 495 496- :doc:`Toolbar <../toolbar/index>` 497- :doc:`Network request list <../request_list/index>` 498- :doc:`Network request details <../request_details/index>` 499- :doc:`Network traffic recording <../performance_analysis/index>` 500- :doc:`Throttling <../throttling/index>` 501- :doc:`Inspecting web sockets <../inspecting_web_sockets/index>` 502
