diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /devtools/docs/user/network_monitor | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/docs/user/network_monitor')
74 files changed, 1437 insertions, 0 deletions
diff --git a/devtools/docs/user/network_monitor/hamburger.png b/devtools/docs/user/network_monitor/hamburger.png Binary files differnew file mode 100644 index 0000000000..0a86806250 --- /dev/null +++ b/devtools/docs/user/network_monitor/hamburger.png diff --git a/devtools/docs/user/network_monitor/index.rst b/devtools/docs/user/network_monitor/index.rst new file mode 100644 index 0000000000..4de8266d67 --- /dev/null +++ b/devtools/docs/user/network_monitor/index.rst @@ -0,0 +1,62 @@ +=============== +Network Monitor +=============== + +The Network Monitor shows you all the HTTP requests Firefox makes (for example, when it loads a page, or due to `XMLHttpRequests <https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest>`_), how long each request takes, and details of each request. + +Opening the Network Monitor +*************************** + +There are a few different ways to open the Network Monitor: + +- Press :kbd:`Ctrl` + :kbd:`Shift` + :kbd:`E` (:kbd:`Cmd` + :kbd:`Opt` + :kbd:`E` on a Mac). + +- Select the *Network* panel in the Web Developer Tools, accessible from the Browser Tools submenu + +- Click the wrench icon |image1|, which is in the main toolbar or under the Hamburger menu |image2|, then select "Network". + +.. |image1| image:: wrench-icon.png + :width: 20 + +.. |image2| image:: hamburger.png + :width: 20 + +The Network Monitor will appear at the bottom of the browser window. When it first opens, the Network Monitor does not show request information. The just opened tool looks like this: + +.. image:: network_monitor_new.png + :class: border + +Either action causes the Network Monitor to begin monitoring network activity. Once the tool is monitoring network requests, the display looks like this: + +.. image:: network_monitor.png + :class: border + +When it is actively monitoring activity, the Network Monitor records network requests any time the Toolbox is open, even if the Network Monitor itself is not selected. This means you can start debugging a page in, for example, the Web Console, then switch to the Network Monitor to see network activity without having to reload the page. + +UI overview +*********** + +The UI is divided into four main pieces: + +- The main screen contains the :doc:`toolbar <toolbar/index>`, the :doc:`network request list <request_list/index>`, and the :doc:`network request details pane <request_details/index>`: + +.. image:: network_monitor_closeup.png + :class: border + +- The :doc:`performance analysis <peformance_analysis/index>` view is a separate screen: + +.. image:: network_performance.png + :class: border + +Working with the network monitor +******************************** + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <toolbar/index>` +- :doc:`Network request list <request_list/index>` +- :doc:`Network request details <request_details/index>` +- :doc:`Network traffic recording <performance_analysis/index>` +- :doc:`Throttling <throttling/index>` +- :doc:`Inspecting web sockets <inspecting_web_sockets/index>` +- :doc:`Inspecting server-sent events <inspecting_server-sent_events/index>` diff --git a/devtools/docs/user/network_monitor/inspecting_server-sent_events/basic-sse-message-view.png b/devtools/docs/user/network_monitor/inspecting_server-sent_events/basic-sse-message-view.png Binary files differnew file mode 100644 index 0000000000..98b7d5c8e7 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_server-sent_events/basic-sse-message-view.png diff --git a/devtools/docs/user/network_monitor/inspecting_server-sent_events/customize-columns.png b/devtools/docs/user/network_monitor/inspecting_server-sent_events/customize-columns.png Binary files differnew file mode 100644 index 0000000000..e856d2a929 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_server-sent_events/customize-columns.png diff --git a/devtools/docs/user/network_monitor/inspecting_server-sent_events/index.rst b/devtools/docs/user/network_monitor/inspecting_server-sent_events/index.rst new file mode 100644 index 0000000000..a75666e618 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_server-sent_events/index.rst @@ -0,0 +1,63 @@ +============================= +Inspecting server-sent events +============================= + +`Server-sent events <https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events>`_ allow for an inversion of the traditional client-initiated web request model, with a server sending new data to a web page at any time by pushing messages. From Firefox 82 onwards, you can inspect server-sent events and their message contents using the :doc:`Network Monitor <../index>`. This article shows you how. + +Inspecting the SSE network activity +*********************************** + +When you are viewing a document that is receiving server-sent events, you can go to the Network Monitor, select the file that is sending the server-sent events, and view the received messages in the *Response* tab on the right-hand panel. + +.. image:: basic-sse-message-view.png + :class: border + + +At the top of the panel there is a trash can icon, which allows you to trash the messages sent so far, and a filter field in which you can enter a text string to filter the displayed messages by. + + +Viewing the message contents +**************************** + +Select one of the messages listed in the *Response* tab, and you'll see the message contents displayed at the bottom of that same tab. + +.. image:: see-message-detail-view.png + :class: border + +In the above example, you can see that JSON and raw data representations of the content are shown. For a plain text message, you'd just see a raw data section. + +The supported data formats are as follows: + +- Mercure protocol +- JSON + + +Customizing the displayed columns +********************************* + +For each message, you'll see *Data* and Time columns by default, but you can right-click on the table header to bring up a context menu in which you can toggle columns on and off, and reset it back to its original state. + +.. image:: customize-columns.png + :class: border + +The available columns are as follows: + +- *Data*: A summary of the contained message data. +- *Size*: The size of the message. +- *Time*: A timestamp representing when the message was sent. +- *Event Name*: The name of the event type that resulted in the message being sent (e.g. ```message``` or ```ping```). +- *Last Event ID*: The ID of the last event that was fired. +- *Retry*: The interval after which failed message will be resent. + + +Network Monitor features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <../toolbar/index>` +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../performance_analysis/index>` +- :doc:`Throttling <../throttling/index>` +- :doc:`Inspecting web sockets <../inspecting_web_sockets/index>` diff --git a/devtools/docs/user/network_monitor/inspecting_server-sent_events/see-message-detail-view.png b/devtools/docs/user/network_monitor/inspecting_server-sent_events/see-message-detail-view.png Binary files differnew file mode 100644 index 0000000000..b6dcce5c15 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_server-sent_events/see-message-detail-view.png diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/index.rst b/devtools/docs/user/network_monitor/inspecting_web_sockets/index.rst new file mode 100644 index 0000000000..f69edfa770 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/index.rst @@ -0,0 +1,121 @@ +====================== +Inspecting web sockets +====================== + +Since Firefox 71, the :doc:`Network Monitor <../index>` has had the ability to inspect `web socket <https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API>`_ connections. This article explores what functionality the Web Socket Inspector makes available. + +Accessing the inspector +*********************** + +When you are inspecting a web app that utilizes a web socket connection, the web socket requests are listed in the list of requests in the Network Monitor along with all other requests. + +.. image:: wsi-filiter.png + :alt: WS filter in the network inspector + +You can use the WS button to filter the list for just web socket connections. Only requests with the `101 status code <https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/101>`_ (WebSocket Protocol Handshake) are visible, which indicates that the server is switching to a web socket connection. + +Clicking on a web socket request opens the usual sidebar to reveal additional details. Choose the **Response** tab to inspect web socket frames sent and received through the selected connection. + +.. image:: new-web-sockets.png + :alt: Messages panel in the web socket inspector + :class: border + +The live-updated table shows data for sent (green arrow) and received (red arrow) frames. Each frame expands on click, so you can inspect the formatted data. + +Pausing web socket traffic +************************** + +You can use the pause/resume button in the Network Monitor toolbar to stop intercepting web socket traffic. This allows you to capture only the frames that you are interested in. + +.. image:: ws-pause.png + :alt: Pausing the web socket inspector + +Filtering web socket frames +*************************** + +To focus on specific messages, frames can be filtered using the filter at the top of the *Response* panel. + +.. image:: ws_response_text_filter.png + :class: border + :alt: web socket frame filter + +There are also predefined filters, available in the tool bar of the Response pane, grouped into a selection list. + +.. image:: ws_filter_menu.png + :alt: Screenshot showing the filter menu for WebSocket messages + +The following filters are available: + +.. list-table:: + :widths: 20 80 + :header-rows: 0 + + * - **All** + - Displays all messages (by default, except control messages). + + * - **Sent** + - Displays only messages sent by the browser (by default, except control messages). + + * - **Received`** + - Displays only messages received from the server (by default, except control messages). + + * - **Control** + - (Available starting in Firefox 76). Displays messages for control frames (Ping, Pong, or Close). This filter can be combined with the others, to display, for example, only messages for control frames sent by the browser. + +Columns in the Response pane +**************************** + +In the **Response** pane, you can choose to show the following information about each frame: + +- Data +- Size +- Time +- OpCode +- MaskBit +- FinBit + +The *Data* and *Time* columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-clicking in the table header. + + +.. image:: ws_message_columns.png + :class: border + :alt: columns in the messages panel + + +Expanding each message +********************** + +Selecting a message in the list shows a preview of the data being sent in that message, at the bottom of the Response pane. + +.. image:: ws_expand_message.png + :class: border + :alt: web socket payload preview + + +Supported WS protocols +********************** + +The inspector currently supports the following web socket protocols: + +- Plain JSON +- Socket.IO +- SockJS +- SignalR +- WAMP +- STOMP +- STOMP inside SockJS + +The payload based on those protocols is parsed and displayed as an expandable tree for easy inspection, although you can of course still see the raw data (as sent over the wire) as well. + +Network Monitor features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <../toolbar/index>` +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../performance_analysis/index>` +- :doc:`Throttling <../throttling/index>` +- :doc:`Inspecting web sockets <../inspecting_web_sockets/index>` +- :doc:`Inspecting server-sent events <../inspecting_server-sent_events/index>` diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/new-web-sockets.png b/devtools/docs/user/network_monitor/inspecting_web_sockets/new-web-sockets.png Binary files differnew file mode 100644 index 0000000000..1d9c8f3450 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/new-web-sockets.png diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/ws-pause.png b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws-pause.png Binary files differnew file mode 100644 index 0000000000..606c40ebcd --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws-pause.png diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_expand_message.png b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_expand_message.png Binary files differnew file mode 100644 index 0000000000..d7dbc3f0b3 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_expand_message.png diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_filter_menu.png b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_filter_menu.png Binary files differnew file mode 100644 index 0000000000..8d284f29db --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_filter_menu.png diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_message_columns.png b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_message_columns.png Binary files differnew file mode 100644 index 0000000000..93972466a6 --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_message_columns.png diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_response_text_filter.png b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_response_text_filter.png Binary files differnew file mode 100644 index 0000000000..f82692f22c --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/ws_response_text_filter.png diff --git a/devtools/docs/user/network_monitor/inspecting_web_sockets/wsi-filiter.png b/devtools/docs/user/network_monitor/inspecting_web_sockets/wsi-filiter.png Binary files differnew file mode 100644 index 0000000000..bef54d39ca --- /dev/null +++ b/devtools/docs/user/network_monitor/inspecting_web_sockets/wsi-filiter.png diff --git a/devtools/docs/user/network_monitor/network_monitor.png b/devtools/docs/user/network_monitor/network_monitor.png Binary files differnew file mode 100644 index 0000000000..000bd945f9 --- /dev/null +++ b/devtools/docs/user/network_monitor/network_monitor.png diff --git a/devtools/docs/user/network_monitor/network_monitor_closeup.png b/devtools/docs/user/network_monitor/network_monitor_closeup.png Binary files differnew file mode 100644 index 0000000000..7037eb090a --- /dev/null +++ b/devtools/docs/user/network_monitor/network_monitor_closeup.png diff --git a/devtools/docs/user/network_monitor/network_monitor_new.png b/devtools/docs/user/network_monitor/network_monitor_new.png Binary files differnew file mode 100644 index 0000000000..24fba42a12 --- /dev/null +++ b/devtools/docs/user/network_monitor/network_monitor_new.png diff --git a/devtools/docs/user/network_monitor/network_performance.png b/devtools/docs/user/network_monitor/network_performance.png Binary files differnew file mode 100644 index 0000000000..44453cac8c --- /dev/null +++ b/devtools/docs/user/network_monitor/network_performance.png diff --git a/devtools/docs/user/network_monitor/performance_analysis/index.rst b/devtools/docs/user/network_monitor/performance_analysis/index.rst new file mode 100644 index 0000000000..f6eeacfc24 --- /dev/null +++ b/devtools/docs/user/network_monitor/performance_analysis/index.rst @@ -0,0 +1,35 @@ +==================== +Performance Analysis +==================== + +The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site. + +Using the Performance analysis tool +*********************************** + +To run the performance analysis tool click the stopwatch icon in the :doc:`Toolbar <../toolbar/index>` + +(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.) + +The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow: + +.. image:: network_performance.png + :class: border + +The results for each run are summarized in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type. + +To get back to the Network Monitor's list of network requests click the "Back" button on the left. + +Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see :ref:`only that resource type <request-list-filtering-requests>`. + +Network Monitor Features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <../toolbar/index>` +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../recording/index/>` +- :doc:`Network traffic recording <../recording/index/>` +- :doc:`Throttling <../throttling/index>` diff --git a/devtools/docs/user/network_monitor/performance_analysis/network_performance.png b/devtools/docs/user/network_monitor/performance_analysis/network_performance.png Binary files differnew file mode 100644 index 0000000000..44453cac8c --- /dev/null +++ b/devtools/docs/user/network_monitor/performance_analysis/network_performance.png diff --git a/devtools/docs/user/network_monitor/recording/index.rst b/devtools/docs/user/network_monitor/recording/index.rst new file mode 100644 index 0000000000..379ac43f42 --- /dev/null +++ b/devtools/docs/user/network_monitor/recording/index.rst @@ -0,0 +1,34 @@ +========================= +Network monitor recording +========================= + +You can pause and resume the monitoring of network traffic using the pause button. + +Pausing and resume network traffic recording +******************************************** + +The Network Monitor has a button that pauses and resumes recording of the current page's network traffic. This is useful in situations where, for example, you are trying to get a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. The pause button allows you to look at a certain snapshot. + +The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — |image1|. + +.. |image1| image:: pause-icon.png + :width: 20 + +You can see it here in context: + +.. image:: play-pause-network-traffic.png + :class: border + +Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again. + +Network Monitor features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <../toolbar/index>` +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../recording/index/>` +- :doc:`Performance analysis <../performance_analysis/index>` +- :doc:`Throttling <../throttling/index>` diff --git a/devtools/docs/user/network_monitor/recording/pause-icon.png b/devtools/docs/user/network_monitor/recording/pause-icon.png Binary files differnew file mode 100644 index 0000000000..d8aa4d5c77 --- /dev/null +++ b/devtools/docs/user/network_monitor/recording/pause-icon.png diff --git a/devtools/docs/user/network_monitor/recording/play-pause-network-traffic.png b/devtools/docs/user/network_monitor/recording/play-pause-network-traffic.png Binary files differnew file mode 100644 index 0000000000..fa36656e2f --- /dev/null +++ b/devtools/docs/user/network_monitor/recording/play-pause-network-traffic.png diff --git a/devtools/docs/user/network_monitor/request_details/copy-response-headers-fx78.png b/devtools/docs/user/network_monitor/request_details/copy-response-headers-fx78.png Binary files differnew file mode 100644 index 0000000000..8a43bce10a --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/copy-response-headers-fx78.png diff --git a/devtools/docs/user/network_monitor/request_details/highlight-samesite-attribute.png b/devtools/docs/user/network_monitor/request_details/highlight-samesite-attribute.png Binary files differnew file mode 100644 index 0000000000..244ffabfa0 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/highlight-samesite-attribute.png diff --git a/devtools/docs/user/network_monitor/request_details/html_formatted_response.png b/devtools/docs/user/network_monitor/request_details/html_formatted_response.png Binary files differnew file mode 100644 index 0000000000..b40149f02b --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/html_formatted_response.png diff --git a/devtools/docs/user/network_monitor/request_details/html_raw_response.png b/devtools/docs/user/network_monitor/request_details/html_raw_response.png Binary files differnew file mode 100644 index 0000000000..7f9b399b31 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/html_raw_response.png diff --git a/devtools/docs/user/network_monitor/request_details/index.rst b/devtools/docs/user/network_monitor/request_details/index.rst new file mode 100644 index 0000000000..67a6fbc754 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/index.rst @@ -0,0 +1,501 @@ +======================= +Network request details +======================= + +The request details pane appears when you click on a network request in the request list. This pane provides more detailed information about the request. + +Network request details +*********************** + +Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request. + +.. image:: network-details-fx78.png + :alt: Screenshot of the Network Request details pane, without callouts for the close-pane button and the detail tabs + :class: center + +.. note:: + + The screenshots and descriptions in this section reflect Firefox 78. Earlier versions appeared similarly, but might not include some functionality. + + +The tabs at the top of this pane enable you to switch between the following pages: + +- :ref:`Headers <network-monitor-request-details-headers-tab>` +- **Messages** (only for WebSocket items) +- :ref:`Request <network-monitor-request-details-request-tab>` +- :ref:`Response <network-monitor-request-details-response-tab>` +- :ref:`Cache <network-monitor-request-details-cache-tab>` +- :ref:`Timings <network-monitor-request-details-timings-tab>` +- :ref:`Security <network-monitor-request-details-security-tab>` +- :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). + + +Clicking the icon at the right-hand end of the :doc:`toolbar <../toolbar/index>` closes the details pane and returns you to the list view. + + +.. _network-monitor-request-details-headers-tab: + +Headers tab +----------- + +The Headers tab has a toolbar, followed by three main sections. + +This includes: + + +- Information about the request + + - Status: The response status code for the request; click the "?" icon to go to the reference page for the status code. + - Version: The version of HTTP used. + - Transferred: The amount of data transferred for the request. + - Referrer policy: The value of the `Referrer-policy header <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy>`_. + +- **HTTP Response headers** +- **HTTP Request headers** + +Each section has a disclosure triangle to expand the section to show more information. + + +Headers toolbar +~~~~~~~~~~~~~~~ + +Using the Headers toolbar, you can: + + +- Filter the headers in the Response Headers and Request Headers sections. +- **Block** the domain involved in this request. The domain is added to the :ref:`Blocking sidebar <network_monitor_blocking_specific_urls>`. +- Resend the request. The **Resend** button opens a menu with two items: + + - **Resend**: Resends the request. + - **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. + + +Request Information +~~~~~~~~~~~~~~~~~~~ + +The following information is shown only when the section is expanded: + +- **Scheme**: The scheme used in the URL +- **Host**: The server involved in the request +- **Filename**: The full path to the file requested +- **Address**: The IP address of the host + +The following information is shown in both the collapsed and the expanded states: + + +- **Status:** The `HTTP response code <https://developer.mozilla.org/en-US/docs/Web/HTTP/Status>`_ for the request. +- **Version**: The HTTP version used +- **Transferred**: The amount of data transferred with the request +- 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) +- **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. + + +Response headers +~~~~~~~~~~~~~~~~ + +The 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. + +A **Raw** toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text. + +.. note:: + 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.) + + +.. image:: response-headers-fx78.png + :alt: Screenshot showing the Request headers section of the Request details pane + :class: border + +You can copy some or all of the response header in JSON format by using the context menu: + +.. image:: copy-response-headers-fx78.png + :alt: Screenshot showing the Response headers pane, and its context menu with "Copy" and "Copy all" items + :class: border + +If 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): + + +.. code-block:: 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" + } + ] + } + } + +Request headers +~~~~~~~~~~~~~~~ + +The 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. + +A **Raw** toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text. + +.. image:: request-headers-fx78.png + :alt: Screenshot showing the Request headers section of the Request details pane + :class: border + + +.. _network-monitor-request-details-cookies-tab: + +Cookies tab +----------- + +This tab lists full details of any cookies sent with the request or response: + +.. image:: network_cookies.png + :class: border + +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. + +.. image:: highlight-samesite-attribute.png + :alt: 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 <https://bugzilla.mozilla.org/show_bug.cgi?id=1452715>`_). + + +.. _network-monitor-request-details-request-tab: + +Request tab +----------- + +Request shows the complete request parameters, by default, in a formatted view: + +.. image:: json_formatted_request.png + :class: border + + +Switch the toggle button to have the raw view presented: + +.. image:: json_raw_request.png + :class: border + + +.. _network-monitor-request-details-response-tab: + +Response tab +------------ + +The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text: + +.. image:: html_formatted_response.png + :class: border + + +The 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: + +.. image:: html_raw_response.png + :class: border + + +If the response is JSON, it will be shown as an inspectable object: + +.. image:: json_formatted_response.png + :class: border + + +In the raw response view the response will be shown as a string: + +.. image:: json_raw_response.png + :class: border + + +If the response is an image, the tab displays a preview: + +.. image:: response_pane_image.png + :class: border + + +If the response is a web font, the tab also displays a preview: + +.. image:: response_font.png + :class: border + + +For 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>`. + + +.. _network-monitor-request-details-cache-tab: + +Cache tab +--------- + +If the response is cached (i.e. a 304), the Cache tab displays details about that cached resource. + +.. image:: response_cache.png + :class: border + +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. + + +.. _network-monitor-request-details-timings-tab: + +Timings tab +----------- + +The 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. + +.. image:: network-timings-tab.png + :class: border + + +This tab can include the following sections. + + +Queued, Started, Downloaded +~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +New in Firefox 72, we now show the following timings at the top of the Timings tab, making dependency analysis a lot easier: + +- Queued: When the resource was queued for download. +- Started: When the resource started downloading. +- Downloaded: When the resource finished downloading. + + +.. note:: + 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>`_). + + +Request Timing +~~~~~~~~~~~~~~ + +The *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: + + +.. list-table:: + :widths: 20 80 + :header-rows: 0 + + * - 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 <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. + + * - 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). + + +Server Timing +~~~~~~~~~~~~~ + +New 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.). + +The 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*. + + +.. _network-monitor-request-details-security-tab: + +Security tab +------------ + +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: + +.. image:: network_security.png + :alt: border + +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 + +.. image:: security-warning.png + :class: center + + +.. _network-monitor-request-details-stack-trace-tab: + +Stack trace tab +--------------- + +Stack traces are shown in the *Stack Trace* tab, for responses that have a stack trace of course. + +.. image:: network_stack_trace.png + :class: border + + +Network Monitor Features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <../toolbar/index>` +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../performance_analysis/index>` +- :doc:`Throttling <../throttling/index>` +- :doc:`Inspecting web sockets <../inspecting_web_sockets/index>` diff --git a/devtools/docs/user/network_monitor/request_details/json_formatted_request.png b/devtools/docs/user/network_monitor/request_details/json_formatted_request.png Binary files differnew file mode 100644 index 0000000000..88c544bd9a --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/json_formatted_request.png diff --git a/devtools/docs/user/network_monitor/request_details/json_formatted_response.png b/devtools/docs/user/network_monitor/request_details/json_formatted_response.png Binary files differnew file mode 100644 index 0000000000..500d3597f4 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/json_formatted_response.png diff --git a/devtools/docs/user/network_monitor/request_details/json_raw_request.png b/devtools/docs/user/network_monitor/request_details/json_raw_request.png Binary files differnew file mode 100644 index 0000000000..de12a3d284 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/json_raw_request.png diff --git a/devtools/docs/user/network_monitor/request_details/json_raw_response.png b/devtools/docs/user/network_monitor/request_details/json_raw_response.png Binary files differnew file mode 100644 index 0000000000..d02e896d03 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/json_raw_response.png diff --git a/devtools/docs/user/network_monitor/request_details/network-details-fx78.png b/devtools/docs/user/network_monitor/request_details/network-details-fx78.png Binary files differnew file mode 100644 index 0000000000..c97f52c350 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/network-details-fx78.png diff --git a/devtools/docs/user/network_monitor/request_details/network-timings-tab.png b/devtools/docs/user/network_monitor/request_details/network-timings-tab.png Binary files differnew file mode 100644 index 0000000000..e5cbfa4432 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/network-timings-tab.png diff --git a/devtools/docs/user/network_monitor/request_details/network_cookies.png b/devtools/docs/user/network_monitor/request_details/network_cookies.png Binary files differnew file mode 100644 index 0000000000..c20a83539f --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/network_cookies.png diff --git a/devtools/docs/user/network_monitor/request_details/network_response.png b/devtools/docs/user/network_monitor/request_details/network_response.png Binary files differnew file mode 100644 index 0000000000..080c8c5730 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/network_response.png diff --git a/devtools/docs/user/network_monitor/request_details/network_security.png b/devtools/docs/user/network_monitor/request_details/network_security.png Binary files differnew file mode 100644 index 0000000000..5ca146c615 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/network_security.png diff --git a/devtools/docs/user/network_monitor/request_details/network_stack_trace.png b/devtools/docs/user/network_monitor/request_details/network_stack_trace.png Binary files differnew file mode 100644 index 0000000000..29ee5f91b6 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/network_stack_trace.png diff --git a/devtools/docs/user/network_monitor/request_details/params.png b/devtools/docs/user/network_monitor/request_details/params.png Binary files differnew file mode 100644 index 0000000000..9f5ceb0ccc --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/params.png diff --git a/devtools/docs/user/network_monitor/request_details/request-headers-fx78.png b/devtools/docs/user/network_monitor/request_details/request-headers-fx78.png Binary files differnew file mode 100644 index 0000000000..581c4e8200 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/request-headers-fx78.png diff --git a/devtools/docs/user/network_monitor/request_details/response-headers-fx78.png b/devtools/docs/user/network_monitor/request_details/response-headers-fx78.png Binary files differnew file mode 100644 index 0000000000..9e9f4a114c --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/response-headers-fx78.png diff --git a/devtools/docs/user/network_monitor/request_details/response_cache.png b/devtools/docs/user/network_monitor/request_details/response_cache.png Binary files differnew file mode 100644 index 0000000000..6b69e7990c --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/response_cache.png diff --git a/devtools/docs/user/network_monitor/request_details/response_font.png b/devtools/docs/user/network_monitor/request_details/response_font.png Binary files differnew file mode 100644 index 0000000000..28aa850026 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/response_font.png diff --git a/devtools/docs/user/network_monitor/request_details/response_json.png b/devtools/docs/user/network_monitor/request_details/response_json.png Binary files differnew file mode 100644 index 0000000000..a3e74c7472 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/response_json.png diff --git a/devtools/docs/user/network_monitor/request_details/response_pane_image.png b/devtools/docs/user/network_monitor/request_details/response_pane_image.png Binary files differnew file mode 100644 index 0000000000..4dc1e7485f --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/response_pane_image.png diff --git a/devtools/docs/user/network_monitor/request_details/security-warning.png b/devtools/docs/user/network_monitor/request_details/security-warning.png Binary files differnew file mode 100644 index 0000000000..1685395c86 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_details/security-warning.png diff --git a/devtools/docs/user/network_monitor/request_list/404_filter.png b/devtools/docs/user/network_monitor/request_list/404_filter.png Binary files differnew file mode 100644 index 0000000000..a70e1ce9fe --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/404_filter.png diff --git a/devtools/docs/user/network_monitor/request_list/afterblocking.png b/devtools/docs/user/network_monitor/request_list/afterblocking.png Binary files differnew file mode 100644 index 0000000000..71f62ecced --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/afterblocking.png diff --git a/devtools/docs/user/network_monitor/request_list/beforeblocking.png b/devtools/docs/user/network_monitor/request_list/beforeblocking.png Binary files differnew file mode 100644 index 0000000000..044d4b11bd --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/beforeblocking.png diff --git a/devtools/docs/user/network_monitor/request_list/blocked_nw_icon.png b/devtools/docs/user/network_monitor/request_list/blocked_nw_icon.png Binary files differnew file mode 100644 index 0000000000..c2ed85b941 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/blocked_nw_icon.png diff --git a/devtools/docs/user/network_monitor/request_list/har-dropdown.png b/devtools/docs/user/network_monitor/request_list/har-dropdown.png Binary files differnew file mode 100644 index 0000000000..93e309e247 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/har-dropdown.png diff --git a/devtools/docs/user/network_monitor/request_list/http.svg b/devtools/docs/user/network_monitor/request_list/http.svg new file mode 100644 index 0000000000..fc7062c9c1 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/http.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><style>.icon-default{fill:#999}</style><defs><rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4"/><rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2"/><rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1"/><mask id="mask-clasp-cutout"><path d="M0 0h16v16H0z"/><use xlink:href="#shape-lock-clasp-outer" fill="#fff"/><use xlink:href="#shape-lock-clasp-inner"/><path stroke="#000" stroke-width="2" d="M2 13L14 1.5M2 15L14 3.5"/><rect x="3" y="7" width="10" height="7" rx="1" ry="1"/></mask><mask id="mask-base-cutout"><path d="M0 0h16v16H0z"/><use xlink:href="#shape-lock-base" fill="#fff"/><path stroke="#000" stroke-width="1.8" d="M2 14.8L14 3.2"/></mask></defs><use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default"/><use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)" class="icon-default"/><path stroke="#d92d21" stroke-width="1.8" d="M2 14.1L14 2.5"/></svg>
\ No newline at end of file diff --git a/devtools/docs/user/network_monitor/request_list/https-failed.svg b/devtools/docs/user/network_monitor/request_list/https-failed.svg new file mode 100644 index 0000000000..bfc8eeee58 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/https-failed.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="gray" d="M14.8 12.5L9.3 1.9C9 1.3 8.5 1 8 1s-1 .3-1.3.9L1.2 12.5c-.3.6-.3 1.2 0 1.7s.8.8 1.4.8h10.8c.6 0 1.1-.3 1.4-.8.3-.5.3-1.1 0-1.7z"/><path fill="#fff" d="M8 11c-.8 0-1.5.7-1.5 1.5S7.2 14 8 14s1.5-.7 1.5-1.5S8.8 11 8 11zm0-1c.6 0 1-.4 1-1l.2-4.2c0-.7-.5-1.2-1.2-1.2s-1.2.5-1.2 1.2L7 9c0 .6.4 1 1 1z"/></svg>
\ No newline at end of file diff --git a/devtools/docs/user/network_monitor/request_list/https-weak.svg b/devtools/docs/user/network_monitor/request_list/https-weak.svg new file mode 100644 index 0000000000..7206803009 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/https-weak.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><style>.icon-default{fill:gray}</style><defs><rect id="shape-lock-clasp-outer" x="2" y="1" width="8" height="10" rx="4" ry="4"/><rect id="shape-lock-clasp-inner" x="4" y="3" width="4" height="6" rx="2" ry="2"/><rect id="shape-lock-base" x="1" y="6" width="10" height="7" rx="1" ry="1"/><mask id="mask-clasp-cutout"><path d="M0 0h16v16H0z"/><use xlink:href="#shape-lock-clasp-outer" fill="#fff"/><use xlink:href="#shape-lock-clasp-inner"/></mask></defs><use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default"/><use xlink:href="#shape-lock-base" class="icon-default"/><path fill="#fff" d="M10.5 5c-.7 0-1.4.4-1.7 1.2L5.3 13c-.4.7-.4 1.4 0 2 .4.6 1 1 1.8 1H14c.8 0 1.4-.4 1.8-1 .3-.6.3-1.4 0-2l-3.5-6.8c-.4-.8-1.1-1.2-1.8-1.2z"/><path fill="#ffbf00" d="M14.8 13.4l-3.5-6.8c-.1-.4-.4-.6-.8-.6-.3 0-.7.2-.9.6l-3.5 6.8c-.2.4-.2.8 0 1.1.2.3.5.5.9.5h7c.4 0 .7-.2.9-.5.2-.3.1-.7-.1-1.1z"/><path fill="#fff" d="M10 8.5c0-.3.2-.5.5-.5s.5.2.5.5l-.2 2.5h-.6L10 8.5z"/><circle fill="#fff" cx="10.5" cy="12.5" r=".75"/></svg>
\ No newline at end of file diff --git a/devtools/docs/user/network_monitor/request_list/https.svg b/devtools/docs/user/network_monitor/request_list/https.svg new file mode 100644 index 0000000000..e5da9f4e38 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/https.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><style>.icon-default{fill:#4d9a26}</style><defs><rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4"/><rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2"/><rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1"/><mask id="mask-clasp-cutout"><path d="M0 0h16v16H0z"/><use xlink:href="#shape-lock-clasp-outer" fill="#fff"/><use xlink:href="#shape-lock-clasp-inner"/></mask></defs><use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default"/><use xlink:href="#shape-lock-base" class="icon-default"/></svg>
\ No newline at end of file diff --git a/devtools/docs/user/network_monitor/request_list/image_preview.png b/devtools/docs/user/network_monitor/request_list/image_preview.png Binary files differnew file mode 100644 index 0000000000..fda8e08cf2 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/image_preview.png diff --git a/devtools/docs/user/network_monitor/request_list/index.rst b/devtools/docs/user/network_monitor/request_list/index.rst new file mode 100644 index 0000000000..c0345290c8 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/index.rst @@ -0,0 +1,497 @@ +==================== +Network request list +==================== + +The request list of the Network Monitor shows a list of all the network requests made in the course of loading the page. + + +Network request list +-------------------- + +By 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: + +.. image:: network_request_list.png + :class: border + +By 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>`. + + +Network request columns +----------------------- + +You 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. + +You 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. + +The **Reset Columns** command on the context menu also resets the width of the columns to the default values. + +.. raw:: html + + <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> + <br/> + <br/> + +Clicking 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. + +.. image:: network_monitor_columns_menu.png + :alt: Screenshot of the context menu for selecting columns to display in the Network monitor + :class: center + + +Here is a list of all available columns: + +.. |image1| image:: blocked_nw_icon.png + :alt: Red circle with a diagonal slash + :width: 20 + +.. |image2| image:: nwmon-turtle-tooltip.png + :alt: Screenshot of a network request with a turtle icon, and a tooltip explaining the problem + :class: border + + +- **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. +- **Method**: The HTTP request method used. +- **Domain**: Domain of the path requested. + + - 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 + - Hover over the domain to see the IP address. + - 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>`. + +- **File**: The basename of the file requested. + + - (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. + - |image2| + +- **URL**: The `URL <https://developer.mozilla.org/en-US/docs/Glossary/URL>`_ of the file requested. +- **Protocol:** The network protocol used to transfer the data, this column is hidden by default. +- **Scheme:** The scheme (https/http/ftp/...) of the path requested. This column is hidden by default. +- **Remote IP**: The IP address of the server answering the request. This column is hidden by default. +- **Type**: ``Content-type`` of the response. +- **Cookies:** The number of request cookies associated to the request. This column is hidden by default. This is new in Firefox 55. +- **Set-Cookies:** The number of response cookies associated to the request. This column is hidden by default. This is new in Firefox 55. +- **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. + + - 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". + - 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#>`_. + - 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]". + +- **Size**: The size of the transferred resource. + + +Image thumbnails +~~~~~~~~~~~~~~~~ + +If the request is for an Image, hovering over its filename shows a preview of the image in a tooltip: + +.. image:: image_preview.png + :class: border + + +.. _network-monitor-request-list-security-icons: + +Security icons +~~~~~~~~~~~~~~ + +The Network Monitor displays an icon in the Domain column: + +.. image:: network_message_list_63.png + :class: border + + +This gives you extra information about the security status of the request: + +.. |image3| image:: https.svg + :width: 20 + +.. |image4| image:: https-weak.svg + :width: 20 + +.. |image5| image:: https-failed.svg + :width: 20 + +.. |image6| image:: http.svg + :width: 20 + +.. |image7| image:: localhost.svg + :width: 20 + +.. |image8| image:: tracker_icon.png + :width: 20 + + +.. list-table:: + :widths: 25 75 + :header-rows: 1 + + * - Icon + - Meaning + + * - |image3| + - HTTPS + + * - |image4| + - Weak HTTPS (for example, a weak cipher was used) + + * - |image5| + - Failed HTTPS (for example, a certificate was invalid) + + * - |image6| + - HTTP + + * - |image7| + - Localhost + + * - |image8| + - Indicates that the URL belongs to a known tracker that would be blocked with content blocking enabled. + + +Timeline +-------- + +The request list also displays a timeline for the different parts of each request. + +.. image:: timeline.png + :class: border + + +Each 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. + +Starting in Firefox 45, the timeline also contains two vertical lines: + + +- 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. +- 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. + + +.. _network_monitor_blocking_specific_urls: + +Blocking specific URLs +---------------------- + +If 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. + + +1. Click the **Request Blocking** icon in the toolbar. This opens the **Blocking** sidebar. (Click the icon again when you want to close the sidebar.) + + .. image:: request_blocking_panel.png + :alt: Screen shot of the Blocking panel, with arrows indicating the panel and the Request Blocking toolbar icon + :class: center + +2. Enter a string in the field with the placeholder text *Block resource when URL contains*. +3. Reload the page to test it with the specified URL blocked. + + +Other actions you can take with Request Blocking: + + +- To turn all request blocking off or on: Toggle the checkbox next to Enable Request Blocking. +- To turn a specific block off or on: Toggle the checkbox next to that item. +- To delete a blocked item, click the X icon that appears when you focus the item. +- (Starting with Firefox 77) Right-click any item in the list and choose from the context menu: + + - **Enable all** enables blocking of all items in the list. + - **Disable all** disables blocking of all items in the list. + - **Remove all** deletes all items in the list. + + +Blocking a specific URL from the request list +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +You can also block a URL from the request list: + +.. image:: beforeblocking.png + :class: border + + +1. Hover over the item you want to block in the Request List. +2. Select Block URL from the context menu. +3. 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. + +.. image:: afterblocking.png + :class: border + + +Stop blocking a URL from the Request List +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +.. image:: unblockurl.png + :class: border + +1. Hover over the item. +2. Select **Unblock URL**. +3. Now when you refresh the page, the item will once enabled. + + +.. note:: + (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. + + +.. _request-list-filtering-requests: + +Filtering requests +****************** + +You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, or by request properties. + +.. |br| raw:: html + + <br/> + + +.. list-table:: + :widths: 25 75 + :header-rows: 1 + + * - Filter type + - How to apply + + * - Content type + - Use the buttons in the :doc:`toolbar <../toolbar/index>` (**HTML**, **CSS**, **JS**). + + * - `XHR <https://developer.mozilla.org/en-US/docs/Glossary/XHR_(XMLHttpRequest)>`_ requests + - Use the **XHR** button in the :doc:`toolbar <../toolbar/index>`. + + * - `WebSocket <https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API>`_ connections + - 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. + + * - URL + - 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. + + * - Request properties + - Use the search box in the :doc:`toolbar <../toolbar/index>`. See next section. + + +.. _request-list-filtering-by-properties: +.. _request-list-requst-list-cause-column: + +Filtering by properties +~~~~~~~~~~~~~~~~~~~~~~~ + +The 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. + + +.. list-table:: + :widths: 20 40 40 + :header-rows: 1 + + * - Keyword + - Meaning + - Examples + + * - ``status-code`` + - Shows resources that have the specific HTTP status code. + - ``status-code:304`` + + * - ``method`` + - Shows resources that have were requested via the specific HTTP request method. + - ``method:post`` + + * - ``domain`` + - Shows resources coming from a specific domain. + - ``domain:mozilla.org`` + + * - ``remote-ip`` + - Shows resources coming from a server with the specified IP. + - ``remote-ip:63.245.215.53`` |br| |br| ``remote-ip:[2400:cb00:2048:1::6810:2802]`` + + * - ``cause`` + - Shows resources matching a specific cause type. The types can be found in the description of the cause column. + - ``cause:js`` |br| |br| ``cause:stylesheet`` |br| |br| ``cause:img`` + + * - ``transferred`` + - 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``. + - ``transferred:1k`` + + * - ``size`` + - 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``. + - ``size:2m`` + + * - ``larger-than`` + - 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``. + - ``larger-than:2000`` |br| |br| ``-larger-than:4k`` + + * - ``mime-type`` + - Shows resources that match the specified MIME type. + - ``mime-type:text/html`` |br| |br| ``mime-type:image/png`` |br| |br| ``mime-type:application/javascript`` + + * - ``is`` + - ``is:cached`` and ``is:from-cache`` shows only resources coming from cache. ``is:running`` shows only resources, which are currently being transferred. + - ``is:cached`` |br| |br| ``-is:running`` + + * - ``scheme`` + - Shows resources transferred via the given scheme. + - ``scheme:http`` + + * - ``has-response-header`` + - Shows resources that contain the specified HTTP response header. + - ``has-response-header:cache-control`` |br| |br| ``has-response-header:X-Firefox-Spdy`` + + * - ``set-cookie-domain`` + - Shows the resources that have a ``Set-Cookie`` header with a ``Domain`` attribute that matches the specified value. + - ``set-cookie-domain:.mozilla.org`` + + * - ``set-cookie-name`` + - Shows the resources that have a ``Set-Cookie`` header with a name that matches the specified value. + - ``set-cookie-name:_ga`` + + * - ``set-cookie-value`` + - Shows the resources that have a ``Set-Cookie`` header with a value that matches the specified value. + - ``set-cookie-value:true`` + + * - ``regexp`` + - Shows the resources having a URL that matches the given `regular expression <https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression>`_. + - ``regexp:\d{5}`` |br| |br| ``regexp:mdn|mozilla`` + + +For 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: + +.. image:: 404_filter.png + :class: border + + +Search in requests +------------------ + +Use the *Search* panel to run a full-text search on headers and content. + + +1. Click the **Search** icon in the toolbar. This opens the Search sidebar. + +.. image:: search_panel.png + :alt: Screenshot of the Network monitor, with the request search sidebar displayed, and arrows indicating the search toolbar icon and the search box. + :class: border + +2. 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. + +.. image:: search_panel_matches.png + :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. + :class: border + + +Other ways to use the search panel: + + +- To clear the search string: click the **X** icon in the search field. +- To make the search case sensitive: click the **Case Sensitive** (**Aa**) icon next to the search field. +- To close the search panel, do one of the following: + + - Click the **X** icon next to the search field. + - Click the **Search** icon in the Network Monitor toolbar. + + +.. _network-monitor-request-list-edit-and-resend: + +Context menu +------------ + +Context-clicking on a row in the list displays a context menu with the following options: + +.. list-table:: + :widths: 25 75 + :header-rows: 1 + + * - Menuitem + - Description + + * - Copy > Copy URL + - Copies the URL. + + * - Copy > Copy as cURL + - 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. + + * - Copy > Copy as Fetch + - 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. + + * - Copy > Copy Request Headers + - Copies the request's header to the clipboard. + + * - Copy > Copy Response Headers + - Copies the headers of the response for this request, to the clipboard. + + * - Copy > Copy Response + - Copies the entire response that was sent for this request. + + * - Copy > Copy All As HAR + - 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. + + * - Save All As HAR + - 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. + + * - Resend + - Resends the request as it was originally sent with no changes made. + + * - Edit and Resend + - Opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request. + + * - Block URL + - Blocks the selected URL for future requests. See :ref:`Blocking a specific URL from the Request List <network_monitor_blocking_specific_urls>`. + + * - Open in New Tab + - Resends the request in a new tab — very useful for debugging asynchronous requests. + + * - Open in Style Editor + - For a CSS resource, opens it in the :doc:`Style Editor <../../style_editor/index>`. + + * - Start :doc:`Performance Analysis <../performance_analysis/index>` + - + + * - Use as Fetch in Console + - Submits the request as a call to the `fetch() <https://developer.mozilla.org/en-US/docs/Web/API/fetch>` method in the console. + + +.. _request-list-copy-as-curl: + +Copy as cURL +~~~~~~~~~~~~ + +The command may include the following options: + +.. list-table:: + :widths: 25 75 + :header-rows: 0 + + * - ``-X [METHOD]`` + - If the method is not GET or POST + + * - ``--data`` + - For URL encoded request parameters + + * - ``--data-binary`` + - For multipart request parameters + + * - ``--http/VERSION`` + - If the HTTP version is not 1.1 + + * - ``-I`` + - If the method is HEAD + + * - ``-H`` + - 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. + + + * - ``--globoff`` + - Suppresses cURL's globbing (wildcard matching) feature if the copied URL includes square bracket characters (``[`` or ``]``). (Starting in Firefox 76) + + + +Managing HAR data +~~~~~~~~~~~~~~~~~ + +The 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. + +.. image:: har-dropdown.png + :class: border + + +Network Monitor features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <../toolbar/index>` +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../performance_analysis/index>` +- :doc:`Throttling <../throttling/index>` +- :doc:`Inspecting web sockets <../inspecting_web_sockets/index>` +- :doc:`Inspecting server-sent events <../inspecting_server-sent_events/index>` diff --git a/devtools/docs/user/network_monitor/request_list/localhost.svg b/devtools/docs/user/network_monitor/request_list/localhost.svg new file mode 100644 index 0000000000..4e321aadcd --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/localhost.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle fill="#a6a6a6" cx="8" cy="8" r="7"/><path fill="#fff" d="M6.316 2.741a.125.125 0 00-.054.007.042.042 0 00-.013.011l.018-.001c.018-.004.031-.016.05-.017zm.023.859c.023-.029-.032-.053-.062-.051.008-.035.052-.053.04-.097-.01-.046-.066-.037-.096-.012-.026.023-.04.063-.063.09-.013.015-.036.02-.045.038-.008.017.002.046 0 .065a.122.122 0 00.103-.032l.017-.008c-.004.003-.006.01-.008.014.018.022.097.016.114-.007zm.037-1.227c-.002.054.05.06.09.081-.013.031-.055.03-.075.055-.024.031.02.058.042.072.042.026.018.056.01.093-.011.052.1.038.125.037.042-.002.11.005.15-.015.043-.024.066-.077.111-.103.038-.022.091-.034.132-.019.044.015.039.071.074.095.042.029.087.038.123-.005.022-.027.073-.061.075-.09.004-.051.019-.091.075-.102.045-.009.035.035.067.043.07.018.103-.196.18-.133.017.015.022.073.053.068.031-.005.032-.051.066-.052.01.031-.058.069-.067.103.042-.035.063-.03.111-.035.013.033-.082.087-.106.092-.035.009-.056-.011-.082.008-.021.014-.05.013-.074.015-.035.004-.1.05-.099.088 0 .015.012.049 0 .061-.013.013-.041.001-.044-.012-.03.044-.068-.033-.093.029.04.01.076.048.12.059l.13.034c.072.022.18-.065.234-.107a.403.403 0 00.133-.19c.015-.069.09-.148.075-.216-.014-.064-.024-.094.048-.117.03-.01.105-.026.115-.061.016-.052-.147-.038-.171-.05-.082-.037-.118-.078-.212-.041-.05.019-.098.035-.15.049-.026.007-.053.009-.067.032a.06.06 0 01-.024.021c-.043.017.01-.064.015-.069.013-.016.036-.065-.008-.054-.065.015-.113.115-.183.12-.053.004-.036-.043-.022-.07.026-.049-.05-.055-.083-.055-.048 0-.083.027-.129.032-.042.004-.091.012-.134.011-.085-.003-.14.047-.225.019-.089-.029-.184.045-.27.055-.029.004-.07-.002-.082.032-.01.028 0 .071.022.092l.007-.006c-.02.019-.021.046-.049.056-.026.009-.053.044-.067.068-.01.018-.041.093.012.054.038-.029.06-.083.121-.072zM3.184 7.108c-.091-.066-.297-.082-.272-.236.016-.094.113-.167.19-.213a.544.544 0 01.333-.052c.028.003.08-.002.095.02a.075.075 0 00.036.022c.031.009.063.01.094.016.047.009.081.05.128.016.055-.038.064-.046.13-.038.059.007.094-.038.144-.034.015.001.03.004.041.009.005-.017.012-.032.023-.035.024-.007.079.053.104.058.066.014.062-.032.066-.079.033-.006.049.039.078.011 0 .009.005.023.005.032a.015.015 0 00.02-.001.018.018 0 00.001-.016c.016.005.024-.006.026-.025.012.001.03-.006.042-.004.01-.034.029-.079.004-.11l.02-.004c0-.034.023-.049.024-.076-.036-.005-.075-.003-.112-.002.022-.02.074-.064.079-.091.01-.048-.052-.077-.047-.134.006.03.04.099.07.109.072.024.051-.047.056-.084.018-.117.122-.02.124.041.03-.07.107.008.072.068-.017.029-.04.018-.018.056.014.027.036.028.068.021a.122.122 0 00.014-.053c.055-.017.09.048.059.087a.553.553 0 01.125-.054c-.026-.09-.052-.178-.036-.274.004-.021.007-.045.023-.061.02-.021-.005-.013-.007-.027-.006-.042.039-.085.055-.123-.046-.01-.004-.102.027-.118.034-.017.132.011.14-.016.019.011.038.027.061.027.055.001.091.002.129.046.018.023.046.074.08.078-.001.038.042.066-.003.098-.036.025-.085.019-.1.067-.01.03-.039.044.005.065.019.01.042.012.063.012.005.029.02.068.057.063.073-.009.089-.101.147-.132.095-.05.08.166.162.112.02-.013.02-.068.03-.089a.703.703 0 01.07-.128c.037-.05.083-.102.067-.167-.01-.036-.078-.051-.11-.076a.368.368 0 01-.096-.107c-.014-.026-.022-.035 0-.048.012-.007.008-.021.004-.031-.024-.05-.088-.139.001-.17.02-.007.062-.071.065-.096.005-.042-.059-.08-.03-.122.02-.031.073-.051.1-.082a.086.086 0 01.047-.032c.001-.017.005-.036.02-.047.023-.018.06-.009.089-.018.045-.014.065-.061.1-.087.03-.022.063-.014.095-.03.017-.008.024-.026.04-.034.042-.02.09.012.108.047.044.084.1.214.226.18a.158.158 0 00.105-.104c.015-.046-.003-.084 0-.129.004-.08.082-.131.091-.21-.059.001-.028-.036-.048-.07-.022-.038-.071-.01-.104-.016.034-.081.034-.109-.045-.148-.035-.017-.092-.097-.119-.094.022-.03.073.02.09.034a.168.168 0 00.113.052.107.107 0 01-.012-.083c.009-.022-.013-.045-.011-.073.055.071.046.152.078.23.013.033.045.055.06.089.017.043.005.042.043.068.022.016.03.044.034.069.007.044.023.025.047.05.013.015.049.017.042.048-.005.022-.02.04-.023.063-.009.066.12-.024.133-.033.028-.021.073-.025.095-.05.023-.026.018-.064.042-.088.03-.031.058-.01.093-.016.042-.006.077-.039.108-.064.065-.055.106-.115.16-.178-.023.006-.104.065-.109.01-.03 0-.101-.005-.112-.039-.01-.025-.006-.053-.006-.078-.001-.027-.034-.018-.055-.032-.044-.028-.066-.08-.112-.104a.458.458 0 01-.163-.169c-.025-.039-.116-.118-.11-.165.005-.031.03-.064.028-.095 0-.028-.022-.043-.02-.074.004-.036-.083-.099-.007-.106.023-.002.027-.031.054-.047.03-.018.023-.034.055-.025.053.016.089-.042.125-.073.06-.054-.037-.055-.042-.096-.005-.041-.028-.071-.035-.119-.004-.035-.037-.021-.056-.012-.025.012-.051-.006-.076-.011-.022-.005-.041-.043-.069-.031-.02.01-.02.035-.049.032-.022-.002-.036-.023-.057-.027-.034-.004-.004.028-.042.031-.026.002-.112-.034-.114 0-.027-.046-.038.032-.066.04-.032.009-.065.001-.097.013-.069.028-.046.097.02.108.053.008-.016.045.002.081.016.032.02.054.055.067.057.021.118.038.099.112a.348.348 0 01-.18.221c-.086.04-.11-.069-.175-.097-.04-.017-.085-.011-.128-.006-.007.011.06.032.07.051.02.039-.034.034-.038.064-.004.025-.037.043-.019.068-.019-.023-.055.008-.068.022-.019.02-.015.033-.007.058.016.051-.061.104-.107.098-.038-.006-.074-.003-.111-.021-.043-.021-.029-.008-.037-.057-.01-.046-.073-.066-.035-.123.027-.042.014-.038.009-.078-.006-.042.013-.048.046-.054.037-.007.053-.072.074-.103.005-.007.028-.065-.008-.05-.02.009-.005.034-.035.038-.022.004-.044-.011-.066-.011-.026 0-.053.013-.076-.003.012-.014.096-.084.03-.098-.027-.006-.006.038-.041.032-.007.035-.05.032-.07.054.009-.037.087-.065.061-.095.056-.049.068-.058-.008-.085-.12-.042-.11-.165-.028-.239.074-.068.198-.154.27-.041.079.121.128.033.192-.045-.021-.009-.002-.015-.009-.042-.07.029-.134-.063-.085-.118.03-.033.075-.024.114-.034.035-.009.066-.043.08-.075-.029.008-.025-.01-.014-.023-.018-.002-.037-.01-.052-.015-.043-.015-.04-.048-.085-.054-.108-.016.112-.14.005-.14-.035-.001-.065-.053-.09-.043-.019.007-.024.021-.045.012-.015-.006-.033-.019-.05-.009-.04.024-.047-.005-.084.006-.031.01-.048.04-.083.032.035-.048.079-.088.11-.138a.249.249 0 01.081-.086c.019-.011.072-.022.075-.048.005-.043-.022-.039-.051-.022a6.919 6.919 0 00-.232.144c-.046.029-.081.054-.137.046-.044-.007-.061.041-.096.037-.017-.067-.387.176-.432.197-.072.032-.153.087-.23.106-.032.008-.098.082-.094 0-.04-.005-.069.035-.095.055-.038.029-.082.047-.123.072-.087.056-.169.123-.25.186-.076.06-.153.13-.234.184-.028.019-.13.071-.127.11.072.014.318-.294.387-.211.018.021-.104.083-.124.095-.017.009-.037.008-.053.017-.022.013-.036.035-.057.049a.591.591 0 00-.142.13c-.028.037-.049.085-.08.119.004-.036-.003-.062-.002-.097-.04.026-.057.07-.113.058-.051-.012-.092.04-.128.068-.085.065-.142.137-.213.213-.04.043-.082.073-.107.126-.027.057-.064.108-.099.161-.066.097-.142.186-.207.283-.133.199-.22.427-.33.639-.057.11-.11.218-.134.341-.02.106-.02.214-.018.322.06-.047.057.051.041.08a.463.463 0 00-.038.146c-.01.065-.022.13-.022.196 0 .056-.018.108-.019.162-.02-.016.024-.084-.016-.074-.02.005-.02.034-.025.049-.016.052-.086.047-.097.106-.006.036-.01.057-.034.086-.018.022 0 .032.003.054.01.052-.058.124-.04.166.017.041.005.087.024.126.01.02.032.046.023.071-.042.008.012.106.016.136.006.049.05.203.097.225.059.091.14.218.245.264.074.032.1-.064.142-.104a.494.494 0 01.189-.109c.058-.021.302-.092.185-.176zm.102 3.285c.012-.02.003-.071-.019-.088-.052-.044-.073.06-.039.091.013.033.043.022.058-.003zM3.5 7.369c-.015-.013-.025-.005-.026-.032 0-.024.003-.07-.029-.041-.009.003.003.008-.01.013-.009.003-.016-.004-.022-.007-.016-.007-.026-.008-.039.01-.009.012-.009.026-.024.036l-.025.009c-.01.003-.035.021-.036.031-.004.015.019.026.035.03.012.009.03.017.042.026.013.009.034.025.05.029.035.02.09.042.118 0 .008-.016.014-.028.003-.042-.01-.015-.026-.019-.03-.031-.005-.013.006-.021-.007-.031zm4.745.755a.14.14 0 00-.067.026c-.03.026.034.041.058.048.028.016.067.024.094.04.023.017.038.04.064.051.032.015.075.022.11.031.014.005.037.004.057.008.022.013.031.033.05.047.03.028.073.035.114.033.038.004.067.011.101.002.04-.01.067.01.104.01.015 0 .03-.012.043-.011.019 0 .021.008.03.024.016.023.056.058.085.059.017 0 .031-.003.046.002.017.01.024.01.036.02.02.009.038.015.047.031.016.028.015.059.04.081l.052.04c.012.011.002.009.02.009.01.002.028.002.04-.002.05-.003.024-.073.008-.096-.01-.02-.019-.036-.015-.055.003-.023.014-.039-.001-.058a.075.075 0 00-.03-.024c-.006-.008-.008-.016-.015-.028-.015-.019-.044-.025-.063-.043-.031-.032-.048-.078-.088-.108-.022-.013-.042-.003-.068-.014-.011-.007-.017-.014-.033-.019-.015-.005-.028-.002-.041-.003-.029-.002-.054-.027-.081-.025-.03.004-.037.037-.055.055-.015.013-.033.013-.04-.008-.001-.027.009-.043.023-.06.021-.023 0-.036-.029-.038-.036 0-.043.029-.058.06-.024.033-.039.01-.072.005-.023.001-.039.01-.06.001-.015-.005-.018-.017-.029-.024a.036.036 0 00-.041.002c-.017.004-.017.004-.034-.005-.015-.006-.019-.018-.037-.022-.03-.006-.06.019-.085.012-.011-.006-.02-.022-.035-.027-.017-.01-.014-.001-.025.011-.018.018-.044.024-.062.01-.022-.016-.024-.043-.058-.048zm1.127 1.182c.016-.002.024-.018.037-.016.016-.003.008.013.02.023.009.009.019.009.029.009.017.003.052.005.059-.011.008-.025-.034-.03-.045-.05-.01-.029.013-.057.021-.082.012-.034-.03-.049-.026-.076-.001-.029.018-.039.012-.067a.162.162 0 00-.035-.059c-.012-.016-.035-.031-.033-.054.002-.024.046-.023.025-.052-.012-.025-.043-.02-.072-.024-.01 0-.02.001-.03-.009-.009-.014-.005-.021-.005-.031-.006-.027-.026-.037-.05-.048-.008-.004-.02-.009-.025-.021-.004-.012.008-.016.004-.027-.012-.026-.06.01-.08.001-.013-.002-.011-.015-.02-.029l-.024-.011c-.033-.015-.045.012-.04.039.015.061.06.101.055.162a.207.207 0 00.016.06c.008.033.016.049.002.081-.024.018-.002.04.006.063.004.031.012.055.011.088-.006.06-.024.119-.02.18.004.025.002.048.01.072.004.031.03.042.055.059.024.021.139.09.105.006-.01-.019-.025-.046-.03-.068-.008-.023.02-.039.02-.063.004-.027-.016-.036.022-.043.008-.006.02 0 .026-.002zM8.182 2.1c.03-.007.061.002.09-.009.015-.006.063-.023.06-.043-.005-.037-.162-.013-.188-.002-.007.023.016.041.037.047V2.1zm.754 6.688c-.006-.013 0-.025 0-.038-.003-.021-.01-.027-.006-.049.007-.012.007-.031.004-.046a.126.126 0 00-.025-.031.032.032 0 00-.01-.022c-.012-.012-.024.006-.037.012-.01.009-.029.015-.032.025-.01.015-.004.027-.004.04l.003.015c-.022.022 0 .08-.004.102 0 .025-.035.095.012.074.013-.006.023-.015.035-.021.015-.009.035-.009.054-.015.006 0 .04-.003.04-.009.001-.013-.027-.022-.03-.037zm-.891 1.264c.04.019.108-.019.146-.031.047-.015.122-.065.17-.037.02.011.03.034.05.043.026.011.057.001.083-.005.026-.006.057-.01.082-.022.021-.011.035-.029.054-.043.048-.037.09-.002.143-.01.03-.004.06-.019.089-.027.021-.005.06-.005.077-.021.018-.018.01-.057.01-.08-.001-.031 0-.063-.01-.092-.022-.057-.1-.124-.019-.169.016-.1-.1-.083-.134-.155-.022-.047-.029-.083-.091-.088-.052-.005-.084.023-.13.041-.05.019-.09.002-.134-.023-.027-.015-.083-.05-.094-.004-.01.04.028.079-.003.115-.028.032-.076.046-.116.055-.085.018-.153.084-.216.141l.007.006c-.024-.001-.06.065-.062.085l.03.009c-.001.034.037.011.04-.013.008.002.016.007.024.008.007.002.022.001.027.004.017.007.02.023.04.025-.01.052 0 .107-.025.156-.016.03-.095.104-.038.132zm.407-7.692c.03.032.066.041.06.091.037.005.06.019.082-.013a.12.12 0 01.058-.044c.027-.011.14-.01.136.037-.003.023-.017.043-.021.066-.005.032.03.009.044.017a.167.167 0 01-.058.024.033.033 0 01.016.024c-.026.006-.038.078-.084.092-.027.009-.068-.01-.096-.013-.032-.004-.057-.014-.09-.016-.03-.002-.005-.044-.045-.036-.007.028.007.099.012.127.005.035.035.055.07.061.048.008.07.024.112.048.032.018.069.007.104.01a.106.106 0 01.061.026c-.004.011-.012.029-.007.041.007.016.058-.002.07-.003.035-.004.069-.043.102-.038.013.002.072.02.07.035-.032-.013-.053.026-.078.005-.021-.019-.08-.003-.042.024a.687.687 0 01.013.086c-.003.028-.054.058-.05.076.007.001.053.004.062.013.003-.012-.005-.017.022-.025a.094.094 0 01.066.002c.008.035-.017.071.03.062.046-.009.066.021.113-.01a.066.066 0 01.087.011c.035.034-.035.081.005.114.016.013.029.053.045.06.01.005.07-.016.08-.021.02.034.036-.018.05-.021a.078.078 0 01.06-.05c.04-.004.041.003.068.022.078.054.067-.078.108-.112.073-.06.11-.117.16-.194.039-.062.094-.077.164-.088.055-.009.14-.022.163-.082.027-.07-.038-.108-.094-.129-.063-.022-.134-.046-.106-.126.032-.093.004-.147-.095-.177-.208-.065-.396-.174-.608-.234a2.557 2.557 0 00-.57-.082c-.085-.03-.266-.033-.319.04-.033.047.01.088.005.137a.22.22 0 00.065.163zm3.275 9.271l-.001-.001c.003.005.001.014.002.021.038 0 .055.035.097.022.042-.012.067-.053.033-.087-.03-.029-.055-.054-.098-.046-.052.01-.04.051-.033.091zm1.34-1.337l-.005-.026c-.04-.012-.066.03-.104-.001-.072.049.005.146-.113.14.02.025.019.053.009.082-.015.045-.027.041-.057.047-.065.01-.095-.03-.115-.084-.063.002-.15.1-.2.131-.012.007-.035.028-.049.037l-.05.027c-.034.017-.106.04-.11.078-.017-.003-.043.007-.06.005-.006.008-.006.017 0 .026.077.013.118-.013.183-.041.068-.031.141-.024.205-.048.03-.011.032-.045.082-.025.022.01.047.042.052.064.01.05-.042.124-.094.127-.013-.031.006-.063.011-.088-.069-.023-.182.075-.2.133.07.015.1.119.061.176-.012.014-.027.032-.052.04-.04.012-.06-.025-.099.004-.05.039.005.146-.024.206-.023.046-.061.063-.094.095-.022.023-.035.048-.064.068-.039.026-.132.082-.124.136.084.029.26-.119.333-.168.046-.031.075-.079.122-.11.054-.033.124-.05.158-.109.02-.034.004-.064.016-.098.01-.03.032-.04.051-.063.037-.044.07-.058.112-.094.051-.046.04-.118.063-.179.02-.053.061-.094.09-.144.044-.079.16-.267.111-.356-.012.01-.033.007-.044.012zm1.008-2.559c-.025-.048.013-.186.013-.243 0-.105-.033-.184-.047-.282-.01-.092-.022-.336.012-.419.047-.117-.184-.315-.197-.442a.396.396 0 00-.164-.277c-.036-.027-.115-.39-.161-.373-.023.011.024.091.021.116-.013.088-.057 0-.103.02-.086.035-.177.118-.188.203-.04.315-.263-.011-.245-.024.049-.038.067-.026.125-.034.064-.023-.036-.069.065-.079-.024-.065.03-.086.004-.137-.039-.075-.066-.066-.028-.147.017-.044-.084-.183-.091-.236-.008-.052-.01-.12-.016-.178-.004-.037.056-.072.045-.101-.002-.103.02-.214-.016-.314-.025-.068-.055-.158-.098-.216a.727.727 0 01-.066-.152c-.012-.064-.04-.04-.076-.065a.794.794 0 00-.135-.12 1.639 1.639 0 01-.199-.181c-.015-.045-.111-.08-.1-.129.015-.074-.242-.266-.314-.279-.047-.008.142.218.14.213.004.013.122.164.122.164.027.009.092.194.09.218-.007.07-.188-.115-.201-.14-.09-.109-.25-.197-.352-.27-.072-.067-.036-.105-.16-.162-.045-.021-.168-.122-.207-.125-.046-.002.007.096.008.107.007.07.083.075.129.121.036.038.069.085.037.127 0 0-.057.104-.06.095.016.044.147.141.18.177-.006-.009.171.224.186.1.006-.045-.044-.099-.038-.138.005-.024.204.227.215.249.048.133.044-.02.094-.004.042.013.153.152.06.158-.14.009.026.132.066.151.081.04.138.133.223.168.133.054.105.15.172.248.022.031-.383 0-.414.018-.053.042.203.329.204.372.002.09.053.156.067.246.008.083-.002.192.052.259.045.041.086-.068.156-.003.026.012.062.041.07.063.024.062.158.441-.003.413-.07-.013-.03.298-.025.343.021.098.06.09.035.214.003.103-.08.155-.139.229a.333.333 0 00-.058.117c-.033-.032-.048-.083-.094-.1-.05-.019-.158.041-.201.062-.105.053-.028.149-.07.232-.029.061-.118.091-.176.121-.07.036-.164.074-.233.016-.059-.048-.033-.145-.095-.187-.07-.047-.077.058-.093.1-.03.079-.122.106-.099.205.01.041.03.078.039.119.01.051-.016.097-.019.148-.006.087.085.107.109.178.02.064-.001.163-.072.187-.076.027-.16-.042-.235-.05-.075-.008-.171.013-.185.099-.013.076.064.138.027.216-.016.033-.044.059-.063.089-.035.05-.055.108-.087.159.038.001.034-.023.069-.016.036.008.069-.029.1-.041.006.024.003.049.006.073.025.008.05-.002.074-.011.002.021-.007.045.001.066.007.018.028.024.04.038.03.037-.007.098-.029.13-.062.092-.168.143-.237.229-.066.08-.071.177-.12.264-.017.03-.033.071.011.085.01-.016.025-.029.045-.029.031-.001.02.022.035.04.064.082.132-.053.16-.092.027-.042.142-.105.173-.035.025.053-.004.128-.028.176.041.019.03.049.04.085.012.05.057.082.057.137 0 .066-.144.197-.087.247.07.062.153-.11.18-.147.053-.071.172-.081.202-.168.032-.099.021-.158.152-.161.056-.001.096-.036.148-.047.058-.011.083-.017.12-.061.052-.063.1.012.101.062.002.051-.02.115.011.161.039.056.081-.018.12-.054-.003.038.047.06.077.072.045-.031.074-.082.122-.11a.212.212 0 01.074-.022c.007.041.014.085.05.105.053.03-.012.059.058.091.085.033.114.12.155.19.02.032.2-.163.269-.17.229-.026.348-.325.433-.502.122-.253.178-.534.21-.795.077-.161.109-.456.077-.643-.019-.114.046-.272-.012-.38zm-2.072 3.797c.006-.028.065-.132.01-.147-.02-.005-.036.025-.054.03-.024.008-.05-.007-.071.004-.02.011-.039.043-.05.061-.015.022-.01.031.014.043.024.013.055.019.068.045.012.023.006.054.003.078 0-.001.004-.005.005-.009a.038.038 0 01.015-.001l-.005.01c.063.01.058-.073.065-.114zm.74-1.251c.001.03.034.027.055.019.02-.006.033-.023.046-.038.018-.023.028-.046.013-.073a.28.28 0 01-.034-.081c-.013.007-.028.019-.042.023-.014.005-.016.001-.032 0-.036-.001-.028.027-.044.05-.013.02-.042.028-.03.054.007.02.04.037.058.046l.005-.006c0 .002-.002.003-.003.005a.017.017 0 00.007.001zM9.18 12.428c.037-.065.102-.106.16-.151a1.14 1.14 0 00.188-.185c-.033-.008-.035-.039-.056-.059-.031-.031-.08-.011-.086-.058-.007-.042-.042-.051-.075-.068-.077-.039-.109-.115-.171-.168-.068-.06-.16-.04-.244-.056-.073-.014-.147-.131-.225-.081-.049.031-.072.11-.038.159.026.038.072.057.09.102-.027.025-.033.041 0 .064.038.027.112.055.093.114-.01.032-.036.063-.07.069-.025.005-.086-.009-.073.036-.027-.074-.105.042-.148-.019-.034-.049-.056-.093-.11-.126-.07-.043.028-.085.017-.15-.018-.095-.134-.069-.175-.139-.025-.04.009-.072.025-.107.015-.036.058-.007.08.003a.25.25 0 00.245-.029c.029-.024.092-.135.012-.135-.055.001-.098.049-.15.052-.008-.063-.037-.17.03-.212.06-.038.19-.082.135-.18-.02-.034-.054.022-.083-.003-.012-.01-.003-.033 0-.044a.179.179 0 01-.045-.062c-.044-.106.084-.189.03-.301a.274.274 0 00-.103-.104c-.043-.03-.045-.068-.06-.113-.009-.025-.05-.084-.085-.069-.031.012-.04.065-.064.087-.053.052-.165.072-.236.055-.058-.013-.055-.035-.082-.073-.01-.014-.029-.015-.044-.021-.025-.01-.028-.033-.034-.056-.024-.087-.196.021-.222-.101-.006-.028.004-.075-.037-.081-.045-.008-.047-.052-.047-.089 0-.03.002-.072-.03-.089-.04-.022-.05-.012-.063-.058-.015-.059-.055.002-.089-.01-.07-.028-.058.007-.115.037-.098.052-.109-.189-.142-.236-.065-.09-.049.111-.093.136-.04.023-.083-.03-.098-.061-.008-.018-.013-.038-.024-.056-.017-.026-.047-.037-.063-.063-.014-.023-.035-.05-.045-.075-.009-.022-.007-.05-.024-.068-.02-.023.005-.061.02-.09.026-.01.064.01.083.027.046.039.117.21.197.178-.016-.022-.005-.049-.017-.073-.013-.025-.038-.04-.057-.06-.041-.048-.086-.096-.114-.154-.024-.05-.036-.103-.084-.138-.04-.029-.117-.057-.1-.119v-.002c.033.007.056.031.08.052.034.03.078.045.119.065.074.036.16.061.223.116.04.033.019.107.068.148.036.03.09.131.158.091.024-.015.035-.044.06-.061.027-.019.07-.036.102-.05.018-.009.05-.006.065-.021.023-.023-.033-.089-.046-.106-.05-.065-.096-.136-.164-.185-.034-.025-.068-.052-.108-.069-.022-.009-.06-.008-.064-.038.01.007.017.005.019-.006-.001-.02-.03-.021-.044-.025-.033-.009-.056-.009-.069-.037-.017-.034-.076-.033-.107-.041-.048-.012-.085-.048-.13-.066-.054-.02-.094.001-.147.013-.009.002-.026.033-.043.059a.128.128 0 00-.11.02c-.048.037-.076.093-.113.139-.016.019-.039.038-.061.031-.004-.002-.002-.007-.005-.009.028-.205.044-.412.025-.371-.037.08-.065.136-.093.194-.042-.018-.09-.019-.108.025-.019.047.006.108-.024.149-.006.011-.017.01-.027.015-.002-.005-.012-.018-.011-.019l-.018.033a.33.33 0 01-.102-.023l-.001-.003-.002.002c-.044-.015-.09-.029-.129-.015-.079.028-.082.141-.132.21-.075.105-.268.06-.302-.065l.082-.102a.29.29 0 00-.27-.18c-.033.001-.067.007-.097-.007-.03-.015-.047-.047-.074-.067-.083-.062-.193.02-.262.097a.489.489 0 00-.302.183l-.141-.012c.027.076-.064.138-.106.208-.051.085-.025.184.026.275-.006.014-.01.029-.023.035-.06.032-.044.051-.027.116a.554.554 0 01-.003.217c-.01.044-.053.15-.106.125-.028-.014-.057-.025-.083.001a.083.083 0 00-.024.04.3.3 0 00-.052.007c-.034.007-.069.015-.102.001-.032-.014-.076-.041-.112-.029-.03.01-.09.037-.104.069-.006.014.013.051.013.07 0 .034.026.085.015.116-.025-.012-.061-.016-.078-.041-.016-.021-.04-.016-.057-.038-.004.038-.018.091-.063.101-.044.01-.086-.025-.13-.013-.117.03.07.176.094.204.042.047.055.109.086.162.034.058.103.077.143.128.034.043.04.101.089.133.053.037.101.07.123.133.023-.022.07.082.119-.001.025-.045.07-.084.1-.011.024.063 0 .103.053.158.042.043.04.094-.031.089.012.032.03.064 0 .093-.014.014-.053.043-.025.063.033-.015.067-.024.1-.039.035-.015.07-.051.111-.05.002.013-.055.051-.02.054.03.003.073-.028.096-.002.027.028-.007.071.01.102.015.032.068.008.094.013-.01.028-.052.023-.075.034.052.064-.016.158-.092.16-.036 0-.166-.149-.171-.053a.285.285 0 00.016.09c.012.035.097.02.128.033a.22.22 0 01.113.106c.017.046.055.076.07.12.029.082.107.093.188.117.107.032.055.199.049.279-.005.079.105.098.156.143.056.049.065.144-.028.152-.047.004-.126-.018-.144.043-.026.086.105.077.162.096.027.009.134.02.144.045.015.039.003.092.017.133.033.105.13.175.224.227.201.113.44.184.66.247a2.6 2.6 0 00.376.081c.122.016.23.006.334.074.072.047.118.012.192.025.031.006.045.035.069.052.026.021.057-.006.085.005a.076.076 0 00-.005-.055c.056.021.125.081.184.033.03-.024.05-.057.08-.08.036.003.072.005.109.005.152 0 .273-.07.395-.152.131-.088.29-.09.441-.104a1.45 1.45 0 00.479-.107c.128-.062.16-.175.197-.3.04-.136.158-.191.236-.301.092-.128.031-.295.106-.428zm-5.885-1.804a.1.1 0 00-.041-.071l-.002.009c-.034-.017-.038-.081-.083-.076-.038-.06-.132-.033-.162.022-.02.037.004.054.026.081.027.034.022.06.032.099.025.101.109.032.168.071.023.015.031.058.065.051.037-.009.036-.065.026-.09-.014-.036-.024-.057-.029-.096zm.788 1.191c.006-.017-.02-.036-.038-.035-.016.001-.03.023-.037.035a.054.054 0 00.048.082c.01-.019.007-.056.035-.059-.002-.009-.008-.012-.016-.015l.008-.008zm-.838-1.269a.054.054 0 01.009.007c.003-.005.006-.009.007-.015l-.016.008zm9.245 1.403c-.017.016-.012.034-.02.053-.009.023-.043.032-.062.044-.03.019-.04.064-.072.075-.014-.021-.035-.08-.063-.029-.017.033-.006.066-.033.096-.027.028-.025.062-.043.093a.273.273 0 01-.106.107c-.038.023-.046.066-.074.098-.03.035-.075.048-.115.066-.029.012-.076.046-.109.027-.043-.027.016-.075.037-.092.02-.016.113-.073.091-.105-.014-.021-.068-.018-.09-.016-.044.005-.077.05-.115.071a.723.723 0 01-.125.06c-.053.019-.057.069-.1.099a.204.204 0 01-.12.046c-.057 0-.054-.048-.071-.088-.022.003-.04.031-.061.04-.034.014-.056.03-.04.067.013.038-.14.073-.167.092-.006-.019.024-.039.036-.05-.047-.004-.1.037-.15.044-.045.006-.103.038-.11.086-.005.038-.055.037-.086.05-.053.022-.031.053-.04.095-.02.079-.185.019-.102-.086.03-.037.074-.061.101-.099.03-.044.036-.099.06-.146-.053.015-.092.045-.137.074-.05.033-.093.025-.149.014-.065-.014-.11.019-.17.034-.039.009-.125.006-.13.062-.003.036.06.043.08.064.03.032.064.079.09.115.02.028.098.067.093.103-.008.07-.096.058-.143.07-.048.012-.055.055-.09.081-.039.029-.092-.005-.135.013-.045.017-.076.057-.115.083-.065.045-.107-.004-.174-.007-.055-.002-.104.023-.155.034-.047.01-.103.018-.138.051-.078.07.172.051.196.049-.011.04-.022.087-.058.113-.046.033-.11.025-.162.037-.04.01-.097.055-.038.087.054.027.122.013.175-.006.061-.021.118-.054.183-.068.067-.015.137-.008.204-.02.072-.014.135-.053.202-.08a.569.569 0 01.2-.038c-.014.025-.082.023-.107.029-.05.01-.085.054-.137.051-.06-.002-.053.04-.095.05-.028.007-.093.071-.114.031-.015-.031-.046-.025-.056.013-.008.028.008.038-.03.039-.03 0-.044-.012-.07-.019-.054-.014-.077.041-.115.055-.055.021-.114.014-.168.049-.03.02-.064.026-.1.037-.066.021-.129.046-.195.068-.05.018-.102.04-.157.041-.023 0-.114-.016-.129.011-.027.05.057.031.075.021.05-.027.112-.011.168-.011a.39.39 0 00.188-.046c.017-.009.129-.033.135-.02.01.006.083-.021.096-.024l.18-.042c.182-.047.362-.118.54-.179.354-.12.68-.323.987-.529.14-.093.253-.215.404-.291.152-.076.288-.177.427-.272.136-.093.24-.221.353-.338.115-.119.211-.231.262-.389-.029-.007-.059.052-.082.063-.04.019-.109.009-.14.039zm-.85-.161c.034-.047.004-.111-.057-.074-.023.013-.02.039-.038.055-.018.017-.02-.003-.039-.008-.027-.006-.07.03-.079.054-.036-.001-.069.04-.052.072.048-.018.078-.063.13-.049.041.011.108-.015.134-.05z"/></svg>
\ No newline at end of file diff --git a/devtools/docs/user/network_monitor/request_list/network_message_list_63.png b/devtools/docs/user/network_monitor/request_list/network_message_list_63.png Binary files differnew file mode 100644 index 0000000000..255dab1f9c --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/network_message_list_63.png diff --git a/devtools/docs/user/network_monitor/request_list/network_monitor_columns_menu.png b/devtools/docs/user/network_monitor/request_list/network_monitor_columns_menu.png Binary files differnew file mode 100644 index 0000000000..5a347a9886 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/network_monitor_columns_menu.png diff --git a/devtools/docs/user/network_monitor/request_list/network_request_list.png b/devtools/docs/user/network_monitor/request_list/network_request_list.png Binary files differnew file mode 100644 index 0000000000..2f570377df --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/network_request_list.png diff --git a/devtools/docs/user/network_monitor/request_list/nwmon-turtle-tooltip.png b/devtools/docs/user/network_monitor/request_list/nwmon-turtle-tooltip.png Binary files differnew file mode 100644 index 0000000000..8f17571f74 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/nwmon-turtle-tooltip.png diff --git a/devtools/docs/user/network_monitor/request_list/request_blocking_panel.png b/devtools/docs/user/network_monitor/request_list/request_blocking_panel.png Binary files differnew file mode 100644 index 0000000000..a5d0024c11 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/request_blocking_panel.png diff --git a/devtools/docs/user/network_monitor/request_list/search_panel.png b/devtools/docs/user/network_monitor/request_list/search_panel.png Binary files differnew file mode 100644 index 0000000000..4f9b1aae1f --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/search_panel.png diff --git a/devtools/docs/user/network_monitor/request_list/search_panel_matches.png b/devtools/docs/user/network_monitor/request_list/search_panel_matches.png Binary files differnew file mode 100644 index 0000000000..59fd659ccb --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/search_panel_matches.png diff --git a/devtools/docs/user/network_monitor/request_list/timeline.png b/devtools/docs/user/network_monitor/request_list/timeline.png Binary files differnew file mode 100644 index 0000000000..f479ff3439 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/timeline.png diff --git a/devtools/docs/user/network_monitor/request_list/tracker_icon.png b/devtools/docs/user/network_monitor/request_list/tracker_icon.png Binary files differnew file mode 100644 index 0000000000..fa91611f34 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/tracker_icon.png diff --git a/devtools/docs/user/network_monitor/request_list/unblockurl.png b/devtools/docs/user/network_monitor/request_list/unblockurl.png Binary files differnew file mode 100644 index 0000000000..b59042c413 --- /dev/null +++ b/devtools/docs/user/network_monitor/request_list/unblockurl.png diff --git a/devtools/docs/user/network_monitor/throttling/index.rst b/devtools/docs/user/network_monitor/throttling/index.rst new file mode 100644 index 0000000000..344e4d83d0 --- /dev/null +++ b/devtools/docs/user/network_monitor/throttling/index.rst @@ -0,0 +1,45 @@ +========== +Throttling +========== + +The network monitor allows you to throttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types. + +Throttling +********** + +The toolbar includes a Throttling dropdown, which allows you to throttle your network speed to emulate various different network speed conditions. Choose an option from the menu, and it will persist across reloads. + +.. image:: throttling.png + :class: border + +The characteristics emulated are: + +- Download speed +- Upload speed +- Minimum latency + +The table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions. The speeds are expressed in multiples of bits per second. + +.. csv-table:: + :header: "Selection", "Download speed", "Upload speed", "Minimum latency" + :widths: auto + + GPRS, 50 Kbps, 20 Kbps, 500 + Regular 2G, 250 Kbps, 50 Kbps, 300 + Good 2G, 450 Kbps, 150 Kbps, 150 + Regular 3G, 750 Kbps, 250 Kbps, 100 + Good 3G, 1.5 Mbps, 750 Kbps, 40 + Regular 4G/LTE, 4 Mbps, 3 Mbps, 20 + DSL, 2 Mbps, 1 Mbps, 5 + Wi-Fi, 30 Mbps, 15 Mbps, 2 + +Network Monitor Features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Toolbar <../toolbar/index>` +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../recording/index/>` +- :doc:`Performance analysis <../performance_analysis/index>` diff --git a/devtools/docs/user/network_monitor/throttling/throttling.png b/devtools/docs/user/network_monitor/throttling/throttling.png Binary files differnew file mode 100644 index 0000000000..094eb33290 --- /dev/null +++ b/devtools/docs/user/network_monitor/throttling/throttling.png diff --git a/devtools/docs/user/network_monitor/toolbar/index.rst b/devtools/docs/user/network_monitor/toolbar/index.rst new file mode 100644 index 0000000000..9407c4fba0 --- /dev/null +++ b/devtools/docs/user/network_monitor/toolbar/index.rst @@ -0,0 +1,59 @@ +======================= +Network monitor toolbar +======================= + +The network monitor provides two toolbar areas, one above the main section, and another below. + +Toolbar +******* + +The toolbar is at the top of the main network monitor window. (Prior to Firefox 77, this toolbar was arranged somewhat differently.) + +.. image:: network_toolbar_callouts.png + :alt: Screenshot of the Network toolbar, without callouts for the parts + :class: border + +It provides: + +- An icon to clear the :doc:`network request list <../request_list/index>` +- A box enabling you to :ref:`filter requests <request-list-filtering-requests>` by URL and by properties. +- A set of tool icons: + + - Pause (or **resume**) recording network log + - **Search** the log + - **Request Blocking** + +- An array of buttons to filter the network request list by type: + + - by the content type of the response + - XHR requests + - WebSocket upgrades and messages (labeled **WS**) + - Other requests + +- A checkbox that allows you to disable caching. +- **Throttling** menu, to simulate various connection types +- A menu of other actions: + + - **Persist Logs**: By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. When you select **Persist Logs**, the log is not cleared on page load. + - **Import HAR** imports a HAR (HTTP Archive) file. + - **Save All as HAR** opens a file dialog box so you can save the current contents of the Network log as a HAR file with the extension ```.har```. + - **Copy All as HAR** copies the current contents of the Network log to the clipboard in HAR format. + +A second toolbar area at the bottom of the network monitor provides: + +.. image:: network_monitor_bottom_toolbar.png + +- An icon to launch :doc:`performance analysis <../performance_analysis/index>`. +- A summary of this page, including the number of requests, total size, and total time. + + +Network Monitor features +************************ + +The following articles cover different aspects of using the network monitor: + +- :doc:`Network request list <../request_list/index>` +- :doc:`Network request details <../request_details/index>` +- :doc:`Network traffic recording <../recording/index/>` +- :doc:`Performance analysis <../performance_analysis/index>` +- :doc:`Throttling <../throttling/index>` diff --git a/devtools/docs/user/network_monitor/toolbar/network_monitor_bottom_toolbar.png b/devtools/docs/user/network_monitor/toolbar/network_monitor_bottom_toolbar.png Binary files differnew file mode 100644 index 0000000000..fe89e59f00 --- /dev/null +++ b/devtools/docs/user/network_monitor/toolbar/network_monitor_bottom_toolbar.png diff --git a/devtools/docs/user/network_monitor/toolbar/network_toolbar_callouts.png b/devtools/docs/user/network_monitor/toolbar/network_toolbar_callouts.png Binary files differnew file mode 100644 index 0000000000..71189a9840 --- /dev/null +++ b/devtools/docs/user/network_monitor/toolbar/network_toolbar_callouts.png diff --git a/devtools/docs/user/network_monitor/wrench-icon.png b/devtools/docs/user/network_monitor/wrench-icon.png Binary files differnew file mode 100644 index 0000000000..b0d7a57776 --- /dev/null +++ b/devtools/docs/user/network_monitor/wrench-icon.png |
