diff --git a/microsoft-edge/devtools/performance/reference-images/performance-icon.png b/microsoft-edge/devtools/performance/reference-images/performance-icon.png new file mode 100644 index 0000000000..191acbac07 Binary files /dev/null and b/microsoft-edge/devtools/performance/reference-images/performance-icon.png differ diff --git a/microsoft-edge/devtools/performance/reference-images/receive-websocket-message.png b/microsoft-edge/devtools/performance/reference-images/receive-websocket-message.png new file mode 100644 index 0000000000..0be1ba65df Binary files /dev/null and b/microsoft-edge/devtools/performance/reference-images/receive-websocket-message.png differ diff --git a/microsoft-edge/devtools/performance/reference-images/rendering-tool.png b/microsoft-edge/devtools/performance/reference-images/rendering-tool.png index 8f2339cc07..7bc5945dcd 100644 Binary files a/microsoft-edge/devtools/performance/reference-images/rendering-tool.png and b/microsoft-edge/devtools/performance/reference-images/rendering-tool.png differ diff --git a/microsoft-edge/devtools/performance/reference-images/stop-icon.png b/microsoft-edge/devtools/performance/reference-images/stop-icon.png new file mode 100644 index 0000000000..f6de64a490 Binary files /dev/null and b/microsoft-edge/devtools/performance/reference-images/stop-icon.png differ diff --git a/microsoft-edge/devtools/performance/reference-images/websocket-messages.png b/microsoft-edge/devtools/performance/reference-images/websocket-messages.png new file mode 100644 index 0000000000..1418b25b15 Binary files /dev/null and b/microsoft-edge/devtools/performance/reference-images/websocket-messages.png differ diff --git a/microsoft-edge/devtools/performance/reference.md b/microsoft-edge/devtools/performance/reference.md index 168f0db18d..a193404349 100644 --- a/microsoft-edge/devtools/performance/reference.md +++ b/microsoft-edge/devtools/performance/reference.md @@ -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 --- **Detailed contents:** + * [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,7 +153,11 @@ 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: @@ -150,7 +165,7 @@ To analyze the performance of a webpage while it's loading (rather than while it 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) + ![A page-load recording](./reference-images/refreshed.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: 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 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 + + +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) + + + ## Analyze rendering performance with the Rendering tool @@ -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) diff --git a/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md b/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md index 51c1923139..6e27384f10 100644 --- a/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md +++ b/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md @@ -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)