index.rst (4454B)
1 ====================== 2 Inspecting web sockets 3 ====================== 4 5 The :doc:`Network Monitor <../index>` has 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. 6 7 Accessing the inspector 8 *********************** 9 10 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. 11 12 .. image:: wsi-filter.png 13 :alt: WS filter in the network inspector 14 15 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/Reference/Status/101>`_ (WebSocket Protocol Handshake) are visible, which indicates that the server is switching to a web socket connection. 16 17 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. 18 19 .. image:: new-web-sockets.png 20 :alt: Messages panel in the web socket inspector 21 :class: border 22 23 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. 24 25 Pausing web socket traffic 26 ************************** 27 28 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. 29 30 .. image:: ws-pause.png 31 :alt: Pausing the web socket inspector 32 33 Filtering web socket frames 34 *************************** 35 36 To focus on specific messages, frames can be filtered using the filter at the top of the *Response* panel. 37 38 .. image:: ws_response_text_filter.png 39 :class: border 40 :alt: web socket frame filter 41 42 There are also predefined filters, available in the tool bar of the Response pane, grouped into a selection list. 43 44 .. image:: ws_filter_menu.png 45 :alt: Screenshot showing the filter menu for WebSocket messages 46 47 The following filters are available: 48 49 .. list-table:: 50 :widths: 20 80 51 :header-rows: 0 52 53 * - **All** 54 - Displays all messages (by default, except control messages). 55 56 * - **Sent** 57 - Displays only messages sent by the browser (by default, except control messages). 58 59 * - **Received`** 60 - Displays only messages received from the server (by default, except control messages). 61 62 * - **Control** 63 - 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. 64 65 Columns in the Response pane 66 **************************** 67 68 In the **Response** pane, you can choose to show the following information about each frame: 69 70 - Data 71 - Size 72 - Time 73 - OpCode 74 - MaskBit 75 - FinBit 76 77 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. 78 79 80 .. image:: ws_message_columns.png 81 :class: border 82 :alt: columns in the messages panel 83 84 85 Expanding each message 86 ********************** 87 88 Selecting a message in the list shows a preview of the data being sent in that message, at the bottom of the Response pane. 89 90 .. image:: ws_expand_message.png 91 :class: border 92 :alt: web socket payload preview 93 94 95 Supported WS protocols 96 ********************** 97 98 The inspector currently supports the following web socket protocols: 99 100 - Plain JSON 101 - Socket.IO 102 - SockJS 103 - SignalR 104 - WAMP 105 - STOMP 106 - STOMP inside SockJS 107 108 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. 109 110 Network Monitor features 111 ************************ 112 113 The following articles cover different aspects of using the network monitor: 114 115 - :doc:`Toolbar <../toolbar/index>` 116 - :doc:`Network request list <../request_list/index>` 117 - :doc:`Network request details <../request_details/index>` 118 - :doc:`Network traffic recording <../performance_analysis/index>` 119 - :doc:`Throttling <../throttling/index>` 120 - :doc:`Inspecting web sockets <../inspecting_web_sockets/index>` 121 - :doc:`Inspecting server-sent events <../inspecting_server-sent_events/index>`