1==================== 2Network request list 3==================== 4 5The request list of the Network Monitor shows a list of all the network requests made in the course of loading the page. 6 7 8Network request list 9-------------------- 10 11By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row: 12 13.. image:: network_request_list.png 14 :class: border 15 16By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the :ref:`Settings <settings-common-preferences>`. 17 18 19Network request columns 20----------------------- 21 22You can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. A **Reset Columns** command is available on the context menu to reset the columns to their initial configuration. 23 24You can also change the width of the columns to help make the information you are looking for easier to view. The mouse pointer changes to a resize icon when you move it over the border of a column. You can drag to manually set the size of column. Starting in Firefox 76 you can double-click a column divider to resize the column to the left of it to fit its contents. 25 26The **Reset Columns** command on the context menu also resets the width of the columns to the default values. 27 28.. raw:: html 29 30 <iframe width="560" height="315" src="https://www.youtube.com/embed/5fbuDO2s9Pk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 31 <br/> 32 <br/> 33 34Clicking the column header label sorts the request list by that column. You can reset the sort to the default by selecting "Reset Sorting" from the context menu. 35 36.. image:: network_monitor_columns_menu.png 37 :alt: Screenshot of the context menu for selecting columns to display in the Network monitor 38 :class: center 39 40 41Here is a list of all available columns: 42 43.. |image1| image:: blocked_nw_icon.png 44 :alt: Red circle with a diagonal slash 45 :width: 20 46 47.. |image2| image:: nwmon-turtle-tooltip.png 48 :alt: Screenshot of a network request with a turtle icon, and a tooltip explaining the problem 49 :class: border 50 51 52- **Status**: The HTTP status code returned. The numeric code is displayed on a colored background, to help unusual ones stand out. If there was no response, this column is empty. Or you might see a |image1| red circle with a diagonal slash for responses that were blocked by the browser or the server. 53- **Method**: The HTTP request method used. 54- **Domain**: Domain of the path requested. 55 56 - If the request used SSL/TLS and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. Y 57 - Hover over the domain to see the IP address. 58 - There's an icon next to the domain that gives you extra information about the security status of that request. See :ref:`Security icons <network-monitor-request-list-security-icons>`. 59 60- **File**: The basename of the file requested. 61 62 - (Starting in Firefox 80) On the right edge of the File column, a turtle icon appears if the server waiting time exceeds a threshold (default: 500 ms). A tooltip explains the problem. You can configure the threshold in the `Configuration Editor <https://support.mozilla.org/en-US/kb/about-config-editor-firefox>`_ (about:config) by modifying the ``devtools.netmonitor.audits.slow`` setting. 63 - |image2| 64 65- **URL**: The `URL <https://developer.mozilla.org/en-US/docs/Glossary/URL>`_ of the file requested. 66- **Protocol:** The network protocol used to transfer the data, this column is hidden by default. 67- **Scheme:** The scheme (https/http/ftp/...) of the path requested. This column is hidden by default. 68- **Remote IP**: The IP address of the server answering the request. This column is hidden by default. 69- **Type**: ``Content-type`` of the response. 70- **Cookies:** The number of request cookies associated to the request. This column is hidden by default. This is new in Firefox 55. 71- **Set-Cookies:** The number of response cookies associated to the request. This column is hidden by default. This is new in Firefox 55. 72- **Transferred**: The number of bytes that were actually transferred to load the resource, or a message about why the resource was not transferred. A number value is less than **Size** if the resource was compressed. 73 74 - If the resource was fetched from a `service worker <https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API>`_ cache, then this cell displays "service worker". 75 - Cached resources may be fetched from the cache and the network simultaneously, which may improve load time for slow caches. `Starting with Firefox 68 <https://bugzilla.mozilla.org/show_bug.cgi?id=1358038>`_, the transferred column lists either "cached (raced)" or "[size] (raced)" depending on the faster source. This feature is called `Race Cache With Network (RCWN) <https://slides.com/valentingosu/race-cache-with-network-2017#>`_. 76 - If the resource was blocked, the message indicates why it was blocked. For example, "CSP", "Malware", "CORS Missing Allow Origin", "Blocked by [Name of Extension]". 77 78- **Size**: The size of the transferred resource. 79 80 81Image thumbnails 82~~~~~~~~~~~~~~~~ 83 84If the request is for an Image, hovering over its filename shows a preview of the image in a tooltip: 85 86.. image:: image_preview.png 87 :class: border 88 89 90.. _network-monitor-request-list-security-icons: 91 92Security icons 93~~~~~~~~~~~~~~ 94 95The Network Monitor displays an icon in the Domain column: 96 97.. image:: network_message_list_63.png 98 :class: border 99 100 101This gives you extra information about the security status of the request: 102 103.. |image3| image:: https.svg 104 :width: 20 105 106.. |image4| image:: https-weak.svg 107 :width: 20 108 109.. |image5| image:: https-failed.svg 110 :width: 20 111 112.. |image6| image:: http.svg 113 :width: 20 114 115.. |image7| image:: localhost.svg 116 :width: 20 117 118.. |image8| image:: tracker_icon.png 119 :width: 20 120 121 122.. list-table:: 123 :widths: 25 75 124 :header-rows: 1 125 126 * - Icon 127 - Meaning 128 129 * - |image3| 130 - HTTPS 131 132 * - |image4| 133 - Weak HTTPS (for example, a weak cipher was used) 134 135 * - |image5| 136 - Failed HTTPS (for example, a certificate was invalid) 137 138 * - |image6| 139 - HTTP 140 141 * - |image7| 142 - Localhost 143 144 * - |image8| 145 - Indicates that the URL belongs to a known tracker that would be blocked with content blocking enabled. 146 147 148Timeline 149-------- 150 151The request list also displays a timeline for the different parts of each request. 152 153.. image:: timeline.png 154 :class: border 155 156 157Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the :ref:`Timings <network-monitor-request-details-timings-tab>` page. 158 159Starting in Firefox 45, the timeline also contains two vertical lines: 160 161 162- The blue line marks the point at which thepage's `DOMContentLoaded <https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event>`_ event is triggered. 163- The red line marks the point at which the page's `load <https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event>`_ event is triggered. 164 165 166.. _network_monitor_blocking_specific_urls: 167 168Blocking specific URLs 169---------------------- 170 171If you want to view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you can block requests matching patterns you specify. 172 173 1741. Click the **Request Blocking** icon in the toolbar. This opens the **Blocking** sidebar. (Click the icon again when you want to close the sidebar.) 175 176 .. image:: request_blocking_panel.png 177 :alt: Screen shot of the Blocking panel, with arrows indicating the panel and the Request Blocking toolbar icon 178 :class: center 179 1802. Enter a string in the field with the placeholder text *Block resource when URL contains*. 1813. Reload the page to test it with the specified URL blocked. 182 183 184Other actions you can take with Request Blocking: 185 186 187- To turn all request blocking off or on: Toggle the checkbox next to Enable Request Blocking. 188- To turn a specific block off or on: Toggle the checkbox next to that item. 189- To delete a blocked item, click the X icon that appears when you focus the item. 190- (Starting with Firefox 77) Right-click any item in the list and choose from the context menu: 191 192 - **Enable all** enables blocking of all items in the list. 193 - **Disable all** disables blocking of all items in the list. 194 - **Remove all** deletes all items in the list. 195 196 197Blocking a specific URL from the request list 198~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 199 200You can also block a URL from the request list: 201 202.. image:: beforeblocking.png 203 :class: border 204 205 2061. Hover over the item you want to block in the Request List. 2072. Select Block URL from the context menu. 2083. When you refresh the page, that specific URL will be blocked and a message will be added to the item in the list indicating that it has been blocked by the DevTools. 209 210.. image:: afterblocking.png 211 :class: border 212 213 214Stop blocking a URL from the Request List 215~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 216 217.. image:: unblockurl.png 218 :class: border 219 2201. Hover over the item. 2212. Select **Unblock URL**. 2223. Now when you refresh the page, the item will once enabled. 223 224 225.. note:: 226 (Starting in Firefox 80) You can also block and unblock URLs from the :doc:`Web Console <../../web_console/index>`, using the ``:block`` and ``:unblock`` helper commands. These accept any string, and affect any URL containing the string. 227 228 229.. _request-list-filtering-requests: 230 231Filtering requests 232****************** 233 234You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, or by request properties. 235 236.. |br| raw:: html 237 238 <br/> 239 240 241.. list-table:: 242 :widths: 25 75 243 :header-rows: 1 244 245 * - Filter type 246 - How to apply 247 248 * - Content type 249 - Use the buttons in the :doc:`toolbar <../toolbar/index>` (**HTML**, **CSS**, **JS**). 250 251 * - `XHR <https://developer.mozilla.org/en-US/docs/Glossary/XHR_(XMLHttpRequest)>`_ requests 252 - Use the **XHR** button in the :doc:`toolbar <../toolbar/index>`. 253 254 * - `WebSocket <https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API>`_ connections 255 - Use the **WS** button in the :doc:`toolbar <../toolbar/index>`. You can filter by plain text (in which case the text is used to find partial matches; entering "for" will match any message that contains the word "for") or—as of `Firefox 75 <https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/75>`_ — using `regular expressions <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions>`_ (by writing the regexp bracketed within slashes; "/.+Corp.*/" will look for any occurrence of "Corp" which has at least one character before it and may or may not have any characters after it, for example). |br| |br| The third-party add-on `WebSocket Sniffer <https://addons.mozilla.org/en-US/firefox/addon/websocketsniff>`_ may be helpful as well. 256 257 * - URL 258 - Use the *Filter URLs* box in the :doc:`toolbar <../toolbar/index>`. You can focus it by clicking in the filter box, or by pressing :kbd:`Ctrl` + :kbd:`F` (or :kbd:`Cmd` + :kbd:`F` on a Mac); then start typing. The list of network requests is filtered to include only requests that contain your filter string, in either the Domain or the File portions. |br| |br| You can filter requests that *don't* contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in the URL. 259 260 * - Request properties 261 - Use the search box in the :doc:`toolbar <../toolbar/index>`. See next section. 262 263 264.. _request-list-filtering-by-properties: 265.. _request-list-requst-list-cause-column: 266 267Filtering by properties 268~~~~~~~~~~~~~~~~~~~~~~~ 269 270The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (``-``) negates the filter. You can combine different filters together by separating them with a space. 271 272 273.. list-table:: 274 :widths: 20 40 40 275 :header-rows: 1 276 277 * - Keyword 278 - Meaning 279 - Examples 280 281 * - ``status-code`` 282 - Shows resources that have the specific HTTP status code. 283 - ``status-code:304`` 284 285 * - ``method`` 286 - Shows resources that have were requested via the specific HTTP request method. 287 - ``method:post`` 288 289 * - ``domain`` 290 - Shows resources coming from a specific domain. 291 - ``domain:mozilla.org`` 292 293 * - ``remote-ip`` 294 - Shows resources coming from a server with the specified IP. 295 - ``remote-ip:63.245.215.53`` |br| |br| ``remote-ip:[2400:cb00:2048:1::6810:2802]`` 296 297 * - ``cause`` 298 - Shows resources matching a specific cause type. The types can be found in the description of the cause column. 299 - ``cause:js`` |br| |br| ``cause:stylesheet`` |br| |br| ``cause:img`` 300 301 * - ``transferred`` 302 - Shows resources having a specific transferred size or a transferred size close to the one specified. ``k`` can be used as suffix for kilobytes and ``m`` for megabytes, e.g. the value ``1k`` is equivalent to ``1024``. 303 - ``transferred:1k`` 304 305 * - ``size`` 306 - Shows resources having a specific size (after decompression) or a size close to the one specified. ``k`` can be used as suffix for kilobytes and ``m`` for megabytes, e.g. the value ``1k`` is equivalent to ``1024``. 307 - ``size:2m`` 308 309 * - ``larger-than`` 310 - Shows resources that are larger than the specified size in bytes. ``k`` can be used as suffix for kilobytes and ``m`` for megabytes, e.g. the value ``1k`` is equivalent to ``1024``. 311 - ``larger-than:2000`` |br| |br| ``-larger-than:4k`` 312 313 * - ``mime-type`` 314 - Shows resources that match the specified MIME type. 315 - ``mime-type:text/html`` |br| |br| ``mime-type:image/png`` |br| |br| ``mime-type:application/javascript`` 316 317 * - ``is`` 318 - ``is:cached`` and ``is:from-cache`` shows only resources coming from cache. ``is:running`` shows only resources, which are currently being transferred. 319 - ``is:cached`` |br| |br| ``-is:running`` 320 321 * - ``scheme`` 322 - Shows resources transferred via the given scheme. 323 - ``scheme:http`` 324 325 * - ``has-response-header`` 326 - Shows resources that contain the specified HTTP response header. 327 - ``has-response-header:cache-control`` |br| |br| ``has-response-header:X-Firefox-Spdy`` 328 329 * - ``set-cookie-domain`` 330 - Shows the resources that have a ``Set-Cookie`` header with a ``Domain`` attribute that matches the specified value. 331 - ``set-cookie-domain:.mozilla.org`` 332 333 * - ``set-cookie-name`` 334 - Shows the resources that have a ``Set-Cookie`` header with a name that matches the specified value. 335 - ``set-cookie-name:_ga`` 336 337 * - ``set-cookie-value`` 338 - Shows the resources that have a ``Set-Cookie`` header with a value that matches the specified value. 339 - ``set-cookie-value:true`` 340 341 * - ``regexp`` 342 - Shows the resources having a URL that matches the given `regular expression <https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression>`_. 343 - ``regexp:\d{5}`` |br| |br| ``regexp:mdn|mozilla`` 344 345 346For example, to find all 404, not found, errors, you can type "404" into the search and auto-complete suggests "status-code:404" so you'll end up with something like this: 347 348.. image:: 404_filter.png 349 :class: border 350 351 352Search in requests 353------------------ 354 355Use the *Search* panel to run a full-text search on headers and content. 356 357 3581. Click the **Search** icon in the toolbar. This opens the Search sidebar. 359 360.. image:: search_panel.png 361 :alt: Screenshot of the Network monitor, with the request search sidebar displayed, and arrows indicating the search toolbar icon and the search box. 362 :class: border 363 3642. Enter a string in the search field of the sidebar, and press :kbd:`Enter` or :kbd:`Return`. The search results area below the search field displays the requests that contain that string in the request or response headers or in the content of the response. You can expand each item to show the specific item that matches the string. Clicking an item in the search results highlights that item in the monitor list, and displays the corresponding information in the request details pane. 365 366.. image:: search_panel_matches.png 367 :alt: Screenshot of the search panel, with "newsletter" as the search string, and callouts for the expanded results, and corresponding items displayed in the request list and headers tab. 368 :class: border 369 370 371Other ways to use the search panel: 372 373 374- To clear the search string: click the **X** icon in the search field. 375- To make the search case sensitive: click the **Case Sensitive** (**Aa**) icon next to the search field. 376- To close the search panel, do one of the following: 377 378 - Click the **X** icon next to the search field. 379 - Click the **Search** icon in the Network Monitor toolbar. 380 381 382.. _network-monitor-request-list-edit-and-resend: 383 384Context menu 385------------ 386 387Context-clicking on a row in the list displays a context menu with the following options: 388 389.. list-table:: 390 :widths: 25 75 391 :header-rows: 1 392 393 * - Menuitem 394 - Description 395 396 * - Copy > Copy URL 397 - Copies the URL. 398 399 * - Copy > Copy as cURL 400 - Copies the network request to the clipboard as a `cURL <https://curl.haxx.se/>`_ command, so you can execute it from a command line. See :ref:`Copy as cURL <request-list-copy-as-curl>`, below. 401 402 * - Copy > Copy as Fetch 403 - Copies the request as a call to the <a href="/en-US/docs/Web/API/fetch">fetch()</a> method, including the URL and any settings object. 404 405 * - Copy > Copy Request Headers 406 - Copies the request's header to the clipboard. 407 408 * - Copy > Copy Response Headers 409 - Copies the headers of the response for this request, to the clipboard. 410 411 * - Copy > Copy Response 412 - Copies the entire response that was sent for this request. 413 414 * - Copy > Copy All As HAR 415 - Creates an `HTTP Archive <https://w3c.github.io/web-performance/specs/HAR/Overview.html>`_ (HAR) for all requests listed, and copies it to the clipboard. 416 417 * - Save All As HAR 418 - Creates an `HTTP Archive <https://w3c.github.io/web-performance/specs/HAR/Overview.html>`_ (HAR) for all requests listed, and opens a file dialog, so you can save it to a file. 419 420 * - Resend 421 - Resends the request as it was originally sent with no changes made. 422 423 * - Edit and Resend 424 - Opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request. 425 426 * - Block URL 427 - Blocks the selected URL for future requests. See :ref:`Blocking a specific URL from the Request List <network_monitor_blocking_specific_urls>`. 428 429 * - Open in New Tab 430 - Resends the request in a new tab — very useful for debugging asynchronous requests. 431 432 * - Open in Style Editor 433 - For a CSS resource, opens it in the :doc:`Style Editor <../../style_editor/index>`. 434 435 * - Start :doc:`Performance Analysis <../performance_analysis/index>` 436 - 437 438 * - Use as Fetch in Console 439 - Submits the request as a call to the `fetch() <https://developer.mozilla.org/en-US/docs/Web/API/fetch>` method in the console. 440 441 442.. _request-list-copy-as-curl: 443 444Copy as cURL 445~~~~~~~~~~~~ 446 447The command may include the following options: 448 449.. list-table:: 450 :widths: 25 75 451 :header-rows: 0 452 453 * - ``-X [METHOD]`` 454 - If the method is not GET or POST 455 456 * - ``--data`` 457 - For URL encoded request parameters 458 459 * - ``--data-binary`` 460 - For multipart request parameters 461 462 * - ``--http/VERSION`` 463 - If the HTTP version is not 1.1 464 465 * - ``-I`` 466 - If the method is HEAD 467 468 * - ``-H`` 469 - One for each request header. |br| |br| If the "Accept-Encoding" header is present, the cURL command includes ``--compressed`` instead of ``-H "Accept-Encoding: gzip, deflate"``. This means that the response will be automatically decompressed. 470 471 472 * - ``--globoff`` 473 - Suppresses cURL's globbing (wildcard matching) feature if the copied URL includes square bracket characters (``[`` or ``]``). (Starting in Firefox 76) 474 475 476 477Managing HAR data 478~~~~~~~~~~~~~~~~~ 479 480The HAR format enables you to export detailed information about network requests. In addition to the **Copy** and **Save** menu items for HAR in the context menu, similar menu items are available in the **HAR** dropdown menu in the toolbar, as well as an **Import** menuitem. 481 482.. image:: har-dropdown.png 483 :class: border 484 485 486Network Monitor features 487************************ 488 489The following articles cover different aspects of using the network monitor: 490 491- :doc:`Toolbar <../toolbar/index>` 492- :doc:`Network request list <../request_list/index>` 493- :doc:`Network request details <../request_details/index>` 494- :doc:`Network traffic recording <../performance_analysis/index>` 495- :doc:`Throttling <../throttling/index>` 496- :doc:`Inspecting web sockets <../inspecting_web_sockets/index>` 497- :doc:`Inspecting server-sent events <../inspecting_server-sent_events/index>` 498
