Add "View WebSocket messages" in "Perf features reference" (#3632)

* todo

* comment notes

* prep incoming section phase2

* real section content

* intro

* not upstream

* below>above 🤦‍♂️

* un-todo

Author: mikehoffms

microsoft-edge/devtools/performance/reference-images/performance-icon.png

@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 02/24/2025
+ms.date: 11/26/2025
 ---
 <!-- Copyright Kayce Basques
 
@@ -31,8 +31,8 @@ For a step-by-step tutorial on how to analyze the performance of a page using th
 The images in this page show DevTools undocked into its own, dedicated window. To learn more about undocking DevTools, see [Undock DevTools into a separate window](../customize/placement.md#undock-devtools-into-a-separate-window) in _Change DevTools placement (Undock, Dock to bottom, Dock to left)_.
 
 
-<!-- generated by tocex on 2025/02/21 -->
 **Detailed contents:**
+<!-- https://github.com/captainbrosset/WebToc 2025/02/21-->
 * [Open the Performance tool](#open-the-performance-tool)
 * [Record performance](#record-performance)
    * [Record runtime performance](#record-runtime-performance)
@@ -85,6 +85,7 @@ The images in this page show DevTools undocked into its own, dedicated window. T
    * [View paint profiler](#view-paint-profiler)
    * [View CSS selector statistics](#view-css-selector-statistics)
    * [View messages between windows, iframes, and dedicated workers](#view-messages-between-windows-iframes-and-dedicated-workers)
+   * [View WebSocket messages](#view-websocket-messages)
 * [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool)
    * [View frames per second in realtime with the FPS meter](#view-frames-per-second-in-realtime-with-the-fps-meter)
    * [View painting events in realtime with Paint Flashing](#view-painting-events-in-realtime-with-paint-flashing)
@@ -102,11 +103,17 @@ The images in this page show DevTools undocked into its own, dedicated window. T
 1. Right-click a webpage, select **Inspect**, and then in DevTools, click the **Performance** tab in the **Activity Bar**.
 -->
 
-To use the sections in this page, open the **Performance** tool in DevTools:
+To open the **Performance** tool in DevTools:
 
-1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens.
+1. Right-click a webpage, and then select **Inspect**.
 
-1. In DevTools, on the **Activity Bar**, select the **Performance** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./reference-images/more-tools-icon.png)) button.
+   Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).
+
+   DevTools opens.
+
+1. In DevTools, on the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tab.
+
+   If that tab isn't visible, click the **More tools** (![More tools icon](./reference-images/more-tools-icon.png)) button.
 
 
 <!-- ====================================================================== -->
@@ -122,7 +129,11 @@ To analyze the performance of a webpage while it's running (rather than while it
 
 1. Go to the webpage that you want to analyze, such as the [Photo Gallery demo](https://microsoftedge.github.io/Demos/photo-gallery/).
 
-1. In DevTools, open the **Performance** tool.
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. On the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tool.
 
 1. Click the **Record** (![Record icon](./reference-images/record-icon.png)) button.
 
@@ -142,15 +153,19 @@ To analyze the performance of a webpage while it's loading (rather than while it
 
 1. Go to the webpage that you want to analyze, such as the [Photo Gallery demo](https://microsoftedge.github.io/Demos/photo-gallery/).
 
-1. In DevTools, open the **Performance** tool.
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. On the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tool.
 
 1. Click the **Refresh page** (![Refresh Page](./reference-images/refresh-page-icon.png)) button:
 
    ![Refresh page](./reference-images/refresh-button.png)
 
    DevTools records performance metrics while the page refreshes and then automatically stops the recording a couple seconds after the load finishes. Then, DevTools displays the recording and automatically zooms in on the portion of the recording where most of the activity occurred:
 
-   ![A page-load recording](./reference-images/refreshed.png)<!-- 1st instance of this png ~~ -->
+   ![A page-load recording](./reference-images/refreshed.png)<!-- 1st instance of this png -->
 
 
 <!-- ------------------------------ -->
@@ -174,9 +189,13 @@ To force garbage collection while you are recording a page, click the **Collect
 <!-- ------------------------------ -->
 #### Show recording settings
 
-To expose more settings related to how DevTools captures performance recordings, in the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button.  Checkboxes and dropdown lists are displayed at the top of the **Performance** tool:
+To expose more settings related to how DevTools captures performance recordings:
 
-![The Capture Settings section at top of the Performance tool](./reference-images/capture-settings.png)
+* In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button.
+
+  Checkboxes and dropdown lists are displayed at the top of the **Performance** tool:
+
+  ![The Capture Settings section at top of the Performance tool](./reference-images/capture-settings.png)
 
 
 <!-- ------------------------------ -->
@@ -387,27 +406,34 @@ To closely inspect your performance recording, you can select a portion of a rec
 <!-- ---------- -->
 ###### Use keyboard shortcuts to navigate
 
-To use keyboard shortcuts to quickly navigate the recording, first, choose your preferred style of keyboard navigation.
+To use keyboard shortcuts to quickly navigate the recording, first, choose your preferred style of keyboard navigation, as follows:
+
+* In the top-right corner of the **Performance** tool, click the **Show shortcuts** (![The Show shortcuts icon](./reference-images/show-shortcuts-icon.png)) button, and then select the **Modern** or **Classic** option button.
 
-In the top-right corner of the **Performance** tool, click the **Show shortcuts** (![The Show shortcuts icon](./reference-images/show-shortcuts-icon.png)) button, and then select the **Modern** or **Classic** option button.  The **Keyboard shortcuts** dialog displays the available shortcuts for the selected mapping option.
+  The **Keyboard shortcuts** dialog displays the available shortcuts for the selected mapping option.
 
-With the **Modern** option button selected:
+
+When the **Modern** option button is selected:
 
 ![Keyboard shortcuts popup with Modern selected](./reference-images/perf-shortcuts-style.png)
 
 * To zoom: **Command/Ctrl** + mouse wheel.
-* To vertical scroll: Mouse wheel.
+* To vertical scroll<!-- todo: pan = scroll? -->: Mouse wheel.
 * To horizontal scroll: **Shift** + mouse wheel.
 
 
-With the **Classic** option button selected:
+When the **Classic** option button is selected:
 
 * To zoom: Mouse wheel, or touchpad up or down.
 * To vertical scroll: **Shift** + mouse wheel.
 * To horizontal scroll: **Shift** + **Left arrow**|**Right arrow**
 
 
-You can also pan left and right by pressing the **A** and **D** keys, and zoom by pressing the **W** or **S** keys.
+Additional shortcuts:
+
+* Zoom, by pressing **W** or **S**.
+
+* Pan<!-- todo: pan = scroll? --> left and right, by pressing **A** or **D**.
 
 
 <!-- ---------- -->
@@ -572,7 +598,7 @@ Select an event to view more information about it in the **Summary** tab.  DevTo
 
 ![More information about the anonymous function in the Summary tab](./reference-images/summary-me.png)
 
-DevTools represents main thread activity with a flame chart: 
+DevTools represents main thread activity with a flame chart:
 
 ![A flame chart](./reference-images/main-flame-chart.png)
 
@@ -1074,6 +1100,63 @@ See also:
 * [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline)
 
 
+<!-- ------------------------------ -->
+#### View WebSocket messages
+<!-- not upstream -->
+
+WebSocket activities are displayed in the **Network** track in the **Performance** tool, to help correlate JavaScript activity with WebSocket messages.  This can help identify whether latency issues are coming from the client's parsing of a message, or from the server's response.
+
+To view WebSocket messages in the **Performance** tool:
+
+1. Go to a webpage that sends WebSocket messages, such as [Simple chat app](https://azure.github.io/azure-webpubsub/demos/chat), in a new window or tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. In the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tool.
+
+1. In the upper left of the **Performance** tool, click the **Record** (![Record icon](./reference-images/record-icon.png)) button.
+
+1. In the chat webpage, in the **User Name** text box, enter a name, such as "John", and then click the **Connect** button.
+
+   At the bottom of the chat form, a message is displayed, such as "John:v8g... connected."
+
+1. In the **Send a message** text box, enter a message, such as "Hello", and then click the **Send** button.
+ 
+   In the chat app, the message is displayed, such as "Hello":
+
+   ![WebSocket messages in the Performance tool](./reference-images/websocket-messages.png)
+
+   WebSocket traffic is generated.
+
+1. In the upper left of the **Performance** tool, click the **Stop** (![Stop icon](./reference-images/stop-icon.png)) button.
+
+   Or, in the middle of the **Performance** tool, click the **Stop** button.
+
+   In the **Performance** tool, the timeline is displayed.
+
+1. Expand the **Network** track.
+
+1. Click a vertical gold line.
+
+1. At the bottom of the **Performance** tool, in the **Summary** tab, information about the selected WebSocket message is displayed, such as:
+
+   * **Send WebSocket handshake**
+   * **Receive WebSocket handshake**
+   * **Receive WebSocket message**:
+
+   ![Receive WebSocket message](./reference-images/receive-websocket-message.png)
+
+See also:
+* [Analyze the messages of a WebSocket connection](../network/reference.md#analyze-the-messages-of-a-websocket-connection) in _Network features reference_.
+* [Track event initiators](#track-event-initiators), above.
+* [Analyze runtime performance (tutorial)](./index.md)
+<!--
+* [View WebSocket message activities in the Performance tool](../whats-new/2024/08/devtools-128.md#view-websocket-message-activities-in-the-performance-tool) in _What's New in DevTools (Microsoft Edge 128)_.
+-->
+
+
 <!-- ====================================================================== -->
 ## Analyze rendering performance with the Rendering tool
 <!-- https://developer.chrome.com/docs/devtools/performance/reference#rendering -->
@@ -1082,11 +1165,19 @@ Use the **Rendering** tool to help visualize the rendering performance of your p
 
 To open the **Rendering** tool:
 
-1. Right-click a webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
+1. Open a webpage, such as [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/), in a new window or tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens.
+
+1. If the **Quick View** panel isn't shown, select **Customize and control DevTools** (![The Customize and control DevTools icon](./reference-images/customize-and-control-devtools-icon.png)) > **Toggle Quick View panel**.
+
+   Or, press **Esc**.
 
-1. On the **Activity Bar** (or **Quick View**), click the **More tools** (![More tools icon](./reference-images/more-tools-icon.png)) button, and then select **Rendering**.
+1. On the **Quick View** toolbar, click the **More tools** (![More tools icon](./reference-images/more-tools-icon.png)) button, and then select **Rendering**.
 
-   The **Rendering** tool opens:
+   The **Rendering** tool opens in the **Quick View** panel:
 
    ![The Rendering tool](./reference-images/rendering-tool.png)
 

microsoft-edge/devtools/performance/reference-images/receive-websocket-message.png

@@ -76,6 +76,7 @@ See also:
 WebSocket activities have been added to the **Network** track in the **Performance** tool, to help correlate JavaScript activity with WebSocket messages.  This can help identify whether latency issues are coming from the client's parsing of a message, or from the server's response.
 
 See also:
+* [View WebSocket messages](../../../performance/reference.md#view-websocket-messages) in _Performance features reference_.
 * [Analyze runtime performance (tutorial)](../../../performance/index.md)