diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index 90bfd53af3..2dfc02166a 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -111,7 +111,32 @@ }, { "source_path": "microsoft-edge/devtools-guide-chromium/javascript-profiler/javascript-profiler-tool.md", - "redirect_url": "/microsoft-edge/devtools-guide-chromium/evaluate-performance/", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/performance/", + "redirect_document_id": false + }, + { + "source_path": "microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/performance/index", + "redirect_document_id": false + }, + { + "source_path": "microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/performance/reference", + "redirect_document_id": false + }, + { + "source_path": "microsoft-edge/devtools-guide-chromium/evaluate-performance/performance-reference.md", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/performance/performance-reference", + "redirect_document_id": false + }, + { + "source_path": "microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify.md", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/performance/unminify", + "redirect_document_id": false + }, + { + "source_path": "microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/performance/selector-stats", "redirect_document_id": false }, { diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index 9ade7ba8bd..1d538f63b1 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -486,7 +486,7 @@ Learn how to customize DevTools to fit your needs. Covers: * Move tools in the bottom **Drawer** (now the **Quick View** panel). * Customize the text size. * Customize the theme. -* Use the Command Menu keyboard shortcuts to quickly customize DevTools. +* Use the **Command Menu** keyboard shortcuts to quickly customize DevTools. See also: * [Overview of DevTools](../devtools-guide-chromium/overview.md#change-where-devtools-is-docked-in-the-browser) @@ -650,7 +650,7 @@ Covers: See also: * [What's New in DevTools 96](../devtools-guide-chromium/whats-new/2021/11/devtools.md) -* [Microsoft Edge DevTools extension for Visual Studio Code](/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension) +* [Microsoft Edge DevTools extension for Visual Studio Code](../visual-studio-code/microsoft-edge-devtools-extension.md) diff --git a/microsoft-edge/developer/index.yml b/microsoft-edge/developer/index.yml index 5a1b388ddd..a59e9b8820 100644 --- a/microsoft-edge/developer/index.yml +++ b/microsoft-edge/developer/index.yml @@ -242,7 +242,7 @@ landingContent: - text: Develop experiences for the sidebar in Microsoft Edge url: ../web-platform/sidebar.md - - text: Detect Windows 11 using User-Agent Client Hints + - text: Detect Windows 11 and CPU architecture using User-Agent Client Hints url: ../web-platform/how-to-detect-win11.md - text: Customize the password reveal button diff --git a/microsoft-edge/devtools-guide-chromium/3d-view/index.md b/microsoft-edge/devtools-guide-chromium/3d-view/index.md index 30c0e9c9ea..319197e132 100644 --- a/microsoft-edge/devtools-guide-chromium/3d-view/index.md +++ b/microsoft-edge/devtools-guide-chromium/3d-view/index.md @@ -36,7 +36,7 @@ You can open the **3D View** tool either in the **Activity Bar** or in the **Qui * To get maximum canvas space, open the **3D View** tool in the **Activity Bar**. -* To use the **Elements** tool and **3D View** tool at the same time, open the **3D View** tool in the **Quick View** panel. This enables you to view the DOM tree elements represented in the 3D canvas. This is the default; in the Command Menu, **Show 3D View** is indicated as opening in the **Quick View** panel. +* To use the **Elements** tool and **3D View** tool at the same time, open the **3D View** tool in the **Quick View** panel. This enables you to view the DOM tree elements represented in the 3D canvas. This is the default; in the **Command Menu**, **Show 3D View** is indicated as opening in the **Quick View** panel. @@ -125,7 +125,7 @@ The **Slow scroll rects** checkbox highlights sections of the page that cause sl This checkbox highlights (in pink) the boxes of the rendered webpage that may cause these performance issues. -This checkbox is similar to the **Scrolling performance issues** checkbox in the **Rendering** tool, which highlights the slow rects on the page directly (in yellow). See [Find scroll performance issues in realtime](../evaluate-performance/reference.md#find-scroll-performance-issues-in-realtime) in _Performance features reference_. Both checkboxes are based on the same debugging info, but these two tools present this information differently. +This checkbox is similar to the **Scrolling performance issues** checkbox in the **Rendering** tool, which highlights the slow rects on the page directly (in yellow). See [Find scroll performance issues in realtime](../performance/reference.md#find-scroll-performance-issues-in-realtime) in _Performance features reference_. Both checkboxes are based on the same debugging info, but these two tools present this information differently. diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/all-default-tools.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/all-default-tools.png index 573aaf0417..7e42c7c200 100644 Binary files a/microsoft-edge/devtools-guide-chromium/about-tools-images/all-default-tools.png and b/microsoft-edge/devtools-guide-chromium/about-tools-images/all-default-tools.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/application-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/application-icon.png new file mode 100644 index 0000000000..8737a8a039 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/application-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/console-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/console-icon.png new file mode 100644 index 0000000000..985f23d234 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/console-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/elements-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/elements-icon.png new file mode 100644 index 0000000000..8e2d255d70 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/elements-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/memory-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/memory-icon.png new file mode 100644 index 0000000000..88c6eea08e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/memory-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/network-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/network-icon.png new file mode 100644 index 0000000000..cbdb1b17c5 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/network-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/performance-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/performance-icon.png new file mode 100644 index 0000000000..e537386c86 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/performance-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/sources-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/sources-icon.png new file mode 100644 index 0000000000..2d92c8090b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/sources-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/welcome-icon.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/welcome-icon.png new file mode 100644 index 0000000000..e12bbbf14a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/about-tools-images/welcome-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index f4409a8fcd..28d7522afc 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -6,83 +6,113 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 03/01/2024 +ms.date: 03/24/2025 --- # About the list of tools -DevTools provides more than 30 tools: +DevTools provides more than 30 tools, consisting of _Default tools_ and _More tools_. -* Two icons on the **Activity Bar**, for the **Inspect tool** (![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png)) and **Device Emulation** (![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png)). -* Three permanent tool tabs on the **Activity Bar**, for the **Elements**, **Console**, and **Sources** tools. -* Optional tabs, for optional tools such as the **Welcome** and **Network** tools. -* More optional tools, on the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** tool. + + +## Default tools + +By default, the following tools are listed in the **Activity bar** at the top of DevTools: + +* ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool** +* ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation** +* ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome** +* ![Elements icon](./about-tools-images/elements-icon.png) **Elements** +* ![Console icon](./about-tools-images/console-icon.png) **Console** +* ![Sources icon](./about-tools-images/sources-icon.png) **Sources** +* ![Network icon](./about-tools-images/network-icon.png) **Network** +* ![Performance icon](./about-tools-images/performance-icon.png) **Performance** +* ![Memory icon](./about-tools-images/memory-icon.png) **Memory** +* ![Application icon](./about-tools-images/application-icon.png) **Application** ![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png) -The following features are additional ways to access the tools: -* The **Quick View** panel is an additional toolbar and area to hold tools, below or to the right of the **Activity Bar** panel. -* The **Command Menu** is a way to directly use features of tools. -* The **Settings** pages can turn on additional features of tools. + +#### Overview of the default tools + +| Tool | Purpose | Article | +| --- | --- | --- | +| ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect** | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | +| ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | +| ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome** | The **Welcome** tool opens when you first open DevTools. It displays links to developer docs, latest features, Release Notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) | +| ![Elements icon](./about-tools-images/elements-icon.png) **Elements** | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) | +| ![Console icon](./about-tools-images/console-icon.png) **Console** | An intelligent, rich command line within DevTools. A great companion tool to use with others tools. Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | [Console overview](console/index.md) | +| ![Sources icon](./about-tools-images/sources-icon.png) **Sources** | Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | [Sources tool overview](sources/index.md) | +| ![Network icon](./about-tools-images/network-icon.png) **Network** | Use the **Network** tool to make sure that resources are being downloaded or uploaded as expected. Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | [Inspect network activity](network/index.md) | +| ![Performance icon](./about-tools-images/performance-icon.png) **Performance** | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | [Analyze runtime performance (tutorial)](evaluate-performance/index.md) | +| ![Memory icon](./about-tools-images/memory-icon.png) **Memory** | Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. | [Fix memory problems](memory-problems/index.md) | +| ![Application icon](./about-tools-images/application-icon.png) **Application** | Use the **Application** tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. | [The Application tool, to manage storage](storage/application-tool.md) | + +The **Elements**, **Console**, and **Sources** tools (tabs) are permanent, in the **Activity Bar**. The other tool tabs can be removed, or moved down to the **Quick View** toolbar. -## Overview of all tools +## More tools + +The **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Activity bar** lists additional, optional tools that can be added to the **Activity bar**. + +There's also a **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Quick View** toolbar at the bottom of DevTools. To show or hide the **Quick View** panel, press **Esc**; or click **Customize and control DevTools** (**...**) in the upper right, and then click **Toggle Quick View panel**. -Microsoft Edge DevTools includes the following tools. + + +#### Overview of tools in the More tools menu | Tool | Purpose | Article | | --- | --- | --- | -| **3D View** tool | Explore the web page translated into a 3D perspective. Debug your webpage by navigating through the DOM or z-index stacking context. | [Navigate webpage layers, z-index, and DOM using the 3D View tool](3d-view/index.md) | -| **Animations** tool | Inspect and modify CSS animation effects by using the **Animation Inspector** in the **Animations** tool. | [Inspect and modify CSS animation effects](inspect-styles/animations.md) | -| **Application** tool | Use the **Application** tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. | [The Application tool, to manage storage](storage/application-tool.md) | -| **Changes** tool | Tracks any changes you've made to CSS or JavaScript in DevTools. Shows you what changes to make to your actual source files after you use DevTools to modify your webpage files sent from the server. | [Track changes to files using the Changes tool](changes/changes-tool.md) | -| **Console** tool | An intelligent, rich command line within DevTools. A great companion tool to use with others tools. Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | [Console overview](console/index.md) | -| **Coverage** tool | Help you find unused JavaScript and CSS code, to speed up your page load and save your mobile users cellular data. | [Find unused JavaScript and CSS code with the Coverage tool](coverage/index.md) | -| **Crash analyzer** tool | Analyze crashes of your web app. You can input a JavaScript production stack trace, such as for non-fatal JavaScript exceptions, and then have your source maps applied to the stack trace so that you can debug faster. | [Crash analyzer tool](./crash-analyzer/index.md) | -| **CSS overview** tool | Help you better understand your page's CSS and identify potential improvements. | [CSS overview tool](css/css-overview-tool.md) | +| **3D View** | Explore the web page translated into a 3D perspective. Debug your webpage by navigating through the DOM or z-index stacking context. | [Navigate webpage layers, z-index, and DOM using the 3D View tool](3d-view/index.md) | +| **Animations** | Inspect and modify CSS animation effects by using the **Animation Inspector** in the **Animations** tool. | [Inspect and modify CSS animation effects](inspect-styles/animations.md) | +| **Changes** | Tracks any changes you've made to CSS or JavaScript in DevTools. Shows you what changes to make to your actual source files after you use DevTools to modify your webpage files sent from the server. | [Track changes to files using the Changes tool](changes/changes-tool.md) | +| **Coverage** | Help you find unused JavaScript and CSS code, to speed up your page load and save your mobile users cellular data. | [Find unused JavaScript and CSS code with the Coverage tool](coverage/index.md) | +| **Crash analyzer** | Analyze crashes of your web app. You can input a JavaScript production stack trace, such as for non-fatal JavaScript exceptions, and then have your source maps applied to the stack trace so that you can debug faster. | [Crash analyzer tool](./crash-analyzer/index.md) | +| **CSS overview** | Help you better understand your page's CSS and identify potential improvements. | [CSS overview tool](css/css-overview-tool.md) | | **Developer resources** | Shows resource URLs for the webpage. | [Developer resources tool](developer-resources/developer-resources.md) | -| **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | -| **Elements** tool | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) | -| **Inspect** tool | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | -| **Issues** tool | The **Issues** tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues. | [Find and fix problems using the Issues tool](issues/index.md) | -| **Lighthouse** tool | Use the Lighthouse tool to identify and fix common problems that affect your site's performance, accessibility, and user experience. | [Lighthouse tool](lighthouse/lighthouse-tool.md) | -| **Media** tool | Use this tool to view information and debug the media players per browser tab. | [View and debug media players information](media-panel/index.md) | -| **Memory** tool | Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. | [Fix memory problems](memory-problems/index.md) | -| **Memory Inspector** tool | Inspect JavaScript ArrayBuffer with the Memory Inspector. | [Inspect a JavaScript ArrayBuffer with the Memory Inspector tool](memory-inspector/memory-inspector-tool.md) | -| **Network** tool | Use the **Network** tool to make sure that resources are being downloaded or uploaded as expected. Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | [Inspect network activity](network/index.md) | -| **Network conditions** tool | Use the **Network conditions** tool to disable the browser cache, set network throttling, set the user agent string, and set Content-Encodings such as deflate, gzip, and br. | [Network conditions tool](network-conditions/network-conditions-tool.md) | -| **Network Console** tool | Use the **Network Console** tool to make changes to network requests (network calls) to see why they fail. Change and replay any of the network requests, and make detailed network API calls. | [Network Console tool](network-console/network-console-tool.md) | -| **Network request blocking** tool | Use the **Network request blocking** tool to test blocking network requests to a specified URL pattern and see how a webpage behaves. | [Network request blocking tool](network-request-blocking/network-request-blocking-tool.md) | -| **Performance** tool | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | [Introduction to the Performance tool](evaluate-performance/index.md) | -| **Performance monitor** tool | Provides a real-time view of the runtime performance of a webpage, to determine where performance problems come from, making a website run slowly. Finds whether problems are from high memory or CPU usage, too-frequent layout and style calculations, or too many DOM nodes and event listeners. | [Measure runtime performance of a page using the Performance monitor tool](performance-monitor/performance-monitor-tool.md) | -| **Quick source** tool | Use the **Quick source** tool to display or edit source files when using a tool other than the **Sources** tool. | [Display or edit source files using the Quick source tool](quick-source/quick-source-tool.md) | -| **Recorder** tool | Use the **Recorder** tool to record user flows manually, and then replay them automatically to speed up testing and performance investigations. | [Record and replay user flows and measure performance](recorder/index.md) | -| **Rendering** tool | Use the **Rendering** tool to see what your webpage looks like with different display options or vision deficiencies. | [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](rendering-tools/rendering-tool.md) | -| **Search** tool | Use the **Search** tool to find specific source files for a webpage, including HTML, CSS, JavaScript, and image files. | [Find source files for a page using the Search tool](search/search-tool.md) | -| **Security** tool | Inspects the security of a page. | [Understand security issues using the Security tool](security/index.md) | -| **Sensors** tool | Simulates different device orientations. | [Simulate device orientation with the Sensors tool](device-mode/orientation.md) | -| **Source Maps Monitor** tool | Use the **Source Maps Monitor** tool to monitor your source maps. | [Source Maps Monitor tool](source-maps-monitor/source-maps-monitor-tool.md) | -| **Sources** tool | Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | [Sources tool overview](sources/index.md) | -| **WebAudio** tool | Use the **WebAudio** tool to monitor WebAudio traffic. The **WebAudio** tool uses the WebAudio API. | [WebAudio tool](webaudio/webaudio-tool.md) | -| **WebAuthn** tool | Use the **WebAuthn** tool to create and interact with software-based virtual authenticators. | [Emulate authenticators and debug WebAuthn](webauthn/index.md) | -| **Welcome** tool | The **Welcome** tool opens when you first open DevTools. It displays links to developer docs, latest features, Release Notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) | +| **Issues** | The **Issues** tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues. | [Find and fix problems using the Issues tool](issues/index.md) | +| **Lighthouse** | Use the Lighthouse tool to identify and fix common problems that affect your site's performance, accessibility, and user experience. | [Lighthouse tool](lighthouse/lighthouse-tool.md) | +| **Media** | Use this tool to view information and debug the media players per browser tab. | [View and debug media players information](media-panel/index.md) | +| **Memory inspector** | Inspect JavaScript ArrayBuffer with the Memory inspector. | [Inspect a JavaScript ArrayBuffer with the Memory inspector tool](memory-inspector/memory-inspector-tool.md) | +| **Network conditions** | Use the **Network conditions** tool to disable the browser cache, set network throttling, set the user agent string, and set Content-Encodings such as deflate, gzip, and br. | [Network conditions tool](network-conditions/network-conditions-tool.md) | +| **Network Console** | Use the **Network Console** tool to make changes to network requests (network calls) to see why they fail. Change and replay any of the network requests, and make detailed network API calls. | [Network Console tool](network-console/network-console-tool.md) | +| **Network request blocking** | Use the **Network request blocking** tool to test blocking network requests to a specified URL pattern and see how a webpage behaves. | [Network request blocking tool](network-request-blocking/network-request-blocking-tool.md) | +| **Performance monitor** | Provides a real-time view of the runtime performance of a webpage, to determine where performance problems come from, making a website run slowly. Finds whether problems are from high memory or CPU usage, too-frequent layout and style calculations, or too many DOM nodes and event listeners. | [Measure runtime performance of a page using the Performance monitor tool](performance-monitor/performance-monitor-tool.md) | +| **Quick source** | Use the **Quick source** tool to display or edit source files when using a tool other than the **Sources** tool. | [Display or edit source files using the Quick source tool](quick-source/quick-source-tool.md) | +| **Recorder** | Use the **Recorder** tool to record user flows manually, and then replay them automatically to speed up testing and performance investigations. | [Record and replay user flows and measure performance](recorder/index.md) | +| **Rendering** | Use the **Rendering** tool to see what your webpage looks like with different display options or vision deficiencies. | [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](rendering-tools/rendering-tool.md) | +| **Search** | Use the **Search** tool to find specific source files for a webpage, including HTML, CSS, JavaScript, and image files. | [Find source files for a page using the Search tool](search/search-tool.md) | +| **Security** | Inspects the security of a page. | [Understand security issues using the Security tool](security/index.md) | +| **Sensors** | Simulates different device orientations. | [Simulate device orientation with the Sensors tool](device-mode/orientation.md) | +| **Source Maps Monitor** | Use the **Source Maps Monitor** tool to monitor your source maps. | [Source Maps Monitor tool](source-maps-monitor/source-maps-monitor-tool.md) | +| **WebAudio** | Use the **WebAudio** tool to monitor WebAudio traffic. The **WebAudio** tool uses the WebAudio API. | [WebAudio tool](webaudio/webaudio-tool.md) | +| **WebAuthn** | Use the **WebAuthn** tool to create and interact with software-based virtual authenticators. | [Emulate authenticators and debug WebAuthn](webauthn/index.md) | +The **More tools** (**+**) menu in the **Activity Bar** and in the **Quick View** toolbar is dynamic: it omits any tab tools that are open on that toolbar. - -#### Experimental tools -Microsoft Edge DevTools potentially includes additional tools, if you select the experiment's check box in DevTools **Settings > Experiments**. For example: + +## Additional ways to access the tools -| Tool | Purpose | Article | -| --- | --- | --- | -| **Protocol monitor** tool | Displays the DevTools protocol messages that are sent and received by DevTools, to debug the inspected page. | [Protocol Monitor](./experimental-features/index.md#protocol-monitor) in _Experimental features_. | +The following features are additional ways to access the tools: + +* The **Quick View** panel is an additional toolbar and area to hold tools, below or to the right of the **Activity Bar** panel. + +* The **Command Menu** is a way to directly use features of tools. + +* The **Settings** pages can turn on additional features of tools. -## The More Tools menus +## Experimental tools -The **More tools** (**+**) menu in the **Activity Bar** and in the **Quick View** toolbar is dynamic: it omits any tab tools that are open on that toolbar. +Microsoft Edge DevTools potentially includes additional tools, if you select the experiment's check box in DevTools **Settings > Experiments**. For example: + +| Tool | Purpose | Article | +| --- | --- | --- | +| **Protocol monitor** | Displays the DevTools protocol messages that are sent and received by DevTools, to debug the inspected page. | [Protocol Monitor](./experimental-features/index.md#protocol-monitor) in _Experimental features_. | + diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md index 12de824f1b..58a3e94ba0 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md @@ -84,7 +84,7 @@ In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any ## Navigate between tools -You can move among the tools by using the keyboard navigation keys or by using the Command Menu. +You can move among the tools by using the keyboard navigation keys or by using the **Command Menu**. @@ -106,7 +106,7 @@ Known issues: #### Navigate by Command Menu -To select a specific tool, use the [Command Menu](../command-menu/index.md). In the Command Menu, a tool is indicated as either a _Panel_ or _Quick View_ item. +To select a specific tool, use the [Command Menu](../command-menu/index.md). In the **Command Menu**, a tool is indicated as either a _Panel_ or _Quick View_ item. 1. With DevTools open, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md b/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md index c1da38badc..37c55d15a8 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md @@ -54,13 +54,13 @@ To specify the CSS to use for both light and dark schemes, use the [prefers-colo 1. Modify your CSS and view the rendered result the same way as for any other webpage. See [Get started viewing and changing CSS](../css/index.md). -1. To restore the setting, in the Command Menu, type **emulate** or **scheme** and then select **Do not emulate CSS prefers-color-scheme**. Your own operating system's setting for light or dark mode is applied. +1. To restore the setting, in the **Command Menu**, type **emulate** or **scheme** and then select **Do not emulate CSS prefers-color-scheme**. Your own operating system's setting for light or dark mode is applied. ## See also -* [Analyze rendering performance with the Rendering tool](../evaluate-performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_. +* [Analyze rendering performance with the Rendering tool](../performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_. The **Rendering** tool is also used for the following tasks: diff --git a/microsoft-edge/devtools-guide-chromium/command-menu/index.md b/microsoft-edge/devtools-guide-chromium/command-menu/index.md index e5def277a5..94712ddc20 100644 --- a/microsoft-edge/devtools-guide-chromium/command-menu/index.md +++ b/microsoft-edge/devtools-guide-chromium/command-menu/index.md @@ -23,7 +23,7 @@ ms.date: 09/12/2023 limitations under the License. --> # Run commands in the Command Menu -The Command Menu provides a fast way to navigate the Microsoft Edge DevTools UI and accomplish common tasks. The Command Menu is similar to the [Command Palette in Visual Studio Code](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette): +The **Command Menu** provides a fast way to navigate the Microsoft Edge DevTools UI and accomplish common tasks. The **Command Menu** is similar to the [Command Palette in Visual Studio Code](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette): ![Using the Command Menu to disable JavaScript](./index-images/command-menu-run-command-java.png) @@ -37,7 +37,7 @@ The Command Menu provides a fast way to navigate the Microsoft Edge DevTools UI ## Open the Command Menu -To open the Command Menu: +To open the **Command Menu**: 1. To open DevTools, right-click a webpage and then select **Inspect**. @@ -57,7 +57,7 @@ To open the Command Menu: ## Display other available actions -To show other kinds of Command Menu actions besides **Run Command**, delete the `>` character and then type **?**: +To show other kinds of **Command Menu** actions besides **Run Command**, delete the `>` character and then type **?**: ![Other available actions](./index-images/command-menu-help.png) diff --git a/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction.md b/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction.md index b38dc0ec67..e9f5819a9f 100644 --- a/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction.md +++ b/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction.md @@ -340,7 +340,7 @@ unmonitorEvents(window, ['resize', 'scroll']); ## Save DOM interaction scripts as snippets -If you enter the same DOM interaction code repeatedly in the **Console**, consider instead saving the code as a snippet and then running the snippet. Snippets are saved in the **Sources** tool, and you can run them from there or from the **Command menu**. To learn more, see [Run snippets of JavaScript on any webpage](../javascript/snippets.md). +If you enter the same DOM interaction code repeatedly in the **Console**, consider instead saving the code as a snippet and then running the snippet. Snippets are saved in the **Sources** tool, and you can run them from there or from the **Command Menu**. To learn more, see [Run snippets of JavaScript on any webpage](../javascript/snippets.md). diff --git a/microsoft-edge/devtools-guide-chromium/console/reference.md b/microsoft-edge/devtools-guide-chromium/console/reference.md index 9c0706006e..81c69af3da 100644 --- a/microsoft-edge/devtools-guide-chromium/console/reference.md +++ b/microsoft-edge/devtools-guide-chromium/console/reference.md @@ -87,7 +87,7 @@ To open the **Console** tool from the **Command Menu**: 1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). - The Command Menu initially opens with a `>` character prepended to its text box. + The **Command Menu** initially opens with a `>` character prepended to its text box. 1. Type **Show Console** and then select either of the **Show Console** options: diff --git a/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md b/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md index 8e53e5c7a6..54d0dd4c98 100644 --- a/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md +++ b/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md @@ -159,11 +159,11 @@ To open the **Crash analyzer** tool by using the DevTools **More tools** menu: ###### From the Command Menu -To open the **Crash analyzer** tool by using the Command Menu: +To open the **Crash analyzer** tool by using the **Command Menu**: 1. In Microsoft Edge, select **Settings and more** (![Edge "Settings and more" icon](./index-images/edge-settings-and-more-icon.png)) > **More tools** > **Open Developer tools** (**Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS)). DevTools opens. -1. In DevTools, click the **Customize and control DevTools** (![The "Customize and control DevTools" icon](./index-images/customize-and-control-devtools-icon.png)) button, and then select **Run command**. Or, when DevTools has focus, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). The Command Menu opens. +1. In DevTools, click the **Customize and control DevTools** (![The "Customize and control DevTools" icon](./index-images/customize-and-control-devtools-icon.png)) button, and then select **Run command**. Or, when DevTools has focus, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). The **Command Menu** opens. 1. Start typing **crash analyzer**, and then select the **Show Crash analyzer [Quick View]** command. The **Crash analyzer** tool opens in the **Quick View** panel. diff --git a/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md b/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md index f0d7f4d914..d8a717373d 100644 --- a/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md +++ b/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md @@ -163,7 +163,7 @@ From here, you can further analyze the impact of your changes and individual sel ###### See also * [Structure of a selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors#structure_of_a_selector) in _CSS selectors_. -* [Analyze CSS selector performance during Recalculate Style events](../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../performance/selector-stats.md) @@ -200,4 +200,4 @@ To help fix contrast issues, check out the [Text contrast](../accessibility/refe ## See also * [Structure of a selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors#structure_of_a_selector) in _CSS selectors_. -* [Analyze CSS selector performance during Recalculate Style events](../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../performance/selector-stats.md) diff --git a/microsoft-edge/devtools-guide-chromium/customize/index.md b/microsoft-edge/devtools-guide-chromium/customize/index.md index c2e74530ff..a50df83a05 100644 --- a/microsoft-edge/devtools-guide-chromium/customize/index.md +++ b/microsoft-edge/devtools-guide-chromium/customize/index.md @@ -123,7 +123,7 @@ _Published on 5 May 2022._ Learn how to customize DevTools to fit your needs. -This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the **Drawer** (now **Quick View** panel) at the bottom of DevTools, and how to customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools. +This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the **Drawer** (now **Quick View** panel) at the bottom of DevTools, and how to customize the text size and theme. The video also explains how you can use the **Command Menu** keyboard shortcuts to quickly customize DevTools. diff --git a/microsoft-edge/devtools-guide-chromium/customize/placement.md b/microsoft-edge/devtools-guide-chromium/customize/placement.md index 05e2e8d56b..6c96f6313d 100644 --- a/microsoft-edge/devtools-guide-chromium/customize/placement.md +++ b/microsoft-edge/devtools-guide-chromium/customize/placement.md @@ -64,7 +64,7 @@ The following image shows DevTools in the right side the browser window, which i ## Change where DevTools is docked by using the Command Menu -1. Open the Command Menu. To do this, click the **Customize and control DevTools** (![Customize and control DevTools icon](./placement-images/customize-icon.png)) menu button, and then click **Run command**. Or, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS). +1. Open the **Command Menu**. To do this, click the **Customize and control DevTools** (![Customize and control DevTools icon](./placement-images/customize-icon.png)) menu button, and then click **Run command**. Or, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS). 1. Type **dock**, and then select a dock command: diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md b/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md index d96ba365af..fdb032ff4b 100644 --- a/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md +++ b/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md @@ -12,7 +12,7 @@ ms.date: 07/21/2023 You can emulate the following dual-screen and foldable devices in Microsoft Edge DevTools, using the Device Emulation feature of DevTools: -* [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) +* Surface Duo * [Samsung Galaxy Fold](https://www.samsung.com/global/galaxy/galaxy-fold) Emulate the devices and toggle between the following postures: @@ -26,9 +26,9 @@ Emulate the devices and toggle between the following postures: ## Test on foldable and dual-screen devices -When you emulate the [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) in a dual-screen posture in Microsoft Edge, the seam (the space between the two screens) is drawn over your website or app. +When you emulate the Surface Duo in a dual-screen posture in Microsoft Edge, the seam (the space between the two screens) is drawn over your website or app. -The emulated display matches the way your website (or app) renders in the [Microsoft Edge Android app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) while running on [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo). You may have to update your website (or app) to display better along the seam. For more information about adapting your website (or app) to the seam, see [How to work with the seam](/dual-screen/introduction#how-to-work-with-the-seam). +The emulated display matches the way your website (or app) renders in the [Microsoft Edge Android app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) while running on Surface Duo. You may have to update your website (or app) to display better along the seam. For more information about adapting your website (or app) to the seam, see [How to work with the seam](/dual-screen/introduction#how-to-work-with-the-seam). The [Device Toolbar](../device-mode/index.md#simulate-a-mobile-viewport) has additional features to help you test your website or app in multiple postures and orientations. Click **Rotate** (![Rotate](./dual-screen-and-foldables-images/rotate-dark-icon.png)) to rotate the viewport to landscape orientation. Combine the feature with **Span** (![Span](./dual-screen-and-foldables-images/span-dark-icon.png)) to toggle between single-screen or folded and dual-screen or unfolded postures. Together, the features allow you to test your website or app in all four possible postures and orientations. @@ -44,7 +44,7 @@ The **Experimental Web Platform features** (![ExperimentalApis](./dual-screen-an ###### Pointer shaking or stuttering -When you use a [Microsoft Remote Desktop client](/windows-server/remote/remote-desktop-services/clients/remote-desktop-clients) to connect to a remote PC and emulate the [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) or [Samsung Galaxy Fold](https://www.samsung.com/global/galaxy/galaxy-fold), the pointer may shake or stutter. If you run into the issue, contact the Microsoft Edge DevTools team. +When you use a [Microsoft Remote Desktop client](/windows-server/remote/remote-desktop-services/clients/remote-desktop-clients) to connect to a remote PC and emulate the Surface Duo or [Samsung Galaxy Fold](https://www.samsung.com/global/galaxy/galaxy-fold), the pointer may shake or stutter. If you run into the issue, contact the Microsoft Edge DevTools team. diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/index.md b/microsoft-edge/devtools-guide-chromium/device-mode/index.md index 9e4f353715..47d564545d 100644 --- a/microsoft-edge/devtools-guide-chromium/device-mode/index.md +++ b/microsoft-edge/devtools-guide-chromium/device-mode/index.md @@ -79,7 +79,7 @@ In the following example, the viewport width is set to `400` and the height is s ![The handles for changing the dimensions of the viewport when in Responsive Viewport Mode](./index-images/device-toolbar-handles-highlighted.png) -If you need more space on your screen, you can change where DevTools is docked in the browser window. See [Change DevTools placement (Undock, Dock to bottom, Dock to left)](/microsoft-edge/devtools-guide-chromium/customize/placement). +If you need more space on your screen, you can change where DevTools is docked in the browser window. See [Change DevTools placement (Undock, Dock to bottom, Dock to left)](../customize/placement.md). @@ -353,7 +353,7 @@ If your page depends on geolocation information from a mobile device to render p ![Sensors for geolocation](./index-images/device-toolbar-more-tools-sensors.png) - Or, open the Command Menu by selecting **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Type `Sensors` and then select **Show Sensors**: + Or, open the **Command Menu** by selecting **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Type `Sensors` and then select **Show Sensors**: ![Showing Sensors for geolocation, from the Command Menu](./index-images/device-toolbar-command-menu-sensors.png) @@ -380,7 +380,7 @@ To set the device orientation: ![The Sensors command on the More tools menu](./index-images/device-toolbar-more-tools-sensors.png) - Or, open the Command Menu by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Type `Sensors`, and then select **Show Sensors**: + Or, open the **Command Menu** by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Type `Sensors`, and then select **Show Sensors**: ![Show Sensors for orientation](./index-images/device-toolbar-command-menu-sensors.png) @@ -405,7 +405,7 @@ To set the user agent string: ![Network conditions entry in the 'More tools' menu](./index-images/device-toolbar-more-tools-network-conditions.png) - Or, open the Command Menu by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS).Type `Network conditions`, and select **Show Network conditions**: + Or, open the **Command Menu** by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS).Type `Network conditions`, and select **Show Network conditions**: ![Showing network conditions](./index-images/device-toolbar-command-menu-network-conditions.png) diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/load-profile.png b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/load-profile.png deleted file mode 100644 index f6b1d5b3eb..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/load-profile.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/record-highlight.png b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/record-highlight.png deleted file mode 100644 index e8b39a88da..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/record-highlight.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-case-icon.png b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-case-icon.png deleted file mode 100644 index 61b9d05bf7..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-case-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-regex-icon.png b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-regex-icon.png deleted file mode 100644 index 00f2f2adc7..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-regex-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md deleted file mode 100644 index 3a7a61d106..0000000000 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md +++ /dev/null @@ -1,758 +0,0 @@ ---- -title: Performance features reference -description: A reference on all the ways to record and analyze performance in Microsoft Edge DevTools. -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: conceptual -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 04/15/2024 ---- - -# Performance features reference - -This page is a comprehensive reference of DevTools features that are related to analyzing performance. - -For a step-by-step tutorial on how to analyze the performance of a page using the **Performance** tool, see [Introduction to the Performance tool](index.md). - -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)_. - - - -## Open the Performance tool - -To use the sections in this page, 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. 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. - - - -## Record performance - -The sections below describe how to record the performance of a webpage in DevTools. - - - -#### Record runtime performance - -To analyze the performance of a webpage while it's running (rather than while it's loading): - -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. Click the **Record** (![Record icon](./reference-images/record-icon.png)) button. - - ![Record](./reference-images/record-highlight.png) - -1. Interact with the page for a while. DevTools records all page activity that occurs as a result of your interactions. - -1. Click **Record** again. Or, click **Stop** to stop recording. - - The **Performance** tool displays the recording. - - - -#### Record load performance - -To analyze the performance of a webpage while it's loading (rather than while it's running): - -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. 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) - - - -#### Capture screenshots while recording - -To capture a screenshot of every frame while recording, select the **Screenshots** checkbox: - -![The Screenshots checkbox](./reference-images/capture-screenshots-checkbox.png) - -To learn how to interact with screenshots, see [View a screenshot](#view-a-screenshot), below. - - - -#### Force garbage collection while recording - -To force garbage collection while you are recording a page, click the **Collect garbage** (![Collect garbage icon](./reference-images/collect-garbage-icon.png)) button: - -![Collect garbage](./reference-images/collect-garbage-button.png) - - - -#### 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: - -![The Capture Settings section at top of the Performance tool](./reference-images/capture-settings.png) - - - -#### Disable JavaScript samples - -By default, the **Main** section of a recording displays detailed call stacks of JavaScript functions that were called during the recording. To disable the JavaScript call stacks: - -1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. - -1. Select the **Disable JavaScript samples** checkbox. - -1. Take a recording of the page. - - -The following two figures show the difference between disabling and enabling JavaScript samples. The **Main** section of the recording is much shorter when JavaScript sampling is disabled, because the recording omits the JavaScript call stacks. - -An example of a recording when JS samples are disabled: - -![An example of a recording when JS samples are disabled.](./reference-images/disable-javascript-samples-checkbox-on.png) - -An example of a recording when JS samples are enabled: - -![An example of a recording when JS samples are enabled.](./reference-images/disable-javascript-samples-checkbox-off.png) - - - -#### Throttle the network while recording - - -To throttle the network while recording: - -1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. - -1. Set **Network** to the desired level of throttling. - - A warning icon is displayed on the **Network** tool's tab, to remind you that throttling is enabled. - - - -#### Throttle the CPU while recording - - -To throttle the CPU while recording: - -1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. - -1. Set **CPU** to the desired level of throttling. - - A warning icon is displayed on the **Performance** tool's tab, to remind you that throttling is enabled. - -Throttling is relative to the capabilities of your computer. For example, the **2x slowdown** option makes your CPU operate twice as slow than normal. DevTools don't truly simulate the CPUs of mobile devices, because the architecture of mobile devices is very different from that of desktops and laptops. - - - -#### Turn on advanced rendering instrumentation - -To record more rendering information, enable advanced rendering instrumentation: - -1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. - -1. Select the **Enable advanced rendering instrumentation (slow)** checkbox. - -With advanced rendering instrumentation enabled, DevTools records more information about the rendering of the page, such as layer information, and CSS selector statistics. The performance of the page may be affected. - -For example, see [View layers information](#view-layers-information), and [View CSS selector statistics](#view-css-selector-statistics), below. - - - -## Save a recording - -To save a recording as a file on your device, right-click the recording and then select **Save profile**: - -![The 'Save profile' right-click menuitem](./reference-images/save-profile.png) - - - -## Load a recording - -To load a recording from a file, right-click in the **Performance** tool and then select **Load profile**: - -![The 'Load profile' right-click menuitem](./reference-images/load-profile.png) - -You can right-click in an existing recording, or on the screen that's displayed in the **Performance** tool when there are no recordings. - - - -## Clear the previous recording - -After making a recording, to remove that recording from the **Performance** tool, click the **Clear recording** (![Clear recording icon](./reference-images/clear-recording-icon.png)) button: - -![Clear recording](./reference-images/clear-button.png) - - - -## Analyze a performance recording - -After you [record runtime performance](#record-runtime-performance) or [record load performance](#record-load-performance), the **Performance** tool displays a lot of data about the recording. Use the recorded data to analyze the performance of your webpage. - - - -#### Select a portion of a recording - -You can select a portion of a recording by using a mouse, keyboard, or trackpad. - - -###### Mouse - -To select a portion of a recording by using the mouse: - -* Drag your mouse left or right across the **Overview**. The **Overview** is the section that contains the **CPU** and **NET** charts: - -![Drag the mouse across the Overview to zoom](./reference-images/zoom-highlighted.png) - -To scroll a long flame chart in the **Main** section or in any of the neighboring sections, click and hold while dragging up and down. Drag left or right to move which portion of the recording is selected. - - -###### Keyboard - -To select a portion of a recording by using the keyboard: - -1. Select the background of the **Main** section, or select the background of a section that's next to the **Main** section, such as **Interactions**, **Network**, or **GPU**. This keyboard workflow only works when one of these sections is in focus. - -1. Press `W` or `S` to zoom in or out. Press `A` or `D` to move left or right. - - -###### Trackpad - -To select a portion of a recording by using a trackpad: - -1. Hover over the **Overview** section or the **Details** section. The **Overview** section is the area containing the **FPS**, **CPU**, and **NET** charts. The **Details** section is the area containing the **Main** section and the **Interactions** section. - -1. Using two fingers, swipe up to zoom out, or down to zoom in. Using two fingers, swipe left to move left, or right to move right. - - - -#### Search activities - -To open the search box at the bottom of the **Performance** tool: - -1. Press **Ctrl+F** (Windows, Linux) or **Command+F** (macOS). - - The search box appears at the bottom of the **Performance** tool: - - ![The search box](./reference-images/search-regex.png) - -1. Enter a query in the search box, such as "recalculate style", to find all activities that match that query. - - The matching activities are highlighted in the **Main** section as you type, and the total number of matches appears in the search box. The first matching activity is selected, outlined in blue: - - ![The search box with a query and highlighted activities](./reference-images/search-highlighted.png) - -To navigate among the activities that match your query: - -* To select the next activity, press **Enter** or click the **Next** (![Next](./reference-images/next-icon.png)) button. - -* To select the previous activity, press **Shift+Enter** or click the **Previous** (![Previous](./reference-images/previous-icon.png)) button. - -To modify the query settings: - -* To make the query case-sensitive, click the **Case sensitive** (![Case sensitive](./reference-images/search-case-icon.png)) button. - -* To use a regular expression in your query, click the **Regex** (![Regex](./reference-images/search-regex-icon.png)) button. - -To hide the search box, click the **Cancel** button. - - - -#### View main thread activity - -Use the **Main** section to view the activity that occurred on the main thread of the page: - -![The Main section](./reference-images/main-zoomed.png) - -Select an event to view more information about it in the **Summary** tab. DevTools outlines the selected event: - -![More information about the anonymous function in the Summary tab](./reference-images/summary-me.png) - -DevTools represents main thread activity with a flame chart: - -![A flame chart](./reference-images/main-flame-chart.png) - -The x-axis represents the recording over time. The y-axis represents the call stack. An event that's near the top causes the events that are below it; for example, in the previous figure, an `input` event caused a `Function Call`, which ran an anonymous function that called `filterByCamera` and then `populateGallery`. The `populateGallery` function then made DOM changes by calling `set innerHTML`. - -DevTools assigns scripts random colors. In the previous figure, function requests from a script are colored fuchsia (purple-pink). The darker yellow represents scripting activity, and the purple event represents rendering activity. These darker yellow and purple events are consistent across all recordings. - -If you want to hide the detailed flame chart of JavaScript requests, see [Disable JavaScript samples](#disable-javascript-samples), above. -When JavaScript samples are disabled, only high-level events are displayed, such as `Event: input` and `Function Call` from the previous figure. - - - - -#### View activities in a table - -After recording a page, in addition to the **Main** section to analyze activities, DevTools also provides three tabular views for analyzing activities. Each view gives you a different perspective on the activities: - -* To view the activities where the most time was directly spent, use the [Bottom-Up](#the-bottom-up-tab) tab. - -* To view the root activities that cause the most work, use the [Call Tree](#the-call-tree-tab) tab. - -* To view the activities in the order in which they occurred during the recording, use the [Event Log](#the-event-log-tab) tab. - - -###### Root activities - - - -Open the [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) webpage in a new window or tab. The _activity tabs_ are the **Bottom-Up**, **Call Tree**, and **Event Log** tabs at the bottom of the **Performance** tool. These tabs display root activities. - - - -_Root activities_ are activities that cause the browser to do some work. For example, when you click a webpage, the browser runs an `Event` activity as the root activity. That `Event` activity may cause other activities to run, such as a handler. - -In the flame chart of the **Main** section, root activities are at the top of the chart. In the **Call Tree** and **Event Log** tabs, root activities are the top-level items. - -For an example of root activities, see [The Call Tree tab](#the-call-tree-tab), below. - - - - -###### The Bottom-Up tab - -Open the [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) webpage in a new window or tab. - -Use the **Bottom-Up** tab to view which activities directly took up the most time in aggregate. - -The **Bottom-Up** tab only displays activities during the selected portion of the recording: - -![The Bottom-Up tab](./reference-images/bottoms-up.png) - -To learn how to select a portion of a recording, see [Select a portion of a recording](#select-a-portion-of-a-recording), above. - -In the **Main** section flame chart of the previous figure, almost all of the time was spent running the `a`, `b`, and `c` functions. The top activities in the **Bottom-Up** tab of the previous figure are also `a`, `b`, and `c`. In the **Bottom-Up** tab, the next most expensive activity is `Minor GC`. - -The **Self Time** column represents the aggregated time spent directly in that activity, across all of the occurrences. - -The **Total Time** column represents aggregated time spent in that activity or any of the children. - - -###### The Call Tree tab - -Open the [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) webpage in a new window or tab. - -Use the **Call Tree** tab to view which [root activities](#root-activities) cause the most work. - -The **Call Tree** tab only displays activities during the selected portion of the recording: - -![The Call Tree tab](./reference-images/call-tree.png) - -To learn how to select a portion of a recording, see [Select a portion of a recording](#select-a-portion-of-a-recording), above. - -In the previous figure, the top-level items in the **Activity** column, such as `Event Timing`, are root activities. The nesting represents the call stack. For example, in the previous figure, `Event Timing` caused `Event: mouseup`, which caused `Function Call`, which cause `(anonymous)`, and so on. - -**Self Time** represents the time directly spent in that activity. **Total Time** represents the time spent in that activity or any of the children. - -Click **Self Time**, **Total Time**, or **Activity** to sort the table by that column. - -Use the **Filter** text box to filter events by activity name. - -By default the **Grouping** menu is set to **No Grouping**. Use the **Grouping** menu to sort the activity table based on various criteria. - -Click **Show Heaviest Stack** (![Show Heaviest Stack](./reference-images/show-heaviest-stack-icon.png)) to reveal another table to the right of the **Activity** table. Click on an activity to populate the **Heaviest Stack** table. The **Heaviest Stack** table displays which children of the selected activity took the longest time to run. - - -###### The Event Log tab - -Use the **Event Log** tab to view activities in the order in which they occurred during the recording. - -The **Event Log** tab only displays activities during the selected portion of the recording: - -![The Event Log tab](./reference-images/event-log.png) - -To learn how to select a portion of a recording, see [Select a portion of a recording](#select-a-portion-of-a-recording), above. - -The **Start Time** column represents the point at which that activity started, relative to the start of the recording. For example, the start time of `175.7 ms` for the selected item in the previous figure means that activity started 175.7 ms after the recording started. - -The **Self Time** column represents the time spent directly in that activity. - -The **Total Time** column represents time spent directly in that activity or in any of the children. - -Click the **Start Time**, **Self Time**, or **Total Time** column heading, to sort the table by that column. - -Use the **Filter** text box to filter activities by name. - -Use the **Duration** menu to filter out any activities that took less than 1 ms or 15 ms. By default, the **Duration** menu is set to **All**, meaning that all activities are shown. - -Clear the **Loading**, **Scripting**, **Rendering**, or **Painting** checkboxes to filter out all activities from those categories. - - - -#### View GPU activity - -View GPU activity in the **GPU** section of the **Performance** tool: - -![The GPU section](./reference-images/gpu-zoomed.png) - - - - - - -#### View interactions - -Use the **Interactions** section to find and analyze user interactions that happened during the recording: - -![The Interactions section](./reference-images/interactions-animation.png) - -A red line at the bottom of an interaction represents time spent waiting for the main thread. - -Click an interaction to view more information about it in the **Summary** tab. - - - -#### Analyze frames per second (FPS) - -DevTools provides two ways to analyze frames per second: - -* Use [the Frames section](#the-frames-section) to view how long a particular frame took. - -* Use the **FPS meter** for a realtime estimate of FPS as the page runs. See [View frames per second in realtime with the FPS meter](#view-frames-per-second-in-realtime-with-the-fps-meter), below. - - -###### The Frames section - -The **Frames** section tells you exactly how long a particular frame took. - -Hover over a frame to view a tooltip with more information about it: - -![Hovering on a frame](./reference-images/frames-hover.png) - -Select a frame to view more information about the frame in the **Summary** tab at the bottom of the **Performance** tool. DevTools outlines the selected frame in blue: - -![View a frame in the Summary tab](./reference-images/frames-summary.png) - - - -#### View network requests - -Expand the **Network** section to view a waterfall of network requests that occurred during the recording: - -![The Network section](./reference-images/network.png) - -Click on a request to view more information about it in the **Summary** tab: - -![More information about the photo-gallery request in the Summary tab](./reference-images/summary-network.png) - -Requests in the **Network** section are color-coded as follows: - -* Blue background: HTML request. -* Purple background: CSS request. -* Dark yellow background: JS request. -* Green background: image request. - -Requests have squares in the top-left corner: -* A darker-blue square in the top-left of a request means it's a higher-priority request. -* A lighter-blue square means lower-priority. - -For example, in the previous figure, the **photo-gallery** request, in the top left corner of the **Network** section is higher-priority. - -Requests might have lines on the left and right sides, and their bars might be split into two colors. Here's what these lines and colors represent: - -* The left line is everything up to the `Connection Start` group of events, inclusive. In other words, it's everything before `Request Sent`, exclusive. - -* The light portion of the bar is `Request Sent` and `Waiting (TTFB)`. - -* The dark portion of the bar is `Content Download`. - -* The right line is essentially time spent waiting for the main thread. This isn't represented in the **Timing** tab. - - - -#### View memory metrics - -Select the **Memory** checkbox to view memory metrics in a performance recording: - -![The Memory checkbox](./reference-images/memory-highlight.png) - -DevTools displays a new **Memory** chart, above the **Summary** tab. There is also a new chart below the **NET** chart, called **HEAP**. The **HEAP** chart provides the same information as the **JS Heap** line in the **Memory** chart: - -![Memory metrics](./reference-images/memory-chart.png) - -The colored lines on the chart map to the colored checkboxes above the chart. Clear a checkbox to hide that category from the chart. - -The chart only displays the region of the recording that is currently selected. For example, in the previous figure, the **Memory** chart is only showing memory usage from around the 3600 ms mark to the 6200 ms mark. - -See also: -* [Visualize memory leaks (Performance tool: Memory checkbox)](#visualize-memory-leaks-performance-tool-memory-checkbox), below. - - - -#### View the duration of a portion of a recording - -When analyzing a section like **Network** or **Main**, sometimes you need a more precise estimate of how long certain events took. Hold **Shift**, click and hold, and drag left or right to select a portion of the recording. At the bottom of your selection, DevTools shows how long that portion took: - -![Viewing the duration of a portion of a recording](./reference-images/main-duration.png) - - - -#### View a screenshot - -To learn how to turn on screenshots, see [Capture screenshots while recording](#capture-screenshots-while-recording), above. - -To view a screenshot of how the page looked during that moment of the recording, hover over the **Overview**. The **Overview** is the section that contains the **CPU** and **NET** charts: - -![Viewing a screenshot](./reference-images/screenshots-hover.png) - -You can also view screenshots by selecting a frame in the **Frames** section. DevTools displays a small version of the screenshot in the **Summary** tab: - -![Viewing a screenshot in the Summary tab](./reference-images/summary-preview.png) - -To zoom in on the screenshot, click the thumbnail in the **Summary** tab. - - - -#### View layers information - -To view advanced layers information about a frame: - -1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button, and then select the **Enable advanced rendering instrumentation (slow)** checkbox. - -1. In the **Frames** section, select a frame. DevTools displays information about the layers in the **Layers** tab at the bottom of the **Performance** tool: - - ![The Layers pane](./reference-images/layers-all.png) - -The **Layers** tab works like the **Composited Layers** tab in the **3D View** tool. To learn how to interact with the **Layers** tab, see [Navigate webpage layers, z-index, and DOM using the 3D View tool](../3d-view/index.md). - - - - - - -#### View CSS selector statistics - -To view statistics about the selectors of the CSS rules that got recalculated during a performance recording: - -* In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button, and then select the **Enable advanced rendering instrumentation (slow)** checkbox. - - DevTools displays aggregate information about the selectors of the CSS rules that were recalculated during the recording in the **Selector Stats** tab: - - ![The Selector Stats tab](./reference-images/selector-stats.png) - -1. In the **Main** section, select a **Recalculate Style** event. In the **Selector Stats** tab, DevTools displays information about the selectors of the CSS rules that were recalculated during that event. - - - -#### View messages between windows, iframes, and dedicated workers - -The DevTools experiment **Timeline: Show postMessage dispatch and handling flows** improves the **Performance** tool's **Main** section to help you quickly identify `postMessage` events and handlers, by distinguishing events that are triggered by the `postMessage` method from other events that are displayed in the **Performance** tool. This experiment helps you investigate performance issues that are related to posting messages across various threads of an application. - -Without this experiment, events that are triggered by dispatching and handling messages between threads of an application appear as generic scripting function-call events. With this experiment enabled: -* `postMessage` dispatch events appear as **Schedule postMessage**. -* `postMessage` handler events appear as **On Message**: - -!["Schedule postMessage" events and "On Message" events in the Performance tool](./reference-images/post-message-events.png) - -This experiment helps you investigate when a `postMessage` call occurred, and how long the message was queued before the `postMessage` handler starts. The dispatch events are linked to handler events by initiator arrows that appear when you click on either type of event: - -![Arrows linking dispatch events to handler events](./reference-images/post-message-events-arrows.png) - -To use this feature, in DevTools, select **Customize and control DevTools** (![the Customize and control DevTools icon](./reference-images/customize-and-control-devtools-icon.png)) > **Settings** > **Experiments**, select the checkbox **Timeline: Show postMessage dispatch and handling flows**, click the **Close** (X) button, and then click the **Reload DevTools** button. - -See also: -* [Performance recording event reference](../evaluate-performance/performance-reference.md) -* [postMessage Trace Events demo (rendered)](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) -* [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) - - - - -## Analyze rendering performance with the Rendering tool - -Use the **Rendering** tool to help visualize the rendering performance of your page. - -To open the **Rendering** tool: - -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. In DevTools, on the **Activity Bar**, click the **More tools** (![More tools icon](./reference-images/more-tools-icon.png)) button. - -1. Click **Rendering** in the dropdown menu. The **Rendering** tool appears: - - ![The Rendering tool](./reference-images/rendering-tool.png) - - - -#### View frames per second in realtime with the FPS meter - -The **FPS meter** is an overlay that appears in the top-left corner of the rendered webpage. It provides a realtime estimate of FPS as the page runs. To open the **FPS meter**: - -1. Open the **Rendering** tool. See [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. - -1. Select the **Frame Rendering Stats** checkbox. The **FPS meter** overlay appears in the rendered webpage: - - ![The FPS meter](./reference-images/fps-meter.png) - - - -#### View painting events in realtime with Paint Flashing - -Use Paint Flashing to get a realtime view of all paint events on the page. Whenever a part of the page gets re-painted, DevTools outlines that section in green. - -To turn on Paint Flashing: - -1. Open the **Rendering** tool. See [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. - -1. Select the **Paint Flashing** checkbox. Green outlines appear in the rendered webpage: - - ![Paint Flashing](./reference-images/paint-flashing.png) - - - -#### View an overlay of layers with Layer Borders - -To view an overlay of layer borders and tiles on top of the page: - -1. Open the **Rendering** tool, as described in [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. - -1. Select the **Layer Borders** checkbox. Layer borders appear in the rendered webpage: - - ![Layer Borders](./reference-images/layer-borders.png) - -See the comments in [debug_colors.cc](https://source.chromium.org/chromium/chromium/src/+/main:cc/debug/debug_colors.cc) for an explanation of the color-codings. - - - -#### Find scroll performance issues in realtime - -Use the **Scrolling Performance Issues** checkbox to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page. DevTools outlines the potentially problematic elements in teal. - -To view scroll performance issues: - -1. Open the **Rendering** tool, as described in [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. - -1. Select the **Scrolling Performance Issues** checkbox. Potentially problematic elements are outlined: - - ![Scrolling Performance Issues indicates that non-layer viewport-constrained objects may harm scroll performance](./reference-images/scrolling-performance-issues.png) - -See also: -* [Slow scroll rects (checkbox)](../3d-view/index.md#slow-scroll-rects-checkbox) in _Navigate webpage layers, z-index, and DOM using the 3D View tool_. - - - -#### Disable local fonts - -In the **Rendering** tool, use the **Disable local fonts** checkbox to emulate missing `local()` sources in `@font-face` rules. - -For example, when the **Rubik** font is installed on your device and the `@font-face src` rule uses it as a `local()` font, Microsoft Edge uses the local font file from your device. - -When **Disable local fonts** is selected, DevTools ignores the `local()` fonts and fetches each font from the network: - -![Emulate missing local fonts](./reference-images/disable-local-fonts.png) - - -This feature is useful if you use two different copies of the same font during development, such as: -* A local font for your design tools. -* A web font for your code. - -Use **Disable local fonts** to make it easier to: -* Debug and measure loading performance and optimization of web fonts. -* Verify accuracy of your CSS `@font-face` rules. -* Discover differences between local versions installed on your device and a web font. - - - - - - -## Visualize memory leaks (Performance tool: Memory checkbox) - -As a starting point to investigate webpage memory usage, use the **Performance** tool's **Memory** checkbox. (Or, [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](../memory-problems/microsoft-edge-browser-task-manager.md).) - -The **Performance** tool helps you visualize the memory use of a page over time. - -1. In DevTools, open the **Performance** tool. - -1. Select the **Memory** checkbox. - -1. Make a recording, per [Record performance](#record-performance), above. - -It's a good practice to start and end your recording with a forced garbage collection. To force garbage collection, click the **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button while recording. - -To demonstrate memory recordings, consider the following code: - -```javascript -var x = []; -function grow() { - for (var i = 0; i < 10000; i++) { - document.body.appendChild(document.createElement('div')); - } - x.push(new Array(1000000).join('x')); -} -document.getElementById('grow').addEventListener('click', grow); -``` - -Every time that the button referenced in the code is clicked, 10,000 `div` nodes are appended to the document body, and a string of 1,000,000 `x` characters is pushed onto the `x` array. Running the previous code produces a recording in the **Performance** tool: - -![Simple growth](./reference-images/performance-memory.png) - -First, an explanation of the user interface. The **HEAP** graph in the **Overview** pane (below **NET**) represents the JS heap. Below the **Overview** pane is the **Counter** pane. The memory usage is broken down by JS heap (same as **HEAP** graph in the **Overview** pane), documents, DOM nodes, listeners, and GPU memory. Clear a checkbox to hide it from the graph. - -Now, an analysis of the code compared with the previous figure. If you review the node counter (the green graph), it matches up cleanly with the code. The node count increases in discrete steps. You can presume that each increase in the node count is a call to `grow()`. - -The JS heap graph (the blue graph) is not as straightforward. In keeping with best practices, the first dip is actually a forced garbage collection (click the **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button). - -As the recording progresses, the JS heap size spikes are displayed. This is natural and expected: the JavaScript code is creating the DOM nodes on every button you click, and is doing a lot of work when it creates the string of one million characters. - -The key thing here is the fact that the JS heap ends higher than it began (the "beginning" here being the point after the forced garbage collection). In the real world, if you saw this pattern of increasing JS heap size or node size, it would potentially indicate a memory leak. - - - -See also: -* [View memory metrics](#view-memory-metrics), above. - - - -> [!NOTE] -> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). -> The original page is found [here](https://developer.chrome.com/docs/devtools/performance/reference) and is authored by Kayce Basques. - -[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) -This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index b929f9508f..031e3681ef 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -455,7 +455,6 @@ Adds an **Autofill** tool to DevTools, to record various events that the browser See also: * [Autofill](/legal/microsoft-edge/privacy#autofill) in _Microsoft Edge Privacy Whitepaper_. -* [Autofill](../../webview2/concepts/overview-features-apis.md?tabs=dotnetcsharp#autofill) in _Overview of WebView2 APIs_. Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -464,9 +463,6 @@ Status: ## Performance panel: show postMessage dispatch and handling flows - _new as of Microsoft Edge 124_ @@ -484,8 +480,8 @@ This experiment helps you investigate when a `postMessage` call occurred, and ho ![Arrows linking dispatch events to handler events](./index-images/post-message-events-arrows.png) See also: -* [View messages between windows, iframes, and dedicated workers](../evaluate-performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. -* [Performance recording event reference](../evaluate-performance/performance-reference.md) +* [View messages between windows, iframes, and dedicated workers](../performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. +* [Performance recording event reference](../performance/performance-reference.md) * [postMessage Trace Events demo (rendered)](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) * [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) * [postMessage events and handlers are distinguished from other events](../whats-new/2024/04/devtools-124.md#postmessage-events-and-handlers-are-distinguished-from-other-events) in _What's New in DevTools (Microsoft Edge 124)_. @@ -505,7 +501,7 @@ Shows a **Server Timings** track in the **Main** section of the **Performance** See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -536,7 +532,7 @@ Enables additional insights within the **Insights** side panel. To use this experiment, first select the **Performance panel: enable performance insights** checkbox, and then, if you want to see even more insights, also select the **Performance panel: enable experimental performance insights** checkbox. See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -556,7 +552,7 @@ This experiment changes the color of certain events in the main section of the * * When you use the **Insights** side-panel, and expand one of the insights, only the events that are related to that insight retain their coloring; the other events turn gray. See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -594,7 +590,7 @@ Adds a **Show shortcuts** (![Show shortcuts icon](./index-images/show-shortcuts- The list of keyboard shortcuts changes to relect Classic or Modern keyboard navigation of the timeline. See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -610,7 +606,7 @@ _new as of Microsoft Edge Canary 134_ Includes a **Dim 3rd Parties** checkbox in the **Performance** tool to "dim" the performance events that come from third-party dependencies. For example, if your code uses the React library, checking the **Dim 3rd Parties** checkbox greys-out and dims the React events in a profile. See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -729,7 +725,7 @@ Enables Adaptive CPU throttling. See also: -* [Throttle the CPU while recording](../evaluate-performance/reference.md#throttle-the-cpu-while-recording) in _Performance features reference_. +* [Throttle the CPU while recording](../performance/reference.md#throttle-the-cpu-while-recording) in _Performance features reference_. Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -783,7 +779,7 @@ Status: Controls whether to show the sampling heap profiler timeline in the **Performance** tool. See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) * [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md) Status: @@ -803,7 +799,7 @@ Adds an **Invalidations** section for **Recalculate Style** events in the **Summ The **Invalidations** section lists the DOM nodes that were invalidated as a result of a change on the webpage, such as a DOM mutation, and which the browser engine had to restyle during the **Recalculate Style** event. See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -820,7 +816,7 @@ Status: Controls whether to show all events in the **Performance** tool. See also: -* [Introduction to the Performance tool](../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../performance/index.md) Status: * This checkbox is present in Microsoft Edge Canary 135. @@ -853,8 +849,8 @@ Status: See also: * [Share enhanced performance and memory traces](../experimental-features/share-traces.md) -* [Performance features reference](../evaluate-performance/reference.md) -* [Performance recording event reference](../evaluate-performance/performance-reference.md) +* [Performance features reference](../performance/reference.md) +* [Performance recording event reference](../performance/performance-reference.md) @@ -873,8 +869,8 @@ Status: See also: * [Share enhanced performance and memory traces](../experimental-features/share-traces.md) -* [Performance features reference](../evaluate-performance/reference.md) -* [Performance recording event reference](../evaluate-performance/performance-reference.md) +* [Performance features reference](../performance/reference.md) +* [Performance recording event reference](../performance/performance-reference.md) @@ -891,8 +887,8 @@ Status: See also: * [Share enhanced performance and memory traces](../experimental-features/share-traces.md) -* [Performance features reference](../evaluate-performance/reference.md) -* [Performance recording event reference](../evaluate-performance/performance-reference.md) +* [Performance features reference](../performance/reference.md) +* [Performance recording event reference](../performance/performance-reference.md) diff --git a/microsoft-edge/devtools-guide-chromium/issues/index.md b/microsoft-edge/devtools-guide-chromium/issues/index.md index f16d525e2a..3d3736fe27 100644 --- a/microsoft-edge/devtools-guide-chromium/issues/index.md +++ b/microsoft-edge/devtools-guide-chromium/issues/index.md @@ -75,7 +75,7 @@ Feedback in the **Issues** tool is provided by several sources, including the Ch #### Placement of Issues tool: Quick View or Activity Bar -By default, such as from the Command Menu, the **Issues** tool opens in the **Quick View** panel. You can instead open it in the **Activity Bar**, or move it to the **Activity Bar**: +By default, such as from the **Command Menu**, the **Issues** tool opens in the **Quick View** panel. You can instead open it in the **Activity Bar**, or move it to the **Activity Bar**: * In the **Quick View** toolbar, right-click the **Inspect** tab and then select **Move to top Activity Bar** or **Move to left Activity Bar**. diff --git a/microsoft-edge/devtools-guide-chromium/javascript/background-services.md b/microsoft-edge/devtools-guide-chromium/javascript/background-services.md index 3a7182e164..6071737e21 100644 --- a/microsoft-edge/devtools-guide-chromium/javascript/background-services.md +++ b/microsoft-edge/devtools-guide-chromium/javascript/background-services.md @@ -131,7 +131,7 @@ The [Payment Handler API](https://web.dev/web-based-payment-apps-overview/) allo ## Periodic Background Sync -The **Periodic Background Sync API** enables the **service worker** of a Progressive Web App to retrieve data from a server, periodically, even when the website isn't opened. To learn more about the **Periodic Background Sync API**, see [Use the Periodic Background Sync API to regularly get fresh content](/microsoft-edge/progressive-web-apps-chromium/how-to/background-syncs#use-the-periodic-background-sync-api-to-regularly-get-fresh-content). +The **Periodic Background Sync API** enables the **service worker** of a Progressive Web App to retrieve data from a server, periodically, even when the website isn't opened. See [Use the Periodic Background Sync API to regularly get fresh content](../../progressive-web-apps-chromium/how-to/background-syncs.md#use-the-periodic-background-sync-api-to-regularly-get-fresh-content) in _Synchronize and update a PWA in the background_. To log Periodic Background Sync events for 3 days, even when DevTools isn't open: diff --git a/microsoft-edge/devtools-guide-chromium/javascript/breakpoints.md b/microsoft-edge/devtools-guide-chromium/javascript/breakpoints.md index 2178b6540c..ea84a09c9c 100644 --- a/microsoft-edge/devtools-guide-chromium/javascript/breakpoints.md +++ b/microsoft-edge/devtools-guide-chromium/javascript/breakpoints.md @@ -264,7 +264,8 @@ To set a logpoint: 1. Press **Enter** to activate the logpoint. A red icon appears next to the line number. -For more information, see [Log messages in the Console tool](/microsoft-edge/devtools-guide-chromium/console/console-log). +See also: +* [Log messages in the Console tool](../console/console-log.md) diff --git a/microsoft-edge/devtools-guide-chromium/javascript/snippets.md b/microsoft-edge/devtools-guide-chromium/javascript/snippets.md index 4bce0b8a32..1720a5f6ba 100644 --- a/microsoft-edge/devtools-guide-chromium/javascript/snippets.md +++ b/microsoft-edge/devtools-guide-chromium/javascript/snippets.md @@ -73,11 +73,11 @@ To open the **Snippets** tab: #### Open the Snippets tab from the Command Menu -You can also open the **Snippets** tab by using the Command Menu: +You can also open the **Snippets** tab by using the **Command Menu**: 1. Select anything in DevTools, so that DevTools has focus. -1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the Command Menu. +1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. 1. Start typing "snippets", select **Show Snippets**, and then press **Enter** to run the command: @@ -101,7 +101,7 @@ To create a new snippet from the **Snippets** tab: 1. Focus your cursor somewhere in DevTools. -1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the Command Menu. +1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. 1. Start typing "snippet", select **Create new snippet**, and then press **Enter**: @@ -145,7 +145,7 @@ To edit the source code of a snippet: 1. Focus your cursor somewhere in DevTools. -1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the Command Menu. +1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. 1. Delete the **>** character and type the **!** character followed by the name of the snippet that you want to run: diff --git a/microsoft-edge/devtools-guide-chromium/landing/index.yml b/microsoft-edge/devtools-guide-chromium/landing/index.yml index a48f1d9ca4..05342117bc 100644 --- a/microsoft-edge/devtools-guide-chromium/landing/index.yml +++ b/microsoft-edge/devtools-guide-chromium/landing/index.yml @@ -193,7 +193,7 @@ landingContent: - linkListType: how-to-guide links: - text: Performance features reference - url: ../evaluate-performance/reference.md + url: ../performance/reference.md - linkListType: sample links: - text: Sample code for DevTools diff --git a/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md b/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md index e40d2d2283..d9f7c99e38 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md +++ b/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md @@ -1,6 +1,6 @@ --- -title: Inspect a JavaScript ArrayBuffer with the Memory Inspector tool -description: The Memory Inspector tool in Microsoft Edge DevTools. +title: Inspect a JavaScript ArrayBuffer with the Memory inspector tool +description: The Memory inspector tool in Microsoft Edge DevTools. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -23,27 +23,27 @@ ms.date: 05/04/2022 See the License for the specific language governing permissions and limitations under the License. --> -# Inspect a JavaScript ArrayBuffer using Memory Inspector +# Inspect a JavaScript ArrayBuffer using Memory inspector -Use **Memory Inspector** to view and interact with the following types of objects: +Use **Memory inspector** to view and interact with the following types of objects: * [ArrayBuffer](https://developer.mozilla.org/docs/web/javascript/reference/global_objects/arraybuffer) * [TypedArray](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) * [DataView](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView) * [WebAssembly (Wasm) memory](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory) -Using **Memory Inspector** you can view the different types of memory objects, navigate, and select the types to be used to interpret the values. It shows the ASCII values directly next to the bytes, and lets you select different endianness. +Using **Memory inspector** you can view the different types of memory objects, navigate, and select the types to be used to interpret the values. It shows the ASCII values directly next to the bytes, and lets you select different endianness. - ![Memory Inspector panel](./memory-inspector-tool-images/memory-inspector-panel.png) + ![Memory inspector panel](./memory-inspector-tool-images/memory-inspector-panel.png) -The **Memory Inspector** tool provides greater ability than the **Sources** tool to inspect `ArrayBuffers` when debugging. The **Scope** view in the Sources tool displays a list of single values within the array buffer, which makes it difficult to see all the data. Additionally, navigating to a certain range within the buffer requires you to scroll to a specific index and the values are always displayed as a single byte, even if you wanted to see them in another format, such as 32-bit integers. +The **Memory inspector** tool provides greater ability than the **Sources** tool to inspect `ArrayBuffers` when debugging. The **Scope** view in the Sources tool displays a list of single values within the array buffer, which makes it difficult to see all the data. Additionally, navigating to a certain range within the buffer requires you to scroll to a specific index and the values are always displayed as a single byte, even if you wanted to see them in another format, such as 32-bit integers. ![Sources tool scope panel provides limited ability to inspect memory](./memory-inspector-tool-images/memory-inspector-sources-scope-limited-ability.png) -## Open Memory Inspector while debugging - +## Open Memory inspector while debugging + 1. Start Microsoft Edge. @@ -55,23 +55,23 @@ The **Memory Inspector** tool provides greater ability than the **Sources** tool 1. Set a breakpoint at line **18** as shown in the following image. - ![Memory Inspector set breakpoint in JavaScript file](./memory-inspector-tool-images/memory-inspector-set-breakpoint.png) + ![Memory inspector set breakpoint in JavaScript file](./memory-inspector-tool-images/memory-inspector-set-breakpoint.png) 1. Refresh the webpage. It fails to display because the JavaScript pauses at the breakpoint. 1. In the right Debugger pane under **Scope**, find the `buffer` line. -1. From the `buffer` line you can open Memory Inspector using one of the following methods: +1. From the `buffer` line you can open Memory inspector using one of the following methods: - * Click on the **Reveal in Memory Inspector panel** icon (![Reveal in Memory Inspector panel icon](./memory-inspector-tool-images/memory-inspector-open-from-buffer-icon.png)) at the end of the `buffer` property line, or + * Click on the **Reveal in Memory inspector panel** icon (![Reveal in Memory inspector panel icon](./memory-inspector-tool-images/memory-inspector-open-from-buffer-icon.png)) at the end of the `buffer` property line, or - * From the context menu. Right click the `buffer` property and select **Reveal in Memory Inspector panel**. + * From the context menu. Right click the `buffer` property and select **Reveal in Memory inspector panel**. - ![Open Memory Inspector from the buffer property line context menu](./memory-inspector-tool-images/memory-inspector-open-from-buffer.png) + ![Open Memory inspector from the buffer property line context menu](./memory-inspector-tool-images/memory-inspector-open-from-buffer.png) - The JavaScript ArrayBuffer opens in Memory Inspector. + The JavaScript ArrayBuffer opens in Memory inspector. - ![ArrayBuffer open in the Memory Inspector panel](./memory-inspector-tool-images/memory-inspector-panel.png) + ![ArrayBuffer open in the Memory inspector panel](./memory-inspector-tool-images/memory-inspector-panel.png) @@ -79,17 +79,17 @@ The **Memory Inspector** tool provides greater ability than the **Sources** tool You can inspect multiple objects at the same time such as DataView and TypedArray. -With the demo webpage paused at the breakpoint, object `b2` in the **Scope** view is a TypedArray. Right click the `b2` object and select **Reveal in Memory Inspector panel** +With the demo webpage paused at the breakpoint, object `b2` in the **Scope** view is a TypedArray. Right click the `b2` object and select **Reveal in Memory inspector panel** -A new tab for the `b2` object opens next to the first tab, which represents the `buffer` object in Memory Inspector. +A new tab for the `b2` object opens next to the first tab, which represents the `buffer` object in Memory inspector. -![Two ArrayBuffer tabs open in the Memory Inspector panel](./memory-inspector-tool-images/memory-inspector-panel-two.png) +![Two ArrayBuffer tabs open in the Memory inspector panel](./memory-inspector-tool-images/memory-inspector-panel-two.png) -## Navigating in Memory Inspector +## Navigating in Memory inspector -The Memory Inspector panel includes three types of content: +The Memory inspector panel includes three types of content: * [Navigation bar](#navigation-bar) * [Memory buffer](#memory-buffer) @@ -99,7 +99,7 @@ The Memory Inspector panel includes three types of content: #### Navigation bar -![Memory Inspector panel Navigation bar](./memory-inspector-tool-images/memory-inspector-panel-navigation-bar.png) +![Memory inspector panel Navigation bar](./memory-inspector-tool-images/memory-inspector-panel-navigation-bar.png) The **Enter address** text box shows the current byte address in hex format. You can change the value to jump to a new location in the memory buffer. Click in the text box and change the value to `0x00000008`. The Memory buffer immediately jumps to that byte address. @@ -113,7 +113,7 @@ If the Memory buffer does not automatically update when stepping through values, #### Memory buffer -![Memory Inspector panel Memory buffer](./memory-inspector-tool-images/memory-inspector-panel-memory-buffer.png) +![Memory inspector panel Memory buffer](./memory-inspector-tool-images/memory-inspector-panel-memory-buffer.png) Reading from the left side of the panel, the **address** is displayed in hex format. The currently selected address is bold. @@ -125,7 +125,7 @@ The **ASCII representation** of the memory is shown on the right side of the pan #### Value inspector -![Memory Inspector panel Value inspector](./memory-inspector-tool-images/memory-inspector-panel-value-inspector.png) +![Memory inspector panel Value inspector](./memory-inspector-tool-images/memory-inspector-panel-value-inspector.png) Click the current Endian type to switch between **Big endian** and **Little endian**. @@ -141,19 +141,19 @@ You can change the encoding view using the dropdown list. For integers you can c ## Inspecting memory -Complete the following steps to debug a webpage in Memory Inspector. +Complete the following steps to debug a webpage in Memory inspector. 1. In the **Navigation bar** change the address to `0x00000027`. 1. View the ASCII representation and the value interpretations. All values should be zero or empty. - ![Memory Inspector address change](./memory-inspector-tool-images/memory-inspector-address-change.png) + ![Memory inspector address change](./memory-inspector-tool-images/memory-inspector-address-change.png) 1. Click **Resume script execution** (![Resume script execution](./memory-inspector-tool-images/memory-inspector-resume-script-execution.png)) or press **F8** or **Ctrl +\\** to step through the code. The ASCII representation and the value interpretations are updated. - ![Memory Inspector address values updated](./memory-inspector-tool-images/memory-inspector-address-values-updated.png) + ![Memory inspector address values updated](./memory-inspector-tool-images/memory-inspector-address-values-updated.png) 1. Click the **Jump to address** button (![Jump to address button](./memory-inspector-tool-images/memory-inspector-jump-to-address.png)) for **Pointer 32-bit** or **Pointer 64-bit** as needed to jump to the next active memory address. If next memory address is not available, the button is turned off (![Address out of memory range](./memory-inspector-tool-images/memory-inspector-address-out-of-range.png)) with the tooltip **Address out of memory range**. @@ -165,7 +165,7 @@ Complete the following steps to debug a webpage in Memory Inspector. 1. Use the dropdown lists to change the encoding from `dec` to `sci`. The value representations are updated. - ![Memory Inspector address values updated view](./memory-inspector-tool-images/memory-inspector-address-values-updated-sci.png) + ![Memory inspector address values updated view](./memory-inspector-tool-images/memory-inspector-address-values-updated-sci.png) 1. Explore the memory buffer using the keyboard or navigation bar. @@ -189,13 +189,13 @@ For WebAssembly (Wasm) memory inspection, the process is similar to inspecting J 1. In the debugger pane under **Scope**, expand the **Module**. - ![Memory Inspector set breakpoint in Wasm file](./memory-inspector-tool-images/memory-inspector-wasm-breakpoint.png) + ![Memory inspector set breakpoint in Wasm file](./memory-inspector-tool-images/memory-inspector-wasm-breakpoint.png) -1. Click on the **Reveal in Memory Inspector panel** icon (![Reveal in Memory Inspector panel icon](./memory-inspector-tool-images/memory-inspector-open-from-buffer-icon.png)) at the end of the `$imports.memory` property line. +1. Click on the **Reveal in Memory inspector panel** icon (![Reveal in Memory inspector panel icon](./memory-inspector-tool-images/memory-inspector-open-from-buffer-icon.png)) at the end of the `$imports.memory` property line. - The Wasm ArrayBuffer opens in **Memory Inspector**. + The Wasm ArrayBuffer opens in **Memory inspector**. - ![Memory Inspector panel Wasm](./memory-inspector-tool-images/memory-inspector-panel-wasm.png) + ![Memory inspector panel Wasm](./memory-inspector-tool-images/memory-inspector-panel-wasm.png) diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index.md b/microsoft-edge/devtools-guide-chromium/memory-problems/index.md index e76a3014ee..84f610cdbc 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/index.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/index.md @@ -35,7 +35,7 @@ To find memory issues that affect page performance, including memory leaks, memo | Use case | Tool | Article | |---|---|---| | Monitor how much memory a webpage uses, in realtime. | Microsoft Edge Browser Task Manager | [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](./microsoft-edge-browser-task-manager.md) | -| Visualize the memory usage of a webpage over a period of time. | **Performance** tool > **Memory** checkbox | [Visualize memory leaks (Performance tool: Memory checkbox)](../evaluate-performance/reference.md#visualize-memory-leaks-performance-tool-memory-checkbox) in _Performance features reference_. | +| Visualize the memory usage of a webpage over a period of time. | **Performance** tool > **Memory** checkbox | [Visualize memory leaks (Performance tool: Memory checkbox)](../performance/reference.md#visualize-memory-leaks-performance-tool-memory-checkbox) in _Performance features reference_. | | Spot frequent garbage collections. | Microsoft Edge Browser Task Manager, or **Performance** tool > **Memory** checkbox | [Spot frequent garbage collections (Microsoft Edge Browser Task Manager, Performance tool's Memory checkbox)](#spot-frequent-garbage-collections-microsoft-edge-browser-task-manager-performance-tools-memory-checkbox), below. | | Inspect the contents of the memory used by a webpage. | **Memory** tool > **Heap snapshot** | [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](./heap-snapshots.md) | | Find out which JavaScript objects get created over a period of time, to isolate memory leaks. | **Memory** tool > **Allocations on timeline** | [Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type)](./allocation-profiler.md) | @@ -60,7 +60,7 @@ To return to the list of option buttons for profiling types, in the upper left o ## Overview of fixing memory problems -In the spirit of the **RAIL** performance model, the focus of your performance efforts should be your users. +In the spirit of the **RAIL** performance model, the focus of your performance efforts should be your users. @@ -90,7 +90,7 @@ If your page appears to pause frequently, then you may have garbage collection i * Microsoft Edge Browser Task Manager. Frequently rising and falling **Memory** or **JavaScript Memory** values represent frequent garbage collection. See [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](./microsoft-edge-browser-task-manager.md). -* The **Performance** tool's **Memory** checkbox. In Performance memory recordings, frequent changes (rising and falling) to the JS heap or node count graphs indicate frequent garbage collection. See [View memory metrics](../evaluate-performance/reference.md#view-memory-metrics) in _Performance features reference_. +* The **Performance** tool's **Memory** checkbox. In Performance memory recordings, frequent changes (rising and falling) to the JS heap or node count graphs indicate frequent garbage collection. See [View memory metrics](../performance/reference.md#view-memory-metrics) in _Performance features reference_. After you have identified the problem by using either of those tool, you can then use the **Memory** tool's **Allocations on timeline** profiling type to find out where memory is being allocated, and which functions are causing the allocations. See [Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type)](./allocation-profiler.md). @@ -132,5 +132,5 @@ External: [![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). - + diff --git a/microsoft-edge/devtools-guide-chromium/overview.md b/microsoft-edge/devtools-guide-chromium/overview.md index 973ba2468e..25a2d151ca 100644 --- a/microsoft-edge/devtools-guide-chromium/overview.md +++ b/microsoft-edge/devtools-guide-chromium/overview.md @@ -282,7 +282,7 @@ To change the location of the **Activity Bar**, do either of the following: * In the **Activity Bar**, click **Move Activity Bar to left** (![The Move Activity Bar to left icon](./overview-images/move-activity-bar-to-left-icon.png)) or **Move Activity Bar to top** (![The Move Activity Bar to top icon](./overview-images/move-activity-bar-to-top-icon.png)). -* Use the Command Menu. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS), enter the words **activity bar**, and then select **Move Activity Bar to left** or **Move Activity Bar to top**. See [Power tip: Use the Command Menu](#power-tip-use-the-command-menu). +* Use the **Command Menu**. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS), enter the words **activity bar**, and then select **Move Activity Bar to left** or **Move Activity Bar to top**. See [Power tip: Use the Command Menu](#power-tip-use-the-command-menu). @@ -438,7 +438,7 @@ See [Inspect network activity](network/index.md). #### Performance tool -See [Introduction to the Performance tool](evaluate-performance/index.md). +See [Analyze runtime performance (tutorial)](evaluate-performance/index.md). @@ -513,13 +513,13 @@ To hide or expand **Quick View**, click **Collapse Quick View** (![Collapse icon ## Overview of all tools -For a summary of each tool, see [Overview of all tools](about-tools.md#overview-of-all-tools) in _About the list of tools_. +For a summary of each tool, see [About the list of tools](./about-tools.md). ## Tool, tab, or panel -The words "tool", "tab", and "panel" are somewhat interchangeable. In the Command Menu, the tools are called _panels_; for example, the **Elements** tool is called the **Elements** panel. To switch to the **Elements** tool, you click the **Elements** tab. There's a **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) button and list used to select tools. DevTools tools are also called DevTools _panels_. +The words "tool", "tab", and "panel" are somewhat interchangeable. In the **Command Menu**, the tools are called _panels_; for example, the **Elements** tool is called the **Elements** panel. To switch to the **Elements** tool, you click the **Elements** tab. There's a **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) button and list used to select tools. DevTools tools are also called DevTools _panels_. You can customize each of the tools, and the content of a tool can change based on the context. @@ -553,20 +553,20 @@ In addition to **Activity Bar** and **Quick View** tools, DevTools includes the ## Power tip: Use the Command Menu -DevTools provides lots of features and functionality to use with your website. You can access the different parts of DevTools in many ways, but often a fast way is to use the Command Menu. +DevTools provides lots of features and functionality to use with your website. You can access the different parts of DevTools in many ways, but often a fast way is to use the **Command Menu**. ![the Command Menu in DevTools](./overview-images/command-menu.png) -In the Command Menu, the tools are called "panels"; for example, the **Elements** tool is called the **Elements** panel. To switch to the **Elements** tool, you select the **Elements** tab. +In the **Command Menu**, the tools are called "panels"; for example, the **Elements** tool is called the **Elements** panel. To switch to the **Elements** tool, you select the **Elements** tab. -1. To open the Command Menu, do either of the following: +1. To open the **Command Menu**, do either of the following: * Click the **Customize and control DevTools** (![Customize and control DevTools](./overview-images/customize-and-control-devtools-icon-light-mode.png)) button, and then select **Run command**. * Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). - The Command Menu allows you to type commands to display, hide, or run features in DevTools. + The **Command Menu** allows you to type commands to display, hide, or run features in DevTools. -1. In the Command Menu, start typing the name of a tool, such as **changes**, and then select a **Show** command, such as **Show Changes**. The Command Menu displays the matching commands: +1. In the **Command Menu**, start typing the name of a tool, such as **changes**, and then select a **Show** command, such as **Show Changes**. The **Command Menu** displays the matching commands: ![Command menu displays the options after you type 'cha', including 'Show Changes tool in the Quick View'](./overview-images/command-menu-show-changes.png) @@ -574,7 +574,7 @@ In the Command Menu, the tools are called "panels"; for example, the **Elements* ![DevTools with the Changes tool open in the Quick View panel](./overview-images/showing-changes.png) - The **Changes** tool is useful when you edit CSS. In this example, the Command Menu provides a fast alternative to selecting **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) and then selecting **Changes**. This example also provides an alternative to editing a `.js` file in the **Sources** tool, and then right-clicking and selecting **Local modifications**. + The **Changes** tool is useful when you edit CSS. In this example, the **Command Menu** provides a fast alternative to selecting **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) and then selecting **Changes**. This example also provides an alternative to editing a `.js` file in the **Sources** tool, and then right-clicking and selecting **Local modifications**. See also [Run commands with the Microsoft Edge DevTools Command menu](command-menu/index.md). diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/animation-frame-children.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/animation-frame-children.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/animation-frame-children.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/animation-frame-children.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/animation-frame-fired.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/animation-frame-fired.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/animation-frame-fired.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/animation-frame-fired.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/capture-results.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/capture-results.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/capture-results.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/capture-results.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/capture-settings-icon.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/capture-settings-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/capture-settings-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/capture-settings-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/capture-settings.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/capture-settings.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/capture-settings.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/capture-settings.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/cpu-chart.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/cpu-chart.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/cpu-chart.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/cpu-chart.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/fps-meter-overlay.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/fps-meter-overlay.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/fps-meter-overlay.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/fps-meter-overlay.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/frame-hover.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/frame-hover.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/frame-hover.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/frame-hover.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/get-started-side-by-side.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/get-started-side-by-side.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/get-started-side-by-side.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/get-started-side-by-side.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/help-icon.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/help-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/help-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/help-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/main-zoomed.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/main-zoomed.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/main-zoomed.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/main-zoomed.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/main.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/main.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/main.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/main.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/profiling.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/profiling.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/profiling.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/profiling.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/record-icon.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/record-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/record-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/record-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/send-feedback-icon.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/send-feedback-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/send-feedback-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/send-feedback-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/sources-app-update.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/sources-app-update.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/sources-app-update.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/sources-app-update.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/summary-tab.png b/microsoft-edge/devtools-guide-chromium/performance/index-images/summary-tab.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index-images/summary-tab.png rename to microsoft-edge/devtools-guide-chromium/performance/index-images/summary-tab.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md b/microsoft-edge/devtools-guide-chromium/performance/index.md similarity index 90% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md rename to microsoft-edge/devtools-guide-chromium/performance/index.md index 600f225125..d7ab4a68cf 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md +++ b/microsoft-edge/devtools-guide-chromium/performance/index.md @@ -1,5 +1,5 @@ --- -title: Introduction to the Performance tool +title: Analyze runtime performance (tutorial) description: Tutorial about how to evaluate runtime performance in Microsoft Edge DevTools. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,8 @@ ms.date: 09/04/2023 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# Introduction to the Performance tool +# Analyze runtime performance (tutorial) + _Runtime performance_ is how your page performs when it's running, as opposed to loading. The following tutorial teaches you how to use the DevTools **Performance** tool to analyze runtime performance. @@ -34,22 +35,19 @@ See also: ## Get started -In the following tutorial, you open DevTools on a "Sluggish Animation" demo page and use the **Performance** tool to find a performance bottleneck on the page. +In the following tutorial, you open DevTools on the "Sluggish Animation" demo page and use the **Performance** tool to find a performance bottleneck on the page. -1. Open the [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) demo page in your InPrivate tab or window. To do that, right-click the link and then select **Open link in InPrivate window**. You'll profile this page, which shows a variable number of icons moving up and down. For more information about InPrivate, see [Browse InPrivate in Microsoft Edge](https://support.microsoft.com/microsoft-edge/browse-inprivate-in-microsoft-edge-cd2c9a48-0bc4-b98e-5e46-ac40c84e27e2) +1. Right-click the link [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) and then select **Open link in InPrivate window**. You'll profile this page, which shows a variable number of icons moving up and down. See also [Browse InPrivate in Microsoft Edge](https://support.microsoft.com/microsoft-edge/browse-inprivate-in-microsoft-edge-cd2c9a48-0bc4-b98e-5e46-ac40c84e27e2). - Source code: [MicrosoftEdge / Demos > devtools-performance-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started). + If you want to view the source code for the demo, see [MicrosoftEdge / Demos > devtools-performance-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started). +1. Right-click the demo webpage and then select **Inspect**. - - - - -1. Press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS) to open DevTools: + DevTools opens: ![The demo on the left, and DevTools on the right](./index-images/get-started-side-by-side.png) -For the rest of the screenshots, DevTools is shown [undocked to a separate window](../customize/placement.md). +Most screenshots of the **Performance** tool show DevTools [undocked to a separate window](../customize/placement.md). @@ -73,7 +71,7 @@ If you want to ensure that pages work well on low-end mobile devices, set **CPU* #### Set up the demo -The following section lets you customize the demo to make sure that your experience is relatively consistent with the screenshots and descriptions. +In the following section, continuing from above, you customize the demo to make sure that your experience is relatively consistent with the screenshots and descriptions. 1. Click the **Add elements** button until the blue icons move noticeably slower than before. On a high-end machine, you can click it about 20 times. @@ -89,6 +87,8 @@ The following section lets you customize the demo to make sure that your experie When you ran the optimized version of the page, the blue icons move faster. Why is that? Both versions are supposed to move the icons the same amount of space in the same amount of time. Take a recording in the **Performance** tool to learn how to detect the performance bottleneck in the unoptimized version. +Continuing from above: + 1. In DevTools, click **Record** (![Record](./index-images/record-icon.png)). DevTools captures performance metrics as the page runs. ![Profile the page](./index-images/profiling.png) @@ -107,6 +107,8 @@ These performance results show an overwhelming amount of data, but it will all m Once you have a recording of the page's performance, you can assess the page's performance and find the cause of any performance issues. +Continuing from above: + 1. The **CPU** chart is displayed along the top. The colors in the **CPU** chart correspond to the colors in the **Summary** panel, at the bottom of the **Performance** tool. The **CPU** chart shows that these regions make up a large area, meaning that the CPU was maxed out during the recording. Whenever the CPU is maxed out for long periods, that's an indicator that the page is not performing well. ![The CPU chart and Summary panel](./index-images/cpu-chart.png) @@ -121,6 +123,8 @@ Once you have a recording of the page's performance, you can assess the page's p Another handy tool is the **Frame Rendering Stats** overlay, which provides real-time estimates for FPS as the page runs. The **Frame Rendering Stats** overlay is not required for this tutorial but may provide helpful insight. +Continuing from above: + 1. In DevTools, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. 1. Start typing `Rendering` in the **Command Menu** and click **Show Rendering**. @@ -137,6 +141,8 @@ Another handy tool is the **Frame Rendering Stats** overlay, which provides real After you verified that the animation isn't performing well, the next step is to answer the question "why?" +Continuing from above: + 1. When no events are selected, the **Summary** panel shows you a breakdown of activity. The page spent most of the time rendering. Since performance is the art of doing less work, your goal is to reduce the amount of time spent doing rendering work. ![The Summary panel](./index-images/summary-tab.png) @@ -158,11 +164,11 @@ After you verified that the animation isn't performing well, the next step is to When a red triangle is displayed at the top right of an event, it's a warning that there might be an issue related to the event. The **Animation Frame Fired** event occurs whenever a [requestAnimationFrame() callback](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame) is run. The **Summary** panel displays information about that event: - - ![More information about the Animation Frame Fired event](./index-images/animation-frame-fired.png) + + ![More information about the Animation Frame Fired event](./index-images/animation-frame-fired.png) 1. Click the **Reveal** link. DevTools highlights the event that initiated the **Animation Frame Fired** event. - + 1. Click the **app.js:125** link. The relevant line of source code is displayed in the **Sources** tool. 1. Zoom in on the **Animation Frame Fired** event and its child events, by using the mouse wheel or trackpad. Or, press **W**. diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/capture-settings-icon-blue-dot.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/capture-settings-icon-blue-dot.png new file mode 100644 index 0000000000..3287e0f110 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/capture-settings-icon-blue-dot.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/capture-settings-icon.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/capture-settings-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/capture-settings-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/overview-images/capture-settings-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/clear-icon.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/clear-icon.png new file mode 100644 index 0000000000..a2a3e105ca Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/clear-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/command-menu-performance.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/command-menu-performance.png new file mode 100644 index 0000000000..e7b042c8db Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/command-menu-performance.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/field-data-advanced-mapping.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/field-data-advanced-mapping.png new file mode 100644 index 0000000000..bab9d269a4 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/field-data-advanced-mapping.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/house-icon.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/house-icon.png new file mode 100644 index 0000000000..9fc7f40caf Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/house-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/interactions-tab.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/interactions-tab.png new file mode 100644 index 0000000000..8eed74c8af Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/interactions-tab.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/layout-shifts-tab.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/layout-shifts-tab.png new file mode 100644 index 0000000000..6e74523fde Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/layout-shifts-tab.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/local-metrics-results.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/local-metrics-results.png new file mode 100644 index 0000000000..5a16478222 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/local-metrics-results.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/more-tools-icon.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/more-tools-icon.png new file mode 100644 index 0000000000..dd58c0da2a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/more-tools-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-icon.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-icon.png new file mode 100644 index 0000000000..e537386c86 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-tool-intro-home-page.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-tool-intro-home-page.png new file mode 100644 index 0000000000..554923d52e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-tool-intro-home-page.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-tool-intro-profile.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-tool-intro-profile.png new file mode 100644 index 0000000000..ff2c59f1d8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/performance-tool-intro-profile.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview-images/save-profile-icon.png b/microsoft-edge/devtools-guide-chromium/performance/overview-images/save-profile-icon.png new file mode 100644 index 0000000000..f790ae6869 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/overview-images/save-profile-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/overview.md b/microsoft-edge/devtools-guide-chromium/performance/overview.md new file mode 100644 index 0000000000..d764862993 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/performance/overview.md @@ -0,0 +1,375 @@ +--- +title: "Performance tool: Analyze your website's performance" +description: Analyze your website's load and runtime performance. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 03/31/2025 +--- + +# Performance tool: Analyze your website's performance + + + +Use the **Performance** tool to analyze your website's performance. There are two main views: + +* The home page shows local metrics as you interact with the current webpage. +* Record a profile and view a performance timeline. + +**Detailed contents:** +* [Overview](#overview) + + * [Open the Performance tool](#open-the-performance-tool) + * [Using the Command Menu](#using-the-command-menu) + + * [Local metrics for page interactions](#local-metrics-for-page-interactions) + * [Recorded profile timeline](#recorded-profile-timeline) + * [Switching to viewing local metrics or another profile](#switching-to-viewing-local-metrics-or-another-profile) + + +* [Monitor Core Web Vitals metrics](#monitor-core-web-vitals-metrics) + * [Terminology](#terminology) + * [Use the demo page](#use-the-demo-page) + * [Interactions tab](#interactions-tab) + * [Layout shifts tab](#layout-shifts-tab) +* [Capture and analyze a performance report](#capture-and-analyze-a-performance-report) + * [Record a performance profile](#record-a-performance-profile) + * [Change capture settings](#change-capture-settings) + * [Analyze a performance report](#analyze-a-performance-report) +* [Improve performance with these tools](#improve-performance-with-these-tools) --> + +For a walkthrough of using the **Performance** tool to improve your website's performance, see [Analyze runtime performance (tutorial)](./index.md). + + + +## Overview + + + + +The **Performance** tool displays local metrics for page interactions, and lets you record CPU performance profiles of your web applications. Analyze profiles to find potential performance bottlenecks and ways that you can optimize resource use. + + + +#### Open the Performance tool + + +To open the **Performance** tool: + +1. Go to a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. In the **Activity Bar** at top, click the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool. + + If the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** (![The More tools icon](./overview-images/more-tools-icon.png)) button and then select the **Performance** tool. + + + +###### Using the Command Menu + + +To open the **Performance** tool by using the **Command Menu**: + +1. Go to a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. In the upper right of DevTools, click **Customize and control DevTools**, click **Run command**. + + Or, press: + + * macOS: **Command+Shift+P** + * Windows, Linux, ChromeOS: **Control+Shift+P** + + The **Command Menu** opens, and reads **Run >Command**. + +1. Start typing **performance**, select **Show Performance [panel]**, and then press **Enter**. + + ![Command Menu with 'performance' entered](./overview-images/command-menu-performance.png) + + + +#### Local metrics for page interactions + +Use the **Performance** tool to view Core Web Vitals metrics in the initial, **Local metrics** view. The home page of the **Performance** tool shows **Local metrics**, which is performance metrics about the rendered webpage: + +* Largest Contentful Paint (LCP) - How quickly the main content of the page loaded. +* Cumulative Layout Shift (CLS) - A measure of the most recent unexpected page layout shift. +* Interaction to Next Paint (INP) - The responsiveness of the most recent user interaction on the page. + +When you initially open the **Performance** tool, Core Web Vitals metrics are displayed, in three cards in a **Local metrics** section: + +![The Performance tool home page showing Local metrics](./overview-images/performance-tool-intro-home-page.png) + + + +#### Recorded profile timeline + +Also use the **Performance** tool to view a recorded performance trace, including: +* Record a performance profile. +* Change capture settings. +* Analyze a performance report. Shows information about the performance of the page over the period of time where the recording occurred, such as: + * The user interactions that occurred during the recording. + * The JavaScript code that ran. + * The styling and layout operations that occurred. + * Other performance metrics over time, such as network requests and layout shifts. + +After you record a performance trace, the performance trace is displayed instead of **Local metrics**. + + + +#### Switching to viewing local metrics or another profile + +To switch to displaying the initial, **Local metrics** view, click the **Go back to the live metrics page** (![The "Go back to the live metrics page" (house) icon](./overview-images/house-icon.png)) button. + +To switch to displaying a different opened recorded profile timeline, click the **Show recent timeline sessions** dropdown, to the right of the **Go back to the live metrics page** (![The "Go back to the live metrics page" (house) icon](./overview-images/house-icon.png)) button. + +![The Performance tool displaying a recorded profile](./overview-images/performance-tool-intro-profile.png) + + + +## Monitor Core Web Vitals metrics + + +Use the **Performance** tool to view Core Web Vitals metrics in the initial, **Local metrics** view. The home page of the **Performance** tool shows **Local metrics**, which are performance metrics about the rendered webpage: + +* **Largest Contentful Paint (LCP)** - How quickly the main content of the page loaded. +* **Cumulative Layout Shift (CLS)** - A measure of the most recent unexpected page layout shift. +* **Interaction to Next Paint (INP)** - The responsiveness of the most recent user interaction on the page. + + + +#### Terminology + +| Term | Description | Docs | +|---|---|---| +| Web Vitals | A large set of metrics giving unified guidance to delivering a great user experience on the web. | [Web Vitals](https://web.dev/articles/vitals) | +| Core Web Vitals | The subset of Web Vitals that apply to all web pages, and should be measured by all site owners. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. | [Core Web Vitals](https://web.dev/articles/vitals#core-web-vitals) in _Web Vitals_ | +| Largest Contentful Paint (LCP) | Measures _loading_ performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. The render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page. | [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp), [Optimize LCP](https://web.dev/articles/optimize-lcp) | +| Cumulative Layout Shift (CLS) | Measures _visual stability_. To provide a good user experience, pages should maintain a CLS of 0.1. or less. The largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. | [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls), [Optimize CLS](https://web.dev/articles/optimize-cls) | +| Interaction to Next Paint (INP) | Measures _interactivity_. To provide a good user experience, pages should have a INP of 200 milliseconds or less. The page's overall responsiveness to user interactions, based on the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. | [Interaction to Next Paint (INP)](https://web.dev/articles/inp), [Optimize INP](https://web.dev/articles/optimize-inp) | +| local metrics, local data | The LCP, CLS, and INP metrics. They are captured locally on the inspected webpage, and are updated as you interact with the page. | | + + + +#### Use the demo page + +To produce a **poor** or **needs improvement** metric on the **LCP**, **CLS**, and **INP** cards in the **Performance** tool: + +1. Open a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab. + + The [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo page is designed to load and handle interactions slowly on purpose, in order to illustrate how the LCP, CLS, and INP metrics can be used in the **Performance** tool to identify and fix performance issues. + +1. Right-click the webpage and then select **Inspect**. + + DevTools opens. + +1. In the **Activity Bar** at top, select the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool. + + If the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** (![The More tools icon](./overview-images/more-tools-icon.png)) button and then select the **Performance** tool. + +1. Maximize the window, and make the demo page pane wide, such as 60% of the width of the window. + + If the demo page pane is too narrow, some cards might continue showing **good**, with a green value, which is not the intended result. + +1. Select **Next steps** pane > **Environment settings** card > **CPU throttling** dropdown > select **4x slowdown - recommended**. + + Or, select **Capture settings** (![Capture settings icon with a blue dot](./overview-images/capture-settings-icon-blue-dot.png)) > **CPU throttling** dropdown > **4x slowdown - recommended**. + +1. Select **Next steps** pane > **Environment settings** card > **Network throttling** dropdown > select **Slow 4G**. + +1. Select **Next steps** pane > **Environment settings** card > select the **Disable network cache** checkbox. + + ![Local metrics results: poor; needs improvement; and poor](./overview-images/local-metrics-results.png) + +1. Right-click (or long-click) the **Refresh** button to the left of the **Address bar**, and then select **Empty cache and hard refresh**. + + This ensures that the image is loaded again from the server, rather than from the local cache. + + The **LCP** and **CLS** cards show an orange value and **needs improvement**, or a red value and **poor**, instead of a green value and **good**. + +1. If the **LCP** or **CLS** card remains green and says **good** after the galaxy image finishes rendering, maximize the window and make the demo page pane wider. + + The **LCP** card shows that the galaxy image took a long time to load. The card shows an orange value and **needs improvement**, or a red value and **poor**, instead of a green value and **good**. The engine identifies this image as the largest item to be rendered. + +1. In the **LCP** card, hover over the metric value to see information in a tooltip. + + The **CLS** card illustrates that sudden, unexpected jumps in the layout can negatively impact users. This is also due to the image taking some time to load. By design, the demo webpage neglects to specify a height for the image, and so the page initially loads without reserving much space for the image. When the image starts appearing, the content below it suddenly jumps down. + +1. In the **CLS** card, hover over the metric value to see information in a tooltip. + +1. After the galaxy image finishes rendering, in the rendered demo page, click one of the headings in the right-hand **Discoveries** column, such as **Heliocentric Theory (1543)**. + + The **INP** card changes from not showing a value, to showing an orange value and **needs improvement**, or a red value and **poor**. An **INP** value is displayed. + +1. In the **INP** card, hover over the metric value to see information in a tooltip. + +1. In the **INP** card, click the INP value. + + In the demo page, the **Discoveries** cards are designed to expand and re-render slowly, so that it takes a long time between clicking the heading and rendering the expanded card content. The delay is a random value between 100ms and 1000ms, resulting in a high INP value. + + + Below the **Local metrics** cards, the **Interactions** tab and **Layout shifts** tabs are populated. + + + +#### Interactions tab + +The **Interactions** tab displays information about your interactions with the webpage: + +![The Interactions tab](./overview-images/interactions-tab.png) + +The **Interactions** tab includes: +* Phases. +* Elements. +* Timings. + +To clear the **Interactions** tab, click the **Clear the current log** (![The Clear icon](./overview-images/clear-icon.png)) button to the right of the **Interactions** tab. + + + +#### Layout shifts tab + +The **Layout shifts** tab displays information about layout shifts: + +![The Layout shifts tab](./overview-images/layout-shifts-tab.png) + +The **Layout shifts** tab includes: +* Scores. +* Elements. + + + + + + + + + + + + + +## Capture and analyze a performance report + + +In the next sections, follow guidance on how to record a profile, change capture settings, and analyze the report. + + + +#### Record a performance profile + + +When you are ready to record, the **Performance** tool gives you the following options: + +* [Record runtime performance](./reference.md#record-runtime-performance) in _Performance features reference_. +* [Record load performance](./reference.md#record-load-performance) in _Performance features reference_. +* [Capture screenshots while recording](./reference.md#capture-screenshots-while-recording) in _Performance features reference_. +* [Force garbage collection while recording](./reference.md#force-garbage-collection-while-recording) in _Performance features reference_. +* [Save and share a recording](./reference.md#save-and-share-a-recording) in _Performance features reference_. +* [Load a recording](./reference.md#load-a-recording) in _Performance features reference_. +* [Clear the previous recording](./reference.md#clear-the-previous-recording) in _Performance features reference_. + + + +#### Change capture settings + + +**Capture settings** let you change how DevTools captures performance recordings and can give you additional information in the report. Click the **Capture settings** (![The Capture settings icon](./overview-images/capture-settings-icon.png)) button to access the **Capture settings** menu. + +Select the following options from the **Capture settings** menu: + +* Select the **Disable JavaScript samples** checkbox: Disables the recording of the JavaScript call stacks displayed in the Main track that are called during the recording. Reduces performance overhead. See [Disable JavaScript samples](../performance/reference.md#disable-javascript-samples) in _Performance features reference_. + +* Select the **Enable advanced rendering instrumentation (slow)** checkbox: Captures advanced paint instrumentation. Significantly hinders performance. See [Enable advanced paint instrumentation](../performance/reference.md#enable-advanced-paint-instrumentation) in _Performance features reference_. + +* Select the **Enable CSS selector stats (slow)** checkbox: Captures CSS selector statistics. Significantly hinders performance. See [View CSS selector costs in the Performance tool sidebar](../whats-new/2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's New in DevTools (Microsoft Edge 131)_. + +* CPU throttling: Simulate slower CPU speeds. See [Throttle the CPU while recording](../performance/reference.md#throttle-the-cpu-while-recording) in _Performance features reference_. + +* Network throttling: Simulate slower network speeds. See [Throttle the network while recording](../performance/reference.md#throttle-the-network-while-recording) in _Performance features reference_. + + + +#### Analyze a performance report + + +For a complete guide on how to use the **Performance** tool, see [Analyze a performance recording](../performance/reference.md#analyze-a-performance-recording) in _Performance features reference_. + + +To navigate a performance report: + +* See [Navigate the recording](../performance/reference.md#navigate-the-recording) in _Performance features reference_. + +* See [Search activities](../performance/reference.md#search-activities) in _Performance features reference_. + +* See [Track event initiators](../performance/reference.md#track-event-initiators) in _Performance features reference_. + + +To focus on what matters for your workflow: + +* [Change the order of tracks and hide them](../performance/reference.md#change-the-order-of-tracks-and-hide-them) + +* [Hide functions and their children in the flame chart](../performance/reference.md#hide-functions-and-their-children-in-the-flame-chart) + +* [Zoom on portions of a recording and switch between zoom levels](./reference.md#zoom-on-portions-of-a-recording-and-switch-between-zoom-levels) in _Performance features reference_. + + +To learn about the **Bottom-up**, **Call tree**, and **Event log** tabs: + +* [View activities in a table](./reference.md#view-activities-in-a-table) in _Performance features reference_. + + +To analyze a performance report: + +* [View main thread activity](./reference.md#view-main-thread-activity) in _Performance features reference_. +* [Read the flame chart](./reference.md#read-the-flame-chart) in _Performance features reference_. +* [View a screenshot](./reference.md#view-a-screenshot) in _Performance features reference_. +* [View memory metrics](./reference.md#view-memory-metrics) in _Performance features reference_. +* [View the duration of a portion of a recording](./reference.md#view-the-duration-of-a-portion-of-a-recording) in _Performance features reference_. +* [Analyze CSS selector performance during Recalculate Style events](./selector-stats.md). +* [Analyze frames per second (FPS)](./reference.md#analyze-frames-per-second-fps) in _Performance features reference_. +* [Performance recording event reference](./performance-reference.md) + + + +## Improve performance with these tools + +Discover other tools that can help you improve your website's performance: + +| Tool | Article | +|---|---| +| **Lighthouse** tool | [Optimize website speed using Lighthouse](../speed/get-started.md) | +| **Memory** tool | [Fix memory problems](../memory-problems/index.md) | +| **Performance** tool > **Insights** tab | [Get actionable insights](./reference.md#get-actionable-insights) in _Performance features reference_. | +| **Rendering** tool | [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](../rendering-tools/rendering-tool.md) | +| **Issues** tool | [Find and fix problems using the Issues tool](../issues/index.md) | +| **Performance** tool | [View layers information](../performance/reference.md#view-layers-information) in _Performance features reference_ | + + + +> [!NOTE] +> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +> The original page is found [here](https://developer.chrome.com/docs/devtools/performance/overview) and is authored by Dale St. Marthe and Sofia Emelianova. + +[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/performance-reference.md b/microsoft-edge/devtools-guide-chromium/performance/performance-reference.md similarity index 97% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/performance-reference.md rename to microsoft-edge/devtools-guide-chromium/performance/performance-reference.md index 9eddbcb28d..0ffd2bbc8f 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/performance-reference.md +++ b/microsoft-edge/devtools-guide-chromium/performance/performance-reference.md @@ -94,8 +94,8 @@ The following events are in the **Scripting** category. | Install Timer | A timer was created with [setInterval()](https://developer.mozilla.org/docs/Web/API/WindowTimers/setInterval) or [setTimeout()](https://developer.mozilla.org/docs/Web/API/WindowTimers/setTimeout). | | Request Animation Frame | A `requestAnimationFrame()` call scheduled a new frame. | | Remove Timer | A previously created timer was cleared. | -| Time | A script called [console.time()](/microsoft-edge/devtools-guide-chromium/console/api#time). | -| Time End | A script called [console.timeEnd()](/microsoft-edge/devtools-guide-chromium/console/api#timeend). | +| Time | A script called [console.time()](../console/api.md#time). | +| Time End | A script called [console.timeEnd()](../console/api.md#timeend). | | Timer Fired | A timer fired that was scheduled with `setInterval()` or `setTimeout()`. | | XHR Ready State Change | The ready state of an XMLHTTPRequest changed. | | XHR Load | An `XMLHTTPRequest` finished loading. | diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/advanced-filtering.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/advanced-filtering.png new file mode 100644 index 0000000000..8b9f807c03 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/advanced-filtering.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/annotations.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/annotations.png new file mode 100644 index 0000000000..9b2b6a5723 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/annotations.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/bottoms-up.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/bottoms-up.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/bottoms-up.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/bottoms-up.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/breadcrumb-zoom.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/breadcrumb-zoom.png new file mode 100644 index 0000000000..c736bca079 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/breadcrumb-zoom.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/call-tree.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/call-tree.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/call-tree.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/call-tree.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/capture-screenshots-checkbox.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/capture-screenshots-checkbox.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/capture-screenshots-checkbox.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/capture-screenshots-checkbox.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/capture-settings-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/capture-settings-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/capture-settings-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/capture-settings-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/capture-settings.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/capture-settings.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/capture-settings.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/capture-settings.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/clear-button.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/clear-button.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/clear-button.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/clear-button.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/clear-recording-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/clear-recording-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/clear-recording-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/clear-recording-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/collect-garbage-button.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/collect-garbage-button.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/collect-garbage-button.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/collect-garbage-button.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/collect-garbage-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/collect-garbage-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/collect-garbage-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/collect-garbage-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/customize-and-control-devtools-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/customize-and-control-devtools-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/customize-and-control-devtools-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/customize-and-control-devtools-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/disable-javascript-samples-checkbox-off.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/disable-javascript-samples-checkbox-off.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/disable-javascript-samples-checkbox-off.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/disable-javascript-samples-checkbox-off.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/disable-javascript-samples-checkbox-on.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/disable-javascript-samples-checkbox-on.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/disable-javascript-samples-checkbox-on.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/disable-javascript-samples-checkbox-on.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/disable-local-fonts.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/disable-local-fonts.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/disable-local-fonts.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/disable-local-fonts.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/event-log.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/event-log.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/event-log.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/event-log.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/refreshed.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/flame-chart.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/refreshed.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/flame-chart.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/fps-meter.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/fps-meter.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/fps-meter.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/fps-meter.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/frames-hover.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/frames-hover.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/frames-hover.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/frames-hover.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/frames-summary.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/frames-summary.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/frames-summary.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/frames-summary.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/gpu-zoomed.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/gpu-zoomed.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/gpu-zoomed.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/gpu-zoomed.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/hide-track-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/hide-track-icon.png new file mode 100644 index 0000000000..6c06fd95cd Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/hide-track-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/insights-tab.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/insights-tab.png new file mode 100644 index 0000000000..37321bbd00 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/insights-tab.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/interactions-animation.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/interactions-animation.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/interactions-animation.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/interactions-animation.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/layer-borders.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/layer-borders.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/layer-borders.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/layer-borders.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/layers-all.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/layers-all.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/layers-all.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/layers-all.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-icon.png new file mode 100644 index 0000000000..0e9efbc9e9 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-via-button.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-via-button.png new file mode 100644 index 0000000000..17da91fa72 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-via-button.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-via-right-click.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-via-right-click.png new file mode 100644 index 0000000000..d94ad1bc1a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/load-profile-via-right-click.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/main-duration.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/main-duration.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/main-duration.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/main-duration.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/main-flame-chart.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/main-flame-chart.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/main-flame-chart.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/main-flame-chart.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/main-zoomed.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/main-zoomed.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/main-zoomed.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/main-zoomed.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/match-case-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/match-case-icon.png new file mode 100644 index 0000000000..3af365500c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/match-case-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/memory-chart.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/memory-chart.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/memory-chart.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/memory-chart.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/memory-highlight.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/memory-highlight.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/memory-highlight.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/memory-highlight.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/more-tools-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/more-tools-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/more-tools-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/more-tools-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/move-track-down-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/move-track-down-icon.png new file mode 100644 index 0000000000..c2842bc9eb Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/move-track-down-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/move-track-up-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/move-track-up-icon.png new file mode 100644 index 0000000000..df93131002 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/move-track-up-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/network.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/network.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/network.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/network.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/next-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/next-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/next-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/next-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/number-hidden-drop-down-arrow.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/number-hidden-drop-down-arrow.png new file mode 100644 index 0000000000..b058b61d15 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/number-hidden-drop-down-arrow.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/paint-flashing.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/paint-flashing.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/paint-flashing.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/paint-flashing.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/paint-profiler.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/paint-profiler.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/paint-profiler.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/paint-profiler.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/perf-shortcuts-style.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/perf-shortcuts-style.png new file mode 100644 index 0000000000..f182eac6c4 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/perf-shortcuts-style.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/performance-memory.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/performance-memory.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/performance-memory.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/performance-memory.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/post-message-events-arrows.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/post-message-events-arrows.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/post-message-events-arrows.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/post-message-events-arrows.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/post-message-events.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/post-message-events.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/post-message-events.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/post-message-events.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/previous-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/previous-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/previous-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/previous-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/raster.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/raster.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/raster.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/raster.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/record-highlight.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/record-highlight.png new file mode 100644 index 0000000000..3ead6d569b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/record-highlight.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/record-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/record-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/record-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/record-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/refresh-button.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/refresh-button.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/refresh-button.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/refresh-button.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/refresh-page-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/refresh-page-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/refresh-page-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/refresh-page-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/refreshed.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/refreshed.png new file mode 100644 index 0000000000..25b05522ce Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/refreshed.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/regex-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/regex-icon.png new file mode 100644 index 0000000000..30083edad2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/regex-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/remove-child-breadcrumbs.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/remove-child-breadcrumbs.png new file mode 100644 index 0000000000..805a82cd8e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/remove-child-breadcrumbs.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/rendering-tool.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/rendering-tool.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/rendering-tool.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/rendering-tool.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/save-profile-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/save-profile-icon.png new file mode 100644 index 0000000000..f790ae6869 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/save-profile-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/save-profile.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/save-profile.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/save-profile.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/save-profile.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/save-trace.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/save-trace.png new file mode 100644 index 0000000000..2072336b1b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/save-trace.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/screenshots-hover.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/screenshots-hover.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/screenshots-hover.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/screenshots-hover.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/scrolling-performance-issues.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/scrolling-performance-issues.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/scrolling-performance-issues.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/scrolling-performance-issues.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-highlighted.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/search-highlighted.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-highlighted.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/search-highlighted.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-regex.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/search-regex.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/search-regex.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/search-regex.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/select-portion.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/select-portion.png new file mode 100644 index 0000000000..e84b578a1c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/select-portion.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/selector-stats.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/selector-stats.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/selector-stats.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/selector-stats.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/show-heaviest-stack-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/show-heaviest-stack-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/show-heaviest-stack-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/show-heaviest-stack-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/show-shortcuts-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/show-shortcuts-icon.png new file mode 100644 index 0000000000..c0f795b808 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/show-shortcuts-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/show-sidebar-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/show-sidebar-icon.png new file mode 100644 index 0000000000..eb85f313a7 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/show-sidebar-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/summary-me.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/summary-me.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/summary-me.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/summary-me.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/summary-network.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/summary-network.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/summary-network.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/summary-network.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/summary-preview.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/summary-preview.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/summary-preview.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/summary-preview.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/timeline-overview.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/timeline-overview.png new file mode 100644 index 0000000000..4c7d162c92 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/timeline-overview.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/zoom-highlighted.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/zoom-highlighted.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/zoom-highlighted.png rename to microsoft-edge/devtools-guide-chromium/performance/reference-images/zoom-highlighted.png diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference-images/zoom-in-icon.png b/microsoft-edge/devtools-guide-chromium/performance/reference-images/zoom-in-icon.png new file mode 100644 index 0000000000..cefc79e9c4 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/reference-images/zoom-in-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference.md b/microsoft-edge/devtools-guide-chromium/performance/reference.md new file mode 100644 index 0000000000..c6fe844113 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/performance/reference.md @@ -0,0 +1,1248 @@ +--- +title: Performance features reference +description: A reference on all the ways to record and analyze performance in Microsoft Edge DevTools. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 02/24/2025 +--- + +# Performance features reference + + +This page is a comprehensive reference of DevTools features that are related to analyzing performance. + +For a step-by-step tutorial on how to analyze the performance of a page using the **Performance** tool, see [Analyze runtime performance (tutorial)](index.md). + +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)_. + + + +**Detailed contents:** +* [Open the Performance tool](#open-the-performance-tool) +* [Record performance](#record-performance) + * [Record runtime performance](#record-runtime-performance) + * [Record load performance](#record-load-performance) + * [Capture screenshots while recording](#capture-screenshots-while-recording) + * [Force garbage collection while recording](#force-garbage-collection-while-recording) + * [Show recording settings](#show-recording-settings) + * [Disable JavaScript samples](#disable-javascript-samples) + * [Throttle the network while recording](#throttle-the-network-while-recording) + * [Throttle the CPU while recording](#throttle-the-cpu-while-recording) + * [Enable CSS selector stats](#enable-css-selector-stats) + * [Enable advanced paint instrumentation](#enable-advanced-paint-instrumentation) +* [Annotate a recording and share it](#annotate-a-recording-and-share-it) + * [Save and share a recording](#save-and-share-a-recording) + * [Load a recording](#load-a-recording) +* [Clear the previous recording](#clear-the-previous-recording) +* [Analyze a performance recording](#analyze-a-performance-recording) + * [Get actionable insights](#get-actionable-insights) + * [Navigate the recording](#navigate-the-recording) + * [Use keyboard shortcuts to navigate](#use-keyboard-shortcuts-to-navigate) + * [Select a portion of a recording](#select-a-portion-of-a-recording) + * [Zoom on portions of a recording and switch between zoom levels](#zoom-on-portions-of-a-recording-and-switch-between-zoom-levels) + * [Scroll a long flame chart](#scroll-a-long-flame-chart) + * [Search activities](#search-activities) + * [Change the order of tracks and hide them](#change-the-order-of-tracks-and-hide-them) + * [View main thread activity](#view-main-thread-activity) + * [Read the flame chart](#read-the-flame-chart) + * [Track event initiators](#track-event-initiators) + * [Hide functions and their children in the flame chart](#hide-functions-and-their-children-in-the-flame-chart) + * [Ignore scripts in the flame chart](#ignore-scripts-in-the-flame-chart) + * [View activities in a table](#view-activities-in-a-table) + * [Root activities](#root-activities) + * [The Bottom-up tab](#the-bottom-up-tab) + * [The Call tree tab](#the-call-tree-tab) + * [The Event log tab](#the-event-log-tab) + * [View performance markers](#view-performance-markers) + * [View custom timings](#view-custom-timings) + * [View interactions](#view-interactions) + * [View layout shifts](#view-layout-shifts) + * [View animations](#view-animations) + * [View GPU activity](#view-gpu-activity) + * [View raster activity](#view-raster-activity) + * [Analyze frames per second (FPS)](#analyze-frames-per-second-fps) + * [The Frames section](#the-frames-section) + * [View network requests](#view-network-requests) + * [View memory metrics](#view-memory-metrics) + * [View the duration of a portion of a recording](#view-the-duration-of-a-portion-of-a-recording) + * [View a screenshot](#view-a-screenshot) + * [View layers information](#view-layers-information) + * [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) +* [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) + * [View an overlay of layers with Layer Borders](#view-an-overlay-of-layers-with-layer-borders) + * [Find scroll performance issues in realtime](#find-scroll-performance-issues-in-realtime) + * [Disable local fonts](#disable-local-fonts) +* [Visualize memory leaks (Performance tool: Memory checkbox)](#visualize-memory-leaks-performance-tool-memory-checkbox) + + + +## Open the Performance tool + + + + +To use the sections in this page, 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. 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. + + + +## Record performance + +The sections below describe how to record the performance of a webpage in DevTools. + + + +#### Record runtime performance + +To analyze the performance of a webpage while it's running (rather than while it's loading): + +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. Click the **Record** (![Record icon](./reference-images/record-icon.png)) button. + + ![Record](./reference-images/record-highlight.png) + +1. Interact with the page for a while. DevTools records all page activity that occurs as a result of your interactions. + +1. Click **Record** again. Or, click **Stop** to stop recording. + + The **Performance** tool displays the recording. + + + +#### Record load performance + +To analyze the performance of a webpage while it's loading (rather than while it's running): + +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. 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) + + + +#### Capture screenshots while recording + +To capture a screenshot of every frame while recording, select the **Screenshots** checkbox: + +![The Screenshots checkbox](./reference-images/capture-screenshots-checkbox.png) + +To learn how to interact with screenshots, see [View a screenshot](#view-a-screenshot), below. + + + +#### Force garbage collection while recording + +To force garbage collection while you are recording a page, click the **Collect garbage** (![Collect garbage icon](./reference-images/collect-garbage-icon.png)) button: + +![Collect garbage](./reference-images/collect-garbage-button.png) + + + +#### 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: + +![The Capture Settings section at top of the Performance tool](./reference-images/capture-settings.png) + + + +#### Disable JavaScript samples + +By default, the **Main** section of a recording displays detailed call stacks of JavaScript functions that were called during the recording. To disable the JavaScript call stacks: + +1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. + +1. Select the **Disable JavaScript samples** checkbox. + +1. Take a recording of the page. + + +The following two figures show the difference between disabling and enabling JavaScript samples. The **Main** section of the recording is much shorter when JavaScript sampling is disabled, because the recording omits the JavaScript call stacks. + +An example of a recording when JS samples are disabled: + +![An example of a recording when JS samples are disabled.](./reference-images/disable-javascript-samples-checkbox-on.png) + +An example of a recording when JS samples are enabled: + +![An example of a recording when JS samples are enabled.](./reference-images/disable-javascript-samples-checkbox-off.png) + + + +#### Throttle the network while recording + + +To throttle the network while recording: + +1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. + +1. Set **Network** to the desired level of throttling. + + A warning icon is displayed on the **Network** tool's tab, to remind you that throttling is enabled. + + + +#### Throttle the CPU while recording + + +To throttle the CPU while recording: + +1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. + +1. Set **CPU** to the desired level of throttling. + + A warning icon is displayed on the **Performance** tool's tab, to remind you that throttling is enabled. + +Throttling is relative to the capabilities of your computer. For example, the **2x slowdown** option makes your CPU operate twice as slow than normal. DevTools don't truly simulate the CPUs of mobile devices, because the architecture of mobile devices is very different from that of desktops and laptops. + + + +#### Enable CSS selector stats + +To view the statistics of your CSS rule selectors during long-running **Recalculate Style** events: + +1. Click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. + +1. Select the **Enable CSS selector stats** checkbox. + +For details, see [Analyze CSS selector performance during Recalculate Style events](./selector-stats.md). + + + +#### Enable advanced paint instrumentation + +To view detailed paint instrumentation: + +1. Click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button. See [Show recording settings](#show-recording-settings), above. + +1. Select the **Enable advanced paint instrumentation (slow)** checkbox. + +To learn how to interact with the paint information, see [View layers information](#view-layers-information), below, and [View paint profiler](#view-paint-profiler), below. + + + +## Annotate a recording and share it + + +Once a performance trace is [recorded](#record-performance), you can [analyze](#analyze-a-performance-recording) it, and annotate it to share your findings. + +To annotate a recording, open the **Annotations** tab in the **Performance** tool sidebar. If the sidebar is not visible, click the **Show sidebar** (![The Show sidebar icon](./reference-images/show-sidebar-icon.png)) button. + +The **Annotations** tab in the sidebar initially contains instructions about how to add annotations. After you create annotations, as shown below, the tab lists your existing annotations, and allows you to delete them. + +There are several ways to add an annotation: + + +* **Label an item**: To label an item in the performance trace, double-click the item, enter the label in the text box, and then press **Enter**. + +* **Connect two items**: To draw an arrow between two items in the performance trace, double-click the first item, click the arrow icon next to it, and then click the second item. + +* **Label a time range**: To draw and label an arbitrary time range in the performance trace, hold the **Shift** key and drag from the start of a time range to the end, enter the label in the text box that appears, and then press **Enter**. + +For example, open the [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) webpage in a new window or tab, create a performance recording, and then do the above three actions. Result: + +![Annotations on a performance recording](./reference-images/annotations.png) + +In this example, there are: +* Three annotations. +* An arrow annotation connecting two annotations. +* An annotated time range highlighted in pink. + +The **Annotations** tab shows the number of annotations next to its tab name; in this example, 5. + +To delete an annotation, hover over it in the **Annotations** tab and then click the **Delete** button next to it. + +To hide annotations from the performance trace, select **Hide annotations** at the bottom of the **Annotations** tab. + + + +#### Save and share a recording + + +To save a recording as a file on your device and later share it with your annotated performance findings, in the action bar at the top of the **Performance** tool, click the **Save profile** (![The Save profile icon](./reference-images/save-profile-icon.png)) button, and then select **Save trace**. + +![Save trace with annotations](./reference-images/save-trace.png) + + +Alternatively, select **Save trace without annotations**. + +Instead of clicking the **Save profile** (![The Save profile icon](./reference-images/save-profile-icon.png)) button at the top, you can right-click a track of a recording, and then select **Save profile**: + +![The 'Save profile' right-click menuitem](./reference-images/save-profile.png) + + + +#### Load a recording + + +To load a recording from a file, click the **Load profile** (![The Load profile icon](./reference-images/load-profile-icon.png)) button in the action bar at the top of the **Performance** tool. + +![Load trace button via button in the action bar](./reference-images/load-profile-via-button.png) + +The **Performance** tool will show annotations if they are present in the trace. + +Or, right-click in the **Performance** tool, and then select **Load profile**: + +![The 'Load profile' right-click menuitem](./reference-images/load-profile-via-right-click.png) + +You can right-click in an existing recording, or on the screen that's displayed in the **Performance** tool when there are no recordings. + + + +## Clear the previous recording + +After making a recording, to remove that recording from the **Performance** tool, click the **Clear recording** (![Clear recording icon](./reference-images/clear-recording-icon.png)) button: + +![Clear recording](./reference-images/clear-button.png) + + + +## Analyze a performance recording + + +After you [record runtime performance](#record-runtime-performance) or [record load performance](#record-load-performance), the **Performance** tool displays a lot of data about the recording. Use the recorded data to analyze the performance of your webpage. + + + +#### Get actionable insights + + +The **Performance** tool extracts actionable insights from the recorded performance data. These insights are ways in which you can improve the performance of your website. The insights include: + +* INP by phase +* LCP by phase +* LCP request discovery +* Layout shift culprits +* Render blocking request +* Network dependency tree +* Improve image delivery +* Document request latency +* Font display +* Optimize viewport for mobile +* Optimize DOM size +* 3rd parties +* CSS selector costs +* Forced reflow +* Use efficient cache lifetimes + +The insights are focused on improving the Core Web Vitals metrics and on optimizing how quickly the webpage loads and renders. + +After you record a profile in the **Performance** tool, the **Insights** tab in the sidebar shows the list of actionable insights that apply to the recorded performance data. To view the list of insights that don't apply to the profile, see the **Passed insights** section. + +To use the insights: + +1. Make a performance recording, per [Record performance](#record-performance), above. + +1. In the left sidebar of the **Performance** tool, select the **Insights** tab, expand different sections, and hover over and click items. The **Performance** tool highlights the corresponding events in the trace: + + ![Hovering over entries in the Insights tab ](./reference-images/insights-tab.png) + + If the sidebar and **Insights** tab is not visible, click the **Show sidebar** (![The Show sidebar icon](./reference-images/show-sidebar-icon.png)) button. + + + +#### Navigate the recording + + +To closely inspect your performance recording, you can select a portion of a recording, scroll a long flame chart, zoom in and out, and use breadcrumbs to jump between zoom levels. + + + +###### Use keyboard shortcuts to navigate + +To use keyboard shortcuts to quickly navigate the recording, first, choose your preferred style of keyboard navigation. + +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. + +With the **Modern** option button 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 horizontal scroll: **Shift** + mouse wheel. + + +With the **Classic** option button 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. + +See also: +* [Performance panel: enable a switch to an alternative timeline navigation option](../experimental-features/index.md#performance-panel-enable-a-switch-to-an-alternative-timeline-navigation-option) in _Experimental features in Microsoft Edge DevTools_. + + + + +###### Select a portion of a recording + + +At the top of the recording, the **Timeline overview** section is displayed, including the **CPU** and **NET** charts (indicated on the right): + +![The Timeline overview under the action bar](./reference-images/timeline-overview.png) + +To select a portion of a recording, in the **Timeline overview**, click and drag horizontally: + +![Select a portion of a recording](./reference-images/select-portion.png) + + +To select a portion using the keyboard: + +1. Focus the **Main** track or any of its neighbors. + +1. Use the **W**, **A**, **S**, **D** keys to zoom in, move left, zoom out, and move right, respectively. + + +To select a portion using a trackpad: + +1. Hover over the **Timeline overview** section or any of the tracks (**Main** and its neighbors). + +1. Using two fingers, swipe up to zoom out, swipe left to move left, swipe down to zoom in, and swipe right to move right. + + +You can select a portion of a recording by using a mouse, keyboard, or trackpad. + + +**Mouse:** + +To select a portion of a recording by using the mouse: + +* Drag your mouse left or right across the **Overview**. The **Overview** is the section that contains the **CPU** and **NET** charts: + +![Drag the mouse across the Overview to zoom](./reference-images/zoom-highlighted.png) + +To scroll a long flame chart in the **Main** section or in any of the neighboring sections, click and hold while dragging up and down. Drag left or right to move which portion of the recording is selected. + + +**Keyboard:** + +To select a portion of a recording by using the keyboard: + +1. Select the background of the **Main** section, or select the background of a section that's next to the **Main** section, such as **Interactions**, **Network**, or **GPU**. This keyboard workflow only works when one of these sections is in focus. + +1. Press `W` or `S` to zoom in or out. Press `A` or `D` to move left or right. + + +**Trackpad:** + +To select a portion of a recording by using a trackpad: + +1. Hover over the **Overview** section or the **Details** section. The **Overview** section is the area containing the **FPS**, **CPU**, and **NET** charts. The **Details** section is the area containing the **Main** section and the **Interactions** section. + +1. Using two fingers, swipe up to zoom out, or down to zoom in. Using two fingers, swipe left to move left, or right to move right. + + + +###### Zoom on portions of a recording and switch between zoom levels + + +The **Timeline overview** lets you zoom in on portions of your recording in succession, and create breadcrumbs at each step, allowing you to then switch between these zoom levels. + +To zoom on a portion of your recording and use breadcrumbs: + +1. In **Timeline overview**, [select a portion of the recording](#select-a-portion-of-a-recording) (above). + +1. Hover over the selection, and then click the **N ms** (![Zoom in icon](./reference-images/zoom-in-icon.png)) button: + + ![Jumping to a chosen zoom level](./reference-images/breadcrumb-zoom.png) + + The selection expands to fill the **Timeline overview**. A chain of breadcrumbs starts building at top of the **Timeline overview**. + +1. Repeat the previous two steps to create another nested breadcrumb. You can continue to nest breadcrumbs as long as the selection range is greater than 5 milliseconds. + +1. To jump to a chosen zoom level, click the corresponding breadcrumb in the chain at top of the **Timeline overview**. + + +To remove the children of a breadcrumb, right-click the parent breadcrumb and then select **Remove child breadcrumbs**: + +![Removing the children of a breadcrumb](./reference-images/remove-child-breadcrumbs.png) + + + +###### Scroll a long flame chart + +To scroll a long flame chart in the **Main** track or any of its neighbors, click and hold, then drag in any direction until what you are looking for comes into view. + + + +#### Search activities + + +You can search across the activities in the **Main** track and requests in the **Network** track. + + +To open the search box at the bottom of the **Performance** tool: + +1. Press **Ctrl+F** (Windows, Linux) or **Command+F** (macOS). + + The **Find** box appears at the bottom of the **Performance** tool: + + ![The search box](./reference-images/search-regex.png) + +1. In the **Find** box, enter a query, such as "recalculate style". + + The matching activities are highlighted in the **Main** section as you type, and the total number of matches appears in the search box. The first matching activity is selected, outlined in blue: + + ![The search box with a query and highlighted activities](./reference-images/search-highlighted.png) + + +To navigate among the activities that match your query: + +* To select the next activity, press **Enter** or click the **Next** (![Next](./reference-images/next-icon.png)) button. + +* To select the previous activity, press **Shift+Enter** or click the **Previous** (![Previous](./reference-images/previous-icon.png)) button. + +The **Performance** tool shows a tooltip over the activity that's selected in the search box. + + +To modify the query settings: + +* To use a regular expression in your query, click the **Enable regular expressions** (![The "Enable regular expressions" icon](./reference-images/regex-icon.png)) button. If you select the **Regex** button and then enter `^E.*` that finds any activity that any activity that begins with the letter E. + +* To make the query case-sensitive, click the **Enable case sensitive search** (![The "Enable case sensitive search" icon](./reference-images/match-case-icon.png)) button. + + +To hide the search box, click the **Cancel** button. + + + +#### Change the order of tracks and hide them + + +To declutter the performance trace, you can change the order of tracks and hide the irrelevant ones in track configuration mode. + +To move and hide tracks: + +1. To enter the configuration mode, right-click a track name and then select **Configure tracks**. + +1. Click the **Move track up** (![The Move track up icon](./reference-images/move-track-up-icon.png)) button or the **Move track down** (![The Move track down icon](./reference-images/move-track-down-icon.png)) button to move a track up or down. Click the **Hide track** (![The Hide track icon](./reference-images/hide-track-icon.png)) button to hide it. + +1. Right-click the track, and then select **Finish configuring**. + + + +The **Performance** tool applies your track configuration to new traces as well, unless you close and then re-open DevTools. + + + +#### View main thread activity + +Use the **Main** section to view the activity that occurred on the main thread of the page: + +![The Main section](./reference-images/main-zoomed.png) + +Select an event to view more information about it in the **Summary** tab. DevTools outlines the selected event: + +![More information about the anonymous function in the Summary tab](./reference-images/summary-me.png) + +DevTools represents main thread activity with a flame chart: + +![A flame chart](./reference-images/main-flame-chart.png) + +The x-axis represents the recording over time. The y-axis represents the call stack. An event that's near the top causes the events that are below it; for example, in the previous figure, an `input` event caused a `Function Call`, which ran an anonymous function that called `filterByCamera` and then `populateGallery`. The `populateGallery` function then made DOM changes by calling `set innerHTML`. + +DevTools assigns scripts random colors. In the previous figure, function requests from a script are colored fuchsia (purple-pink). The darker yellow represents scripting activity, and the purple event represents rendering activity. These darker yellow and purple events are consistent across all recordings. + +If you want to hide the detailed flame chart of JavaScript requests, see [Disable JavaScript samples](#disable-javascript-samples), above. +When JavaScript samples are disabled, only high-level events are displayed, such as `Event: input` and `Function Call` from the previous figure. + + + + +#### Read the flame chart + + +The **Performance** tool represents main thread activity in a flame chart. The x-axis represents the recording over time. The y-axis represents the call stack. The events on top cause the events below. + +![A flame chart.](./reference-images/flame-chart.png) + + + +The **Performance** tool assigns scripts random colors to break up the flame chart and make it more readable. + + +Long tasks are also highlighted with a red triangle, and with the part over 50 milliseconds shaded in red. + + + + + +Additionally, the **Main** track shows information on CPU profiles started and stopped with `profile()` and `profileEnd()` console functions. + +To hide the detailed flame chart of JavaScript calls, see Disable JavaScript samples. When JS samples are disabled, you see only the high-level events such as `Event (click)` and `Function Call`. + + + +#### Track event initiators + + +The **Main** track can show arrows that connect the following initiators and the events they caused: + +* Style or layout invalidation -> **Recalculate styles** or **Layout** +* **Request Animation Frame** -> **Animation Frame Fired** +* **Request Idle Callback** -> **Fire Idle Callback** +* **Install Timer** -> **Timer Fired** +* **Create WebSocket** -> **Send...** and **Receive WebSocket Handshake** or **Destroy WebSocket** +* **Schedule postTask** -> **Fire postTask** or **Abort postTask** + +To see the arrows, find either an initiator or the event it caused in the flame chart and select it. + + + +When selected, the **Summary** tab shows **Initiator for** links for initiators and **Initiated by** links for the events they caused. Click them to jump between the corresponding events. + + + + + +#### Hide functions and their children in the flame chart + + +To declutter the flame chart in the **Main** thread, you can hide selected functions or their children: + +1. In the **Main** track, right-click a function and choose one of the following options or press the corresponding shortcut: + + * **Hide function** (**H**) + * **Hide children** (**C**) + * **Hide repeating children** (**R**) + * **Reset children** (**U**) + * **Reset trace** (**T**) + * **Add script to ignore list** (**I**) + + + + A **number hidden** drop-down (![The number hidden drop-down](./reference-images/number-hidden-drop-down-arrow.png)) button appears next to the function name with hidden children. + +1. To see the number of hidden children, hover over the **number hidden** drop-down (![The number hidden drop-down](./reference-images/number-hidden-drop-down-arrow.png)) button. + + + +1. To reset a function with hidden children or the whole flame chart, select the function and press **U** or right-click any function and select **Reset trace** respectively. + + + +###### Ignore scripts in the flame chart + + +To add a script to the ignore list, right-click a script in the chart and select **Add script to ignore list**. + + + +The chart collapses ignored scripts, marks them as **On ignore list**, and adds them to the **Custom exclusion** rules in **Customize and control DevTools** (![The Customize and control DevTools icon](./reference-images/customize-and-control-devtools-icon.png)) > **Settings** > **Ignore list**. Ignored scripts are saved until you remove them either from the trace or from the **Custom exclusion rules**. + + + + + +#### View activities in a table + + +After recording a page, in addition to the **Main** section to analyze activities, DevTools also provides three tabular views for analyzing activities. Each view gives you a different perspective on the activities: + +* To view the activities where the most time was directly spent, use the [Bottom-up](#the-bottom-up-tab) tab. + +* To view the root activities that cause the most work, use the [Call tree](#the-call-tree-tab) tab. + +* To view the activities in the order in which they occurred during the recording, use the [Event log](#the-event-log-tab) tab. + +To help you find what you are looking for faster, all three tabs have buttons for advanced filtering next to the **Filter** bar: + +* The **Enable regular expressions** (![The "Enable regular expressions" icon](./reference-images/regex-icon.png)) button. + +* The **Enable case sensitive search** (![The "Enable case sensitive search" icon](./reference-images/match-case-icon.png)) button. + +![The three buttons for advanced filtering](./reference-images/advanced-filtering.png) + +Each tabular view in the **Performance** tool shows links for activities such as functions calls. To help you debug, DevTools finds the corresponding function declarations in source files. Additionally, if the appropriate source maps are present and enabled, DevTools automatically finds the original files. + +Click a link to open a source file in the **Sources** tool. + + + +The next three sections all refer to the same demo. You can run the demo yourself at [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) and see the source at +[MicrosoftEdge / Demos > /devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs). + + + +###### Root activities + + +Here's an explanation of the root activities concept that's mentioned in the **Call Tree** tab, **Bottom-Up** tab, and **Event Log** sections. + +_Root activities_ are activities that cause the browser to do some work. For example, when you click a webpage, the browser runs an `Event` activity as the root activity. That `Event` activity may cause other activities to run, such as a handler. + +In the flame chart of the **Main** section, root activities are at the top of the chart. In the **Call tree** and **Event log** tabs, root activities are the top-level items. + +For an example of root activities, see [The Call tree tab](#the-call-tree-tab), below. + + + + +###### The Call tree tab + +Use the **Call tree** tab to view which [root activities](#root-activities) cause the most work. + +The **Call tree** tab only displays activities during the selected portion of the recording. To learn how to select a portion of a recording, see [Select a portion of a recording](#select-a-portion-of-a-recording), above. + +![The Call tree tab](./reference-images/call-tree.png) + + +In the previous figure, the top-level items in the **Activity** column, such as `Event Timing`, are root activities. The nesting represents the call stack. For example, in the previous figure, `Event Timing` caused `Event: mouseup`, which caused `Function Call`, which cause `(anonymous)`, and so on. + +**Self Time** represents the time directly spent in that activity. **Total Time** represents the time spent in that activity or any of the children. + +Click **Self Time**, **Total Time**, or **Activity** to sort the table by that column. + +Use the **Filter** text box to filter events by activity name. + +By default the **Grouping** menu is set to **No Grouping**. Use the **Grouping** menu to sort the activity table based on various criteria. + +Click **Show Heaviest Stack** (![Show Heaviest Stack](./reference-images/show-heaviest-stack-icon.png)) to reveal another table to the right of the **Activity** table. Click on an activity to populate the **Heaviest Stack** table. The **Heaviest Stack** table displays which children of the selected activity took the longest time to run. + + + +###### The Bottom-up tab + +Use the **Bottom-up** tab to view which activities directly took up the most time in aggregate. + +The **Bottom-up** tab only displays activities during the selected portion of the recording. To learn how to select a portion of a recording, see [Select a portion of a recording](#select-a-portion-of-a-recording), above. + +![The Bottom-up tab](./reference-images/bottoms-up.png) + + +In the **Main** section flame chart of the previous figure, almost all of the time was spent running the `a`, `b`, and `c` functions. The top activities in the **Bottom-up** tab of the previous figure are also `a`, `b`, and `c`. In the **Bottom-up** tab, the next most expensive activity is `Minor GC`. + +The **Self Time** column represents the aggregated time spent directly in that activity, across all of the occurrences. + +The **Total Time** column represents aggregated time spent in that activity or any of the children. + + + +###### The Event log tab + +Use the **Event log** tab to view activities in the order in which they occurred during the recording. + +The **Event log** tab only displays activities during the selected portion of the recording. To learn how to select a portion of a recording, see [Select a portion of a recording](#select-a-portion-of-a-recording), above. + +![The Event log tab](./reference-images/event-log.png) + +The **Start Time** column represents the point at which that activity started, relative to the start of the recording. For example, the start time of `925.0 ms` for the selected item in the previous figure means that activity started 925.0 ms after the recording started. + +The **Self Time** column represents the time spent directly in that activity. + +The **Total Time** column represents time spent directly in that activity or in any of the children. + +Click the **Start Time**, **Self Time**, or **Total Time** column heading, to sort the table by that column. + +Use the **Filter** text box to filter activities by name. + +Use the **Duration** menu to filter out any activities that took less than 1 ms or 15 ms. By default, the **Duration** menu is set to **All**, meaning that all activities are shown. + +Clear the **Loading**, **Scripting**, **Rendering**, or **Painting** checkboxes to filter out all activities from those categories. + + + +#### View performance markers + + +In an overlay with vertical lines across the performance trace, you can see important performance markers, such as: + +* [First Paint (FP)](https://developer.mozilla.org/docs/Glossary/First_paint) +* [First Contentful Paint (FCP)](https://web.dev/articles/fcp) +* [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) +* [DOMContentLoaded Event (DCL)](https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event) +* [Onload Event (L)](https://developer.mozilla.org/docs/Web/API/Window/load_event) + + + +Hover over a marker name at the bottom of the trace to see its timestamp. + + + +#### View custom timings + + +On the **Timings** track, view your custom performance markers such as: + +* `performance.mark()` calls. + +* `performance.measure()` calls. + + + +Select a marker to see more details in the **Summary** tab, including its timestamp, total time, self time, and the `detail` object. For `performance.mark()` and `performance.measure()` calls, the tab also shows stack traces. + + + +#### View interactions + + + +Use the **Interactions** section to find and analyze user interactions that happened during the recording: + +![The Interactions section](./reference-images/interactions-animation.png) + +A red line at the bottom of an interaction represents time spent waiting for the main thread. + +Click an interaction to view more information about it in the **Summary** tab. + + + +#### View layout shifts + + +View layout shifts on the **Layout shifts** track. Shifts are shown as purple diamonds and are grouped in clusters (purple lines) based on their proximity on the timeline. For information about clusters, see [Evolving the CLS metric](https://web.dev/blog/evolving-cls) at web.dev. + + + +To highlight an element that caused a layout shift in the viewport, hover over the corresponding diamond. + +To see more information about a layout shift or shifts in the **Summary** tab with timings, scores, elements, and potential culprits, click the corresponding diamond or cluster. + +For more information, see [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) at web.dev. + + + +#### View animations + + +View animations on the **Animations** track. Animations are named as corresponding CSS properties or elements if any, for example, `transform` or `my-element`. Non-compositing animations are marked with red triangles in the top right corner. + + + +Select an animation to see more details in the **Summary** tab, including reasons for compositing failures. + + + +#### View GPU activity + + +View GPU activity in the **GPU** section of the **Performance** tool: + +![The GPU section](./reference-images/gpu-zoomed.png) + + + +#### View raster activity + + +View raster activity in the **Thread Pool** section. + +![The Raster section](./reference-images/raster.png) + + + +#### Analyze frames per second (FPS) + + +DevTools provides two ways to analyze frames per second: + +* Use the **Frames** section to view how long a particular frame took. See [The Frames section](#the-frames-section), below. + +* Use the **FPS meter** for a realtime estimate of FPS as the page runs. See [View frames per second in realtime with the FPS meter](#view-frames-per-second-in-realtime-with-the-fps-meter), below. + + + +###### The Frames section + + +The **Frames** section tells you exactly how long a particular frame took. + +Hover over a frame to view a tooltip with more information about it: + +![Hovering on a frame](./reference-images/frames-hover.png) + +The above example shows a tooltip when you hover over a frame. + +The Frames section can show four types of frames: + +* Idle frame (white). No changes. + +* Frame (green). Rendered as expected and in time. + +* Partially presented frame (yellow with a sparse wide dash-line pattern). Microsoft Edge did its best to render at least some visual updates in time. For example, in case the work of the main thread of the renderer process (canvas animation) is late but the compositor thread (scrolling) is in time. + +* Dropped frame (red with a dense solid-line pattern). Microsoft Edge can't render the frame in reasonable time. + + + + + +Click a frame to view more information about the frame in the **Summary** tab at the bottom of the **Performance** tool. DevTools outlines the selected frame in blue: + +![Viewing a frame in the Summary tab](./reference-images/frames-summary.png) + + + +#### View network requests + + + +Expand the **Network** section to view a waterfall of network requests that occurred during the recording: + +![The Network section](./reference-images/network.png) + +Click on a request to view more information about it in the **Summary** tab: + +![More information about the photo-gallery request in the Summary tab](./reference-images/summary-network.png) + +Requests in the **Network** section are color-coded as follows: + +* Blue background: HTML request. +* Purple background: CSS request. +* Dark yellow background: JS request. +* Green background: image request. + +Requests have squares in the top-left corner: +* A darker-blue square in the top-left of a request means it's a higher-priority request. +* A lighter-blue square means lower-priority. + +For example, in the previous figure, the **photo-gallery** request, in the top left corner of the **Network** section is higher-priority. + +Requests might have lines on the left and right sides, and their bars might be split into two colors. Here's what these lines and colors represent: + +* The left line is everything up to the `Connection Start` group of events, inclusive. In other words, it's everything before `Request Sent`, exclusive. + +* The light portion of the bar is `Request Sent` and `Waiting (TTFB)` for server response. + +* The dark portion of the bar is `Content Download`. + +* The right line is essentially time spent waiting for the main thread. This isn't represented in the **Timing** tab. + + + +#### View memory metrics + + +Select the **Memory** checkbox to view memory metrics in a performance recording: + +![The Memory checkbox](./reference-images/memory-highlight.png) + +DevTools displays a **Memory** chart, above the **Summary** tab. There is also a chart below the **NET** chart, called **HEAP**. The **HEAP** chart provides the same information as the **JS Heap** line in the **Memory** chart: + +![Memory metrics](./reference-images/memory-chart.png) + +The colored lines on the chart map to the colored checkboxes above the chart. Clear a checkbox to hide that category from the chart. + +The chart only displays the region of the recording that is currently selected. For example, in the previous figure, the **Memory** chart is only showing memory usage from around the 3600 ms mark to the 6200 ms mark. + +See also: +* [Visualize memory leaks (Performance tool: Memory checkbox)](#visualize-memory-leaks-performance-tool-memory-checkbox), below. + + + +#### View the duration of a portion of a recording + + +When analyzing a section like **Network** or **Main**, sometimes you need a more precise estimate of how long certain events took. Hold **Shift**, click and hold, and drag left or right to select a portion of the recording. At the bottom of your selection, DevTools shows how long that portion took: + +![Viewing the duration of a portion of a recording](./reference-images/main-duration.png) + + + +#### View a screenshot + + +To learn how to turn on screenshots, see [Capture screenshots while recording](#capture-screenshots-while-recording), above. + +To view a screenshot of how the page looked during that moment of the recording, hover over the **Overview**. The **Overview** is the section that contains the **CPU** and **NET** charts: + +![Viewing a screenshot](./reference-images/screenshots-hover.png) + +You can also view screenshots by selecting a frame in the **Frames** section. DevTools displays a small version of the screenshot in the **Summary** tab: + +![Viewing a screenshot in the Summary tab](./reference-images/summary-preview.png) + +To zoom in on the screenshot, click the thumbnail in the **Summary** tab. + + + +#### View layers information + + +To view advanced layers information about a frame: + +1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button, and then select the **Enable advanced rendering instrumentation (slow)** checkbox. + +1. In the **Frames** section, select a frame. DevTools displays information about the layers in the **Layers** tab at the bottom of the **Performance** tool: + + ![The Layers pane](./reference-images/layers-all.png) + +The **Layers** tab works like the **Composited Layers** tab in the **3D View** tool. To learn how to interact with the **Layers** tab, see [Navigate webpage layers, z-index, and DOM using the 3D View tool](../3d-view/index.md). + + + +#### View paint profiler + + +To view advanced information about a paint event: + +1. In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button, and then select the **Enable advanced rendering instrumentation (slow)** checkbox. + +1. Select a **Paint** event in the **Main** section. DevTools displays information about the paint event in the **Paint Profiler** tab: + + ![The Paint Profiler tab](./reference-images/paint-profiler.png) + + + +#### View CSS selector statistics + + +To view statistics about the selectors of the CSS rules that got recalculated during a performance recording: + +* In the **Performance** tool, click the **Capture settings** (![Capture settings](./reference-images/capture-settings-icon.png)) button, and then select the **Enable advanced rendering instrumentation (slow)** checkbox. + + DevTools displays aggregate information about the selectors of the CSS rules that were recalculated during the recording in the **Selector Stats** tab: + + ![The Selector Stats tab](./reference-images/selector-stats.png) + +1. In the **Main** section, select a **Recalculate Style** event. In the **Selector Stats** tab, DevTools displays information about the selectors of the CSS rules that were recalculated during that event. + +See also: +* [Analyze CSS selector performance during Recalculate Style events](./selector-stats.md) + + + +#### View messages between windows, iframes, and dedicated workers + + +The DevTools experiment **Performance panel: show postMessage dispatch and handling flows** improves the **Performance** tool's **Main** section to help you quickly identify `postMessage` events and handlers, by distinguishing events that are triggered by the `postMessage` method from other events that are displayed in the **Performance** tool. This experiment helps you investigate performance issues that are related to posting messages across various threads of an application. + +Without this experiment, events that are triggered by dispatching and handling messages between threads of an application appear as generic scripting function-call events. With this experiment enabled: +* `postMessage` dispatch events appear as **Schedule postMessage**. +* `postMessage` handler events appear as **On Message**: + +!["Schedule postMessage" events and "On Message" events in the Performance tool](./reference-images/post-message-events.png) + +This experiment helps you investigate when a `postMessage` call occurred, and how long the message was queued before the `postMessage` handler starts. The dispatch events are linked to handler events by initiator arrows that appear when you click on either type of event: + +![Arrows linking dispatch events to handler events](./reference-images/post-message-events-arrows.png) + +To use this feature, in DevTools, select **Customize and control DevTools** (![the Customize and control DevTools icon](./reference-images/customize-and-control-devtools-icon.png)) > **Settings** > **Experiments**, select the checkbox **Performance panel: show postMessage dispatch and handling flows**, click the **Close** (X) button, and then click the **Reload DevTools** button. + +See also: +* [Performance recording event reference](../performance/performance-reference.md) +* [postMessage Trace Events demo (rendered)](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) +* [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) + + + +## Analyze rendering performance with the Rendering tool + + +Use the **Rendering** tool to help visualize the rendering performance of your page. The **Rendering** tool is a **Quick View** tool; if you open it from the **Command Menu**, it opens at the bottom of DevTools. + +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. 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**. + + The **Rendering** tool opens: + + ![The Rendering tool](./reference-images/rendering-tool.png) + +See also: +* [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](../rendering-tools/rendering-tool.md) + + + +#### View frames per second in realtime with the FPS meter + + +The **FPS meter** is an overlay that appears in the top-left corner of the rendered webpage. It provides a realtime estimate of FPS as the page runs. To open the **FPS meter**: + +1. Open the **Rendering** tool. See [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. + +1. Select the **Frame Rendering Stats** checkbox. The **FPS meter** overlay appears in the rendered webpage: + + ![The FPS meter](./reference-images/fps-meter.png) + + + + + +#### View painting events in realtime with Paint Flashing + + +Use Paint Flashing to get a realtime view of all paint events on the page. Whenever a part of the page gets re-painted, DevTools outlines that section in green. + +To turn on Paint Flashing: + +1. Open the **Rendering** tool. See [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. + +1. Select the **Paint Flashing** checkbox. Green outlines appear in the rendered webpage: + + ![Paint Flashing](./reference-images/paint-flashing.png) + + + + + +#### View an overlay of layers with Layer Borders + + +To view an overlay of layer borders and tiles on top of the page: + +1. Open the **Rendering** tool, as described in [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. + +1. Select the **Layer Borders** checkbox. Layer borders appear in the rendered webpage: + + ![Layer Borders](./reference-images/layer-borders.png) + +See the comments in [debug_colors.cc](https://source.chromium.org/chromium/chromium/src/+/main:cc/debug/debug_colors.cc) for an explanation of the color-codings. + + + + + +#### Find scroll performance issues in realtime + + +Use the **Scrolling Performance Issues** checkbox to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page. DevTools outlines the potentially problematic elements in teal. + +To view scroll performance issues: + +1. Open the **Rendering** tool, as described in [Analyze rendering performance with the Rendering tool](#analyze-rendering-performance-with-the-rendering-tool), above. + +1. Select the **Scrolling Performance Issues** checkbox. Potentially problematic elements are outlined: + + ![Scrolling Performance Issues indicates that non-layer viewport-constrained objects may harm scroll performance](./reference-images/scrolling-performance-issues.png) + +See also: +* [Slow scroll rects (checkbox)](../3d-view/index.md#slow-scroll-rects-checkbox) in _Navigate webpage layers, z-index, and DOM using the 3D View tool_. + + + + + + + +#### Disable local fonts + + +In the **Rendering** tool, use the **Disable local fonts** checkbox to emulate missing `local()` sources in `@font-face` rules. + +For example, when the **Rubik** font is installed on your device and the `@font-face src` rule uses it as a `local()` font, Microsoft Edge uses the local font file from your device. + +When **Disable local fonts** is selected, DevTools ignores the `local()` fonts and fetches each font from the network: + +![Emulate missing local fonts](./reference-images/disable-local-fonts.png) + +This feature is useful if you use two different copies of the same font during development, such as: +* A local font for your design tools. +* A web font for your code. + +Use **Disable local fonts** to make it easier to: +* Debug and measure loading performance and optimization of web fonts. +* Verify accuracy of your CSS `@font-face` rules. +* Discover differences between local versions installed on your device and a web font. + + + +## Visualize memory leaks (Performance tool: Memory checkbox) + + +As a starting point to investigate webpage memory usage, use the **Performance** tool's **Memory** checkbox. (Or, [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](../memory-problems/microsoft-edge-browser-task-manager.md).) + +The **Performance** tool helps you visualize the memory use of a page over time. + +1. In DevTools, open the **Performance** tool. + +1. Select the **Memory** checkbox. + +1. Make a recording, per [Record performance](#record-performance), above. + +It's a good practice to start and end your recording with a forced garbage collection. To force garbage collection, click the **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button while recording. + +To demonstrate memory recordings, consider the following code: + +```javascript +var x = []; +function grow() { + for (var i = 0; i < 10000; i++) { + document.body.appendChild(document.createElement('div')); + } + x.push(new Array(1000000).join('x')); +} +document.getElementById('grow').addEventListener('click', grow); +``` + +Every time that the button referenced in the code is clicked, 10,000 `div` nodes are appended to the document body, and a string of 1,000,000 `x` characters is pushed onto the `x` array. Running the previous code produces a recording in the **Performance** tool: + +![Simple growth](./reference-images/performance-memory.png) + +First, an explanation of the user interface. The **HEAP** graph in the **Overview** pane (below **NET**) represents the JS heap. Below the **Overview** pane is the **Counter** pane. The memory usage is broken down by JS heap (same as **HEAP** graph in the **Overview** pane), documents, DOM nodes, listeners, and GPU memory. Clear a checkbox to hide it from the graph. + +Now, an analysis of the code compared with the previous figure. If you review the node counter (the green graph), it matches up cleanly with the code. The node count increases in discrete steps. You can presume that each increase in the node count is a call to `grow()`. + +The JS heap graph (the blue graph) is not as straightforward. In keeping with best practices, the first dip is actually a forced garbage collection (click the **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button). + +As the recording progresses, the JS heap size spikes are displayed. This is natural and expected: the JavaScript code is creating the DOM nodes on every button you click, and is doing a lot of work when it creates the string of one million characters. + +The key thing here is the fact that the JS heap ends higher than it began (the "beginning" here being the point after the forced garbage collection). In the real world, if you saw this pattern of increasing JS heap size or node size, it would potentially indicate a memory leak. + +See also: +* [View memory metrics](#view-memory-metrics), above. + + + +> [!NOTE] +> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +> The original page is found [here](https://developer.chrome.com/docs/devtools/performance/reference) and is authored by Kayce Basques. + +[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/capture-settings-icon.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/capture-settings-icon.png new file mode 100644 index 0000000000..1320a7703f Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/capture-settings-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/copy-table.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/copy-table.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/copy-table.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/copy-table.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/enable-feature.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/enable-feature.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/enable-feature.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/enable-feature.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/full-recording.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/full-recording.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/full-recording.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/full-recording.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/long-running-task.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/long-running-task.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/long-running-task.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/long-running-task.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/more-tools-icon.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/more-tools-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/more-tools-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/more-tools-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/performance-tool-icon.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/performance-tool-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/performance-tool-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/performance-tool-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/record-icon.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/record-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/record-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/record-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/single-event.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/single-event.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/single-event.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/single-event.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/sort-by-elapsed-time.png b/microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/sort-by-elapsed-time.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats-images/sort-by-elapsed-time.png rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats-images/sort-by-elapsed-time.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md b/microsoft-edge/devtools-guide-chromium/performance/selector-stats.md similarity index 98% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md rename to microsoft-edge/devtools-guide-chromium/performance/selector-stats.md index b2cc1811fe..277e973b69 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/selector-stats.md +++ b/microsoft-edge/devtools-guide-chromium/performance/selector-stats.md @@ -154,6 +154,6 @@ Try to change your CSS selectors so they require less time to calculate, and mat ## See also * [View CSS selector costs in the Performance tool sidebar](../whats-new/2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's New in DevTools (Microsoft Edge 131)_. -* [Introduction to the Performance tool](./index.md) - An introduction to analyzing runtime performance in DevTools. +* [Analyze runtime performance (tutorial)](./index.md) - An introduction to analyzing runtime performance in DevTools. * [Performance features reference](./reference.md) - Covers many of the features in the **Performance** tool. * [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/) - Windows blog post. diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/evaluate-performance-performance-record-highlight.png b/microsoft-edge/devtools-guide-chromium/performance/unminify-images/evaluate-performance-performance-record-highlight.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/evaluate-performance-performance-record-highlight.png rename to microsoft-edge/devtools-guide-chromium/performance/unminify-images/evaluate-performance-performance-record-highlight.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/evaluate-performance-performance-refreshed-disable-javascript-samples-checkbox-off-load-profile.png b/microsoft-edge/devtools-guide-chromium/performance/unminify-images/evaluate-performance-performance-refreshed-disable-javascript-samples-checkbox-off-load-profile.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/evaluate-performance-performance-refreshed-disable-javascript-samples-checkbox-off-load-profile.png rename to microsoft-edge/devtools-guide-chromium/performance/unminify-images/evaluate-performance-performance-refreshed-disable-javascript-samples-checkbox-off-load-profile.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/load-profile-icon.png b/microsoft-edge/devtools-guide-chromium/performance/unminify-images/load-profile-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/load-profile-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/unminify-images/load-profile-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/minified-perf-profile.png b/microsoft-edge/devtools-guide-chromium/performance/unminify-images/minified-perf-profile.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/minified-perf-profile.png rename to microsoft-edge/devtools-guide-chromium/performance/unminify-images/minified-perf-profile.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/perf-profile-unminify-button.png b/microsoft-edge/devtools-guide-chromium/performance/unminify-images/perf-profile-unminify-button.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/perf-profile-unminify-button.png rename to microsoft-edge/devtools-guide-chromium/performance/unminify-images/perf-profile-unminify-button.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/unminified-perf-profile.png b/microsoft-edge/devtools-guide-chromium/performance/unminify-images/unminified-perf-profile.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/unminified-perf-profile.png rename to microsoft-edge/devtools-guide-chromium/performance/unminify-images/unminified-perf-profile.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/unminify-icon.png b/microsoft-edge/devtools-guide-chromium/performance/unminify-images/unminify-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify-images/unminify-icon.png rename to microsoft-edge/devtools-guide-chromium/performance/unminify-images/unminify-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify.md b/microsoft-edge/devtools-guide-chromium/performance/unminify.md similarity index 90% rename from microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify.md rename to microsoft-edge/devtools-guide-chromium/performance/unminify.md index 3dd7715b4b..ccc1a64e4c 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/unminify.md +++ b/microsoft-edge/devtools-guide-chromium/performance/unminify.md @@ -37,15 +37,15 @@ To unminify a performance profile, so that some more meaningful function names a ## Step 1 - Set up source maps -Host your source maps side-by-side with your production code. When unminifying, the **Performance** tool expects to find your source maps along with your production code. +Host your source maps side-by-side with your production code. When unminifying, the **Performance** tool expects to find your source maps along with your production code. -For details, see [Map the processed code to your original source code, for debugging](/microsoft-edge/devtools-guide-chromium/javascript/source-maps). +For details, see [Map the processed code to your original source code, for debugging](../javascript/source-maps.md). ## Step 2 - Record a performance profile -1. In the **Performance** tool, click the **Record** button, to record a performance profile for the page you want to analyze. For details, see [Record runtime performance](/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference). +1. In the **Performance** tool, click the **Record** button, to record a performance profile for the page you want to analyze. For details, see [Record runtime performance](../performance/reference.md#record-runtime-performance) in _Performance features reference_. ![Recording a performance profile](./unminify-images/evaluate-performance-performance-record-highlight.png) @@ -79,8 +79,7 @@ For details, see [Map the processed code to your original source code, for debug ![Load Profile](./unminify-images/evaluate-performance-performance-refreshed-disable-javascript-samples-checkbox-off-load-profile.png) -1. In the **Open** dialog, select the unminified performance profile `.json` file that you just downloaded. If needed, for details, see [Load a recording](/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#load-a-recording) in _Performance features reference_, and then continue below. - +1. In the **Open** dialog, select the unminified performance profile `.json` file that you just downloaded. If needed, for details, see [Load a recording](../performance/reference.md#load-a-recording) in _Performance features reference_, and then continue below. Some function names are now unminified. The unminified flame chart in the **Performance** tool now shows those functions labeled with more meaningful names taken from your source maps, such as **useObserver (d)**, **useQueuedForceUpdateBlock (o)**, **trackDerivedFunction (an)**, **initializeIconColorMap (c)**, **getExtraToolControls (co)**, and **isToggleEnabled (a)**. @@ -90,5 +89,5 @@ For details, see [Map the processed code to your original source code, for debug ## See also -* [Introduction to the Performance tool](index.md) - An introduction to analyzing runtime performance in DevTools. +* [Analyze runtime performance (tutorial)](index.md) - An introduction to analyzing runtime performance in DevTools. * [Performance features reference](reference.md), - A reference for many of the features offered in the Performance tool. diff --git a/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md b/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md index bbb93f8683..1586399239 100644 --- a/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md +++ b/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md @@ -10,7 +10,7 @@ ms.date: 03/25/2021 --- # Remotely debug Surface Duo emulators -In this article, you walk through the process of remotely debugging your web content in the [Microsoft Edge app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) on a [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) emulator from a desktop instance of [Microsoft Edge](https://www.microsoft.com/edge). For information on debugging on a Surface Duo device, follow our guide for [remote debugging Android devices](index.md). +In this article, you walk through the process of remotely debugging your web content in the [Microsoft Edge app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) on a Surface Duo emulator from a desktop instance of [Microsoft Edge](https://www.microsoft.com/edge). For information on debugging on a Surface Duo device, follow our guide for [remote debugging Android devices](index.md). diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md b/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md index 2e0bb4cc63..056d1bd6d4 100644 --- a/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md +++ b/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md @@ -23,7 +23,7 @@ ms.date: 2/22/2023 limitations under the License. --> # Troubleshooting common performance issues - + Users expect interactive and smooth pages. Each stage in the pixel pipeline represents an opportunity to introduce jank (interruptions of rendering). Learn about tools and strategies to identify and fix common problems that slow down runtime performance. @@ -179,7 +179,7 @@ To find out how long painting takes, or how often painting occurs: 1. Take a recording. -If most of your rendering time is spent painting, you have paint problems. For more information, see [Turn on advanced rendering instrumentation](../evaluate-performance/reference.md#turn-on-advanced-rendering-instrumentation) in _Performance features reference_. +If most of your rendering time is spent painting, you have paint problems. For more information, see [Enable advanced paint instrumentation](../performance/reference.md#enable-advanced-paint-instrumentation) in _Performance features reference_. diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/rendering-tool.md b/microsoft-edge/devtools-guide-chromium/rendering-tools/rendering-tool.md index 0071c97c41..bed5129423 100644 --- a/microsoft-edge/devtools-guide-chromium/rendering-tools/rendering-tool.md +++ b/microsoft-edge/devtools-guide-chromium/rendering-tools/rendering-tool.md @@ -22,4 +22,4 @@ The **Rendering** tool is used for tasks such as the following: * [Emulate vision deficiencies](../accessibility/emulate-vision-deficiencies.md) * [Emulate dark or light schemes in the rendered page](../accessibility/preferred-color-scheme-simulation.md) * [Simulate reduced motion](../accessibility/reduced-motion-simulation.md) -* Analyze rendering performance - see [Analyze rendering performance with the Rendering tool](../evaluate-performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_. +* Analyze rendering performance - see [Analyze rendering performance with the Rendering tool](../performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_. diff --git a/microsoft-edge/devtools-guide-chromium/resources/index.md b/microsoft-edge/devtools-guide-chromium/resources/index.md index 764df8b33e..ace0c73f75 100644 --- a/microsoft-edge/devtools-guide-chromium/resources/index.md +++ b/microsoft-edge/devtools-guide-chromium/resources/index.md @@ -48,7 +48,7 @@ When you know the name of a webpage's resource file that you want to inspect, th 1. To open DevTools, right-click the webpage, and then select **Inspect**. Or press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). -1. When DevTools has focus, press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS). Or, click the **Customize and control DevTools** (![Customize icon](./index-images/customize-devtools-icon-light-theme.png)) button in DevTools and then select **Open file**. The Command Menu opens, displaying the **Open File** list: +1. When DevTools has focus, press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS). Or, click the **Customize and control DevTools** (![Customize icon](./index-images/customize-devtools-icon-light-theme.png)) button in DevTools and then select **Open file**. The **Command Menu** opens, displaying the **Open File** list: ![The Command Menu, displaying the Open File list](./index-images/command-menu-empty.png) diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md index 42e7bbdc06..72f021f684 100644 --- a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md +++ b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md @@ -51,10 +51,11 @@ last sync'd April 16, 2024 | Inspect tool | Used for [Analyze pages using the Inspect tool](../css/inspect.md). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect Demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | | Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](../javascript/index.md). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Demo: Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) | | Memory heap snapshot | Used for [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a | -| Performance Activity Tabs | Used for [View activities in a table](../evaluate-performance/reference.md#view-activities-in-a-table), about the **Performance** tool's **Bottom-Up**, **Call Tree**, and **Event Log** tabs. | [/devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) | -| Sluggish Animation | Used for [Introduction to the Performance tool](../evaluate-performance/index.md). | [/devtools-performance-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) | -| postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](../evaluate-performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | +| Performance Activity Tabs | Used for [View activities in a table](../performance/reference.md#view-activities-in-a-table), about the **Performance** tool's **Bottom-up**, **Call tree**, and **Event log** tabs. | [/devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) | +| Sluggish Animation | Used for [Analyze runtime performance (tutorial)](../performance/index.md). | [/devtools-performance-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) | +| postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](../performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | | CSS :target pseudo-class | Used for [Support forcing the :target CSS state](../whats-new/2021/01/devtools.md#support-forcing-the-target-css-state). | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | +| Exploring the universe | Webpage used to demo the [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) section in the _Performance tool: Analyze your website's performance_ article. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe webpage](https://microsoftedge.github.io/Demos/exploring-the-universe/) | | Heap Snapshot Visualizer | Source code for the [Heap Snapshot Visualizer](https://microsoftedge.microsoft.com/addons/detail/heap-snapshot-visualizer/fceldlhognbemkgfacnffkdanocidgce) extension for DevTools. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | | JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](../../web-platform/json-viewer.md). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) | | Inspect Network Activity | Used for [Inspect network activity](../network/index.md). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity Demo](https://microsoftedge.github.io/Demos/network-tutorial/) | diff --git a/microsoft-edge/devtools-guide-chromium/sources/index.md b/microsoft-edge/devtools-guide-chromium/sources/index.md index f8ffd44d25..1442c77e99 100644 --- a/microsoft-edge/devtools-guide-chromium/sources/index.md +++ b/microsoft-edge/devtools-guide-chromium/sources/index.md @@ -222,16 +222,16 @@ See also: #### Using the Command Menu to open files -To open a file, in addition to using the **Navigator** pane within the **Sources** tool, you can use the Command Menu from anywhere within DevTools. +To open a file, in addition to using the **Navigator** pane within the **Sources** tool, you can use the **Command Menu** from anywhere within DevTools. -* From anywhere in DevTools, press **Ctrl+P** on Windows/Linux or **Command+P** on macOS. The Command Menu appears, and lists all the resources that are in the tabs of the **Navigator** pane of the **Sources** tool. +* From anywhere in DevTools, press **Ctrl+P** on Windows/Linux or **Command+P** on macOS. The **Command Menu** appears, and lists all the resources that are in the tabs of the **Navigator** pane of the **Sources** tool. * Or, next to the tabs of the **Navigator** pane in the **Sources** tool, select the **...** (**More options**) button, and then select **Open File**. To display and pick from a list of all .js files, type **.js**. ![Opening a file by using the Command Menu](./index-images/sources-command-menu-to-open-file.png) -If you type **?**, the Command Menu shows several commands, including **... Open file**. If you press **Backspace** to clear the Command Menu, a list of files is shown. +If you type **?**, the **Command Menu** shows several commands, including **... Open file**. If you press **Backspace** to clear the **Command Menu**, a list of files is shown. For more information, see [Run commands with the Microsoft Edge DevTools Command Menu](../command-menu/index.md). @@ -411,15 +411,15 @@ See also: #### Going to a line number or function -To go to a line number or symbol (such as a function name) in the file which is open in the Editor pane, you can use the Command Menu, rather than scrolling through the file. +To go to a line number or symbol (such as a function name) in the file which is open in the Editor pane, you can use the **Command Menu**, rather than scrolling through the file. -1. In the **Navigator** pane, select the ellipses (...) (**More options**), and then select **Open File**. The Command Menu appears. +1. In the **Navigator** pane, select the ellipses (...) (**More options**), and then select **Open File**. The **Command Menu** appears. 1. Type one of the following characters: | Character | Command name | Purpose | |---|---|---| | \: | **Go to line** | Go to a line number. | -| \@ | **Go to symbol** | Go to a function. When you type **@**, the Command Menu lists the functions that are found in the JavaScript file which is open in the Editor pane. | +| \@ | **Go to symbol** | Go to a function. When you type **@**, the **Command Menu** lists the functions that are found in the JavaScript file which is open in the Editor pane. | For more information, see [Run commands with the Microsoft Edge DevTools Command Menu](../command-menu/index.md). @@ -433,7 +433,7 @@ To use the **Quick source** tool: 1. Select a tool other than the **Sources** tool, such as the **Elements** tool. -1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). The Command Menu opens. +1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). The **Command Menu** opens. 1. Type **quick**, and then select **Show Quick source**. diff --git a/microsoft-edge/devtools-guide-chromium/speed/get-started.md b/microsoft-edge/devtools-guide-chromium/speed/get-started.md index 81ed801e4e..19a8a74141 100644 --- a/microsoft-edge/devtools-guide-chromium/speed/get-started.md +++ b/microsoft-edge/devtools-guide-chromium/speed/get-started.md @@ -252,7 +252,7 @@ The reported JavaScript files are from the `www.bing.com` domain, which means th To confirm the amount of unused code and possibly find other resources that are unused, use the **Coverage** tool: -1. In DevTools, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the Command Menu, start typing `Coverage`, and then select **Show Coverage** in the list. +1. In DevTools, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**, start typing `Coverage`, and then select **Show Coverage** in the list. ![The Command Menu in DevTools, showing the Show Coverage command](./get-started-images/command-menu-coverage.png) @@ -492,7 +492,7 @@ Optimize the `initRatings` function to make the page load faster: * The **Time to interactive** metric went down to 1.3 seconds. * The **Total Blocking Time** metric went down to 0 seconds. -To learn more about how to analyze page performance, see [Performance features reference)](../evaluate-performance/reference.md). +To learn more about how to analyze page performance, see [Performance features reference)](../performance/reference.md). ###### Doing less work in the main thread, in the real world diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md index 0e4e6bbb23..6164fff73b 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md @@ -118,7 +118,7 @@ Use the **3D View** to debug your web application by navigating through the [Doc ![The 3D View in the DevTools](./devtools-images/3dview.png) -To open the **3D View** tool, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the Command Menu, start typing `3d view`, and then select **Show 3D View**. +To open the **3D View** tool, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**, start typing `3d view`, and then select **Show 3D View**. The Microsoft Edge team is working with the Chromium team on the UI and adding more functionality to the 3D View, so please use the **Send Feedback** icon! diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md index 3d2b5e50c7..a022695a4e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md @@ -153,7 +153,7 @@ Chromium issue [#1003700](https://crbug.com/1003700) See also: * [Emulate vision deficiencies](../../../accessibility/emulate-vision-deficiencies.md) -* [Analyze rendering performance with the Rendering tool](../../../evaluate-performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_ +* [Analyze rendering performance with the Rendering tool](../../../performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_ * [Types of Colour Blindness](http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness), at Colourblindawareness.org. @@ -231,7 +231,7 @@ To discover more keywords like `cookie-path`, see [Filter requests by properties #### Dock to left from the Command Menu -To move DevTools to the left of the viewport (rendered webpage), open the [Command Menu](../../../command-menu/index.md) and run the `Dock to left` command. The **Dock to left** feature has been available since Microsoft Edge 75, but it was previously only accessible from the main menu. You can now access the **Dock to left** feature from the Command Menu, as well. +To move DevTools to the left of the viewport (rendered webpage), open the [Command Menu](../../../command-menu/index.md) and run the `Dock to left` command. The **Dock to left** feature has been available since Microsoft Edge 75, but it was previously only accessible from the main menu. You can now access the **Dock to left** feature from the **Command Menu**, as well. ![DevTools docked to the left of the viewport](./devtools-images/dock-to-left.png)" @@ -276,7 +276,7 @@ See also: A **Long Task** is JavaScript code that monopolizes the main thread for a long time, causing a web page to freeze. -You've been able to [visualize Long Tasks in the Performance panel](../../../evaluate-performance/reference.md#view-main-thread-activity) for a while now, but in Microsoft Edge 83 the Long Task visualization UI in the **Performance** panel has been updated. The Long Task portion of a task is now colored with a striped red background: +You've been able to [visualize Long Tasks in the Performance panel](../../../performance/reference.md#view-main-thread-activity) for a while now, but in Microsoft Edge 83 the Long Task visualization UI in the **Performance** tool has been updated. The Long Task portion of a task is now colored with a striped red background: ![The new Long Task UI](./devtools-images/long-task.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md index f9082a5638..11275549cf 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md @@ -172,13 +172,13 @@ See also: #### Performance panel updates See also: -* [Performance features reference](../../../evaluate-performance/reference.md) +* [Performance features reference](../../../performance/reference.md) ###### View Total Blocking Time information in the footer -After recording your load performance, the **Performance** panel now shows Total Blocking Time (TBT) information in the footer. TBT is a load performance metric that helps quantify how long a page takes to become usable. TBT essentially measures how long a page only _appears_ to be usable (because the content is rendered to the screen); but the page isn't actually usable, because JavaScript is blocking the main thread and therefore the page doesn't respond to user input. TBT is the main metric for approximating First Input Delay. +After recording your load performance, the **Performance** tool now shows Total Blocking Time (TBT) information in the footer. TBT is a load performance metric that helps quantify how long a page takes to become usable. TBT essentially measures how long a page only _appears_ to be usable (because the content is rendered to the screen); but the page isn't actually usable, because JavaScript is blocking the main thread and therefore the page doesn't respond to user input. TBT is the main metric for approximating First Input Delay. @@ -195,13 +195,13 @@ If `Total Blocking Time: Unavailable` is displayed, Microsoft Edge DevTools did Chromium issue [#1054381](https://crbug.com/1054381) See also: -* [Performance features reference](../../../evaluate-performance/reference.md) +* [Performance features reference](../../../performance/reference.md) ###### Layout Shift events in the new Experience section -The new **Experience** section of the **Performance** panel helps you detect layout shifts. Cumulative Layout Shift (CLS) is a metric that helps you quantify unwanted visual instability. +The new **Experience** section of the **Performance** tool helps you detect layout shifts. Cumulative Layout Shift (CLS) is a metric that helps you quantify unwanted visual instability. @@ -211,7 +211,7 @@ Click the **Layout Shift** event to display the details of the layout shift in t ![The details of a layout shift](./devtools-images/cls.png) See also: -* [Performance features reference](../../../evaluate-performance/reference.md) +* [Performance features reference](../../../performance/reference.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md index 008a830b03..46e3321f36 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md @@ -172,7 +172,7 @@ See also: ###### First Meaningful Paint deprecation -First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. FMP has also been removed from the **Performance** panel. **Largest Contentful Paint** is the recommended replacement for FMP. +First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. FMP has also been removed from the **Performance** tool. **Largest Contentful Paint** is the recommended replacement for FMP. @@ -242,7 +242,7 @@ See also: Chromium issue [#1071432](https://crbug.com/1071432) See also: -* [Inspect a JavaScript ArrayBuffer with the Memory Inspector tool](../../../memory-inspector/memory-inspector-tool.md) +* [Inspect a JavaScript ArrayBuffer with the Memory inspector tool](../../../memory-inspector/memory-inspector-tool.md) @@ -304,13 +304,13 @@ See also: Chromium issue [#912581](https://crbug.com/912581) See also: -* [Performance features reference](../../../evaluate-performance/reference.md) +* [Performance features reference](../../../performance/reference.md) ###### Navigation timing alignment in the Performance panel -Previously, the **Performance** panel showed times in the rulers based on when the recording started. The timing has now changed for recordings where the user navigates. DevTools now shows ruler times relative to the navigation, instead of when the recording started. +Previously, the **Performance** tool showed times in the rulers based on when the recording started. The timing has now changed for recordings where the user navigates. DevTools now shows ruler times relative to the navigation, instead of when the recording started. ![Align navigation timing in Performance tool](./devtools-images/nav-timing.png) @@ -319,7 +319,7 @@ The times for `DOMContentLoaded`, First Paint, First Contentful Paint, and Large Chromium issue [#974550](https://crbug.com/974550) See also: -* [Performance features reference](../../../evaluate-performance/reference.md) +* [Performance features reference](../../../performance/reference.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md index 5f8c73b6d1..d6b22e64b9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md @@ -47,7 +47,7 @@ Chromium issue [#174309](https://crbug.com/174309) #### Emulate Surface Duo and Samsung Galaxy Fold -You can now test the look and feel of your website or app on two new devices: [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) and [Samsung Galaxy Fold](https://www.samsung.com/us/mobile/galaxy-fold) in Microsoft Edge. +You can now test the look and feel of your website or app on two new devices: Surface Duo and [Samsung Galaxy Fold](https://www.samsung.com/us/mobile/galaxy-fold) in Microsoft Edge. To help enhance your website or app for the dual-screen and foldable devices, use the following features when [emulating the device](../../../device-mode/index.md): @@ -233,7 +233,7 @@ For more information, see [Filter issues by origin](../../../issues/index.md#fil #### Emulate missing local fonts - + In the **Rendering** tool, use the new **Disable local fonts** checkbox to emulate missing `local()` sources in `@font-face` rules. @@ -254,9 +254,9 @@ Use **Disable local fonts** to make it easier to: Chromium issue: [#384968](https://crbug.com/384968) -For more information, see [Disable local fonts](../../../evaluate-performance/reference.md#disable-local-fonts) in _Performance features reference_. - -See also [Analyze rendering performance with the Rendering tool](../../../evaluate-performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_. +See also: +* [Analyze rendering performance with the Rendering tool](../../../performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_. + * [Disable local fonts](../../../performance/reference.md#disable-local-fonts) in _Performance features reference_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md index 3702061437..e46000da35 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md @@ -236,7 +236,7 @@ See also: #### performance.mark() events in the Timings section -The **Timings section** of a recording in the [Performance](../../../evaluate-performance/reference.md) tool now marks `performance.mark()` events. To try this feature and measure the performance of your JavaScript code, add `performance.mark()` events to your code. +The **Timings section** of a recording in the [Performance](../../../performance/reference.md) tool now marks `performance.mark()` events. To try this feature and measure the performance of your JavaScript code, add `performance.mark()` events to your code. The following code adds `start` and `end` performance markers before and after a `for` loop: @@ -248,7 +248,7 @@ for (var i = 0; i < 1000; i+=7;){ performance.mark('end'); ``` -Then, open the [Performance](../../../evaluate-performance/reference.md) tool and see the **Timings section** to record your JavaScript code. The `performance.mark()` events you added are now displayed in the recording. +Then, open the [Performance](../../../performance/reference.md) tool and see the **Timings section** to record your JavaScript code. The `performance.mark()` events you added are now displayed in the recording. ![performance.mark events](./devtools-images/perf-mark.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/01/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/01/devtools.md index e05e77e14b..5708b5e033 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/01/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/01/devtools.md @@ -193,7 +193,7 @@ See also: Test the appearance of your website or app on the following devices in Microsoft Edge. -* [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) +* Surface Duo * [Samsung Galaxy Fold](https://www.samsung.com/us/mobile/galaxy-fold) To access the new CSS media screen-spanning feature and the `getWindowSegments` (now `visualViewport.segments`) JavaScript API, go to `edge://flags` and toggle the flag next to **Experimental Web Platform features**: @@ -488,7 +488,7 @@ When you analyze load performance in the Performance tool, the **Frames** sectio For the history of this feature in the Chromium open-source project, see Issue [1075865](https://crbug.com/1075865). See also: -* [Record load performance](../../../evaluate-performance/reference.md#record-load-performance) in _Performance features reference_ +* [Record load performance](../../../performance/reference.md#record-load-performance) in _Performance features reference_ ###### New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md index fd180a71f8..ab3951cbe1 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md @@ -231,14 +231,14 @@ See also: -#### New Memory Inspector tool +#### New Memory inspector tool -Use the new **Memory Inspector** tool to inspect an `ArrayBuffer` in JavaScript and Wasm memory: +Use the new **Memory inspector** tool to inspect an `ArrayBuffer` in JavaScript and Wasm memory: -![The Memory Inspector tool](./devtools-images/sources-memory-write-wasm-breakpoint-scope-reveal-in-memory-inspector-panel.png) +![The Memory inspector tool](./devtools-images/sources-memory-write-wasm-breakpoint-scope-reveal-in-memory-inspector-panel.png) See: -* [Inspect a JavaScript ArrayBuffer with the Memory Inspector tool](../../../memory-inspector/memory-inspector-tool.md) +* [Inspect a JavaScript ArrayBuffer with the Memory inspector tool](../../../memory-inspector/memory-inspector-tool.md) * [Using the Debugger pane to debug JavaScript code](../../../sources/index.md#using-the-debugger-pane-to-debug-javascript-code) For the history of this feature in the Chromium open-source project, see Issue [1166577](https://crbug.com/1166577). diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md index 418410d4f7..5f1e61cd6b 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md @@ -47,7 +47,7 @@ The **More Tools** menu was available as an experiment in Microsoft Edge version ![The More Tools menu](./devtools-images/more-tools-menu.png) See also: -* [The More Tools menus](../../../about-tools.md#the-more-tools-menus) in _About the list of tools_ +* [More tools](../../../about-tools.md#more-tools) in _About the list of tools_ @@ -80,7 +80,7 @@ These improvements are especially relevant for users of localized DevTools, in w It's now easier to re-add a tool that you closed: a [More Tools menu](#add-tools-quickly-with-the-new-more-tools-button) has been added to the main toolbar and the **Drawer** (now **Quick View**) toolbar. See also: -* [About the list of tools](../../../about-tools.md#the-more-tools-menus) +* [About the list of tools](../../../about-tools.md) @@ -276,7 +276,7 @@ In the **Performance** tool, DevTools now displays **Compute Intersections** in See also: * [Trust is good, observation is better: Intersection Observer v2](https://web.dev/intersectionobserver-v2) -* [Analyze a performance recording](../../../evaluate-performance/reference.md#analyze-a-performance-recording) +* [Analyze a performance recording](../../../performance/reference.md#analyze-a-performance-recording) For the history of this feature in the Chromium open-source project, see Issue [1199137](https://crbug.com/1199137). diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md index dce9c0cafd..b047a25aa9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md @@ -1,6 +1,6 @@ --- title: What's New in DevTools (Microsoft Edge 98) -description: 2021 year-in-review blog post. Automate IE mode with Internet Explorer Driver. Emulate forced-colors mode. Tooltips for Activity icons in the Performance tool Event Log. Shallow sizes in the Memory tool now shown as decimal values. Network tool's Search text box can now be resized. And more. +description: 2021 year-in-review blog post. Automate IE mode with Internet Explorer Driver. Emulate forced-colors mode. Tooltips for Activity icons in the Performance tool Event log. Shallow sizes in the Memory tool now shown as decimal values. Network tool's Search text box can now be resized. And more. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -72,17 +72,17 @@ See also: -## Activity icons in the Event Log of the Performance tool now have tooltips +## Activity icons in the Event log of the Performance tool now have tooltips - - + + -In previous versions of Microsoft Edge, the **Event Log** tab in the **Performance** tool displays color-coded icons representing the type of activity for each event. However, the Event Log doesn't display information about what type of activity is represented by each color. In Microsoft Edge 98, tooltips have been added to the activity events in the **Event Log** tab, indicating **Scripting**, **Rendering**, **Painting**, **System**, and **Idle time**, for each event. +In previous versions of Microsoft Edge, the **Event log** tab in the **Performance** tool displays color-coded icons representing the type of activity for each event. However, the Event log doesn't display information about what type of activity is represented by each color. In Microsoft Edge 98, tooltips have been added to the activity events in the **Event log** tab, indicating **Scripting**, **Rendering**, **Painting**, **System**, and **Idle time**, for each event. -![In the Event Log, the selected Activity event has a green box that represents a Painting event, and now a tooltip explicitly says "Painting"](./devtools-images/activity-event-tooltip.png) +![In the Event log, the selected Activity event has a green box that represents a Painting event, and now a tooltip explicitly says "Painting"](./devtools-images/activity-event-tooltip.png) See also: -* [Record runtime performance](../../../evaluate-performance/reference.md#record-runtime-performance) +* [Record runtime performance](../../../performance/reference.md#record-runtime-performance) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md index 704f0d4cb5..88a9593a45 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md @@ -120,7 +120,7 @@ After clicking **Unminify** (![Unminify icon](./devtools-images/unminify-icon.pn See also: * [Unminifying function names in DevTools performance profiles](https://blogs.windows.com/msedgedev/2022/02/03/unminifying-function-names-in-devtools-performance-profiles/) at the Microsoft Edge Blog. -* [Display original function names in performance profiles](../../../evaluate-performance/unminify.md). +* [Display original function names in performance profiles](../../../performance/unminify.md). diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md index 3581b0a03d..1aed5fd745 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md @@ -99,7 +99,7 @@ When you refresh the webpage, the **Source Maps Monitor** tool shows that the ca ![Source Maps Monitor tool, upon second load](./devtools-106-images/source-maps-indexeddb-second-load.png) -To clear the IndexedDB cache and force DevTools to re-load sourcemaps, run the **Clear source maps cache** command in the Command Menu. See [Run commands in the Command Menu](../../../command-menu/index.md). +To clear the IndexedDB cache and force DevTools to re-load sourcemaps, run the **Clear source maps cache** command in the **Command Menu**. See [Run commands in the Command Menu](../../../command-menu/index.md). For history, see [Issue 89](https://github.com/MicrosoftEdge/DevTools/issues/89). diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md index 4887d7d7e3..96f544aa5a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md @@ -91,7 +91,7 @@ The **Selector Stats** tab provides a list of all the CSS selectors that were ca See also: * [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/) - blog post * [[Feedback] Selector Performance Tracing Explainer · Issue #98](https://github.com/MicrosoftEdge/DevTools/issues/98) -* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) @@ -152,7 +152,7 @@ The state of your **Quick View** toolbar persists across DevTools sessions. The -There was an accessibility issue where voice-command users couldn't navigate to the **Styles** tab or **Computed** tab in the **Elements** tool. You can now access these tabs through two new commands in the Command Menu: +There was an accessibility issue where voice-command users couldn't navigate to the **Styles** tab or **Computed** tab in the **Elements** tool. You can now access these tabs through two new commands in the **Command Menu**: * **Show Styles** * **Show Computed Styles** diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md index 095c85ef75..42251deb90 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md @@ -88,7 +88,7 @@ Now in Microsoft Edge 111, the **Performance** tool automatically unminifies fun See also: * [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../../../javascript/publish-source-maps-to-azure.md) * [Securely debug original code by using Azure Artifacts symbol server source maps](../../../javascript/consume-source-maps-from-azure.md) -* [Record performance](../../../evaluate-performance/reference.md#record-performance) in _Performance features reference_. +* [Record performance](../../../performance/reference.md#record-performance) in _Performance features reference_. @@ -126,7 +126,7 @@ To export the **Selector Stats** table: ![Selecting the entire Selector Stats table for copy-paste](./devtools-111-images/export-selector-stats-table.png) See also: -* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md index 4a30f3b7c0..992d607ba9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md @@ -47,7 +47,7 @@ See also: * [Performance tool unminifies file and function names when profiling production code](../03/devtools-111.md#performance-tool-unminifies-file-and-function-names-when-profiling-production-code) in _What's New in DevTools (Microsoft Edge 111)_. * [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../../../javascript/publish-source-maps-to-azure.md) * [Securely debug original code by using Azure Artifacts symbol server source maps](../../../javascript/consume-source-maps-from-azure.md) -* [Record performance](../../../evaluate-performance/reference.md#record-performance) in _Performance features reference_. +* [Record performance](../../../performance/reference.md#record-performance) in _Performance features reference_. @@ -71,7 +71,7 @@ To analyze individual CSS selector performance and analyze the impact of your ch See also: * [Optimize CSS styles with the CSS overview tool](../../../css/css-overview-tool.md) -* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md index fe2b5b698b..c51898e931 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md @@ -42,7 +42,7 @@ Also, a new **Style Sheet** column has been added to the **Selector Stats** tab. Thank you for using the **Selector Stats** feature and sharing your feedback with us in [GitHub Issue #98: \[Feedback\] Selector Performance Tracing Explainer](https://github.com/MicrosoftEdge/DevTools/issues/98)! See also: -* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) * [GitHub Issue #98: \[Feedback\] Selector Performance Tracing Explainer](https://github.com/MicrosoftEdge/DevTools/issues/98) * [Debug long-running Recalculate Style events with new selector stats](../01/devtools-109.md#debug-long-running-recalculate-style-events-with-new-selector-stats) in _What's New in DevTools (Microsoft Edge 109)_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md index f205561840..b8263ba6f5 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md @@ -94,13 +94,13 @@ In Microsoft Edge 115, the DevTools UI has gotten a makeover with new icons and ![The right-pointing blue arrow icon for the current frame in the call stack](./devtools-115-images/icon-update-sources.png) -In previous versions of Microsoft Edge, in the **Bottom-Up** view in the **Performance** tool, the triangle buttons for collapsing and expanding the recorded activities rendered incorrectly. In Microsoft Edge 115, this issue has been fixed and you can now expand and collapse individual activities to see which functions are calling them: +In previous versions of Microsoft Edge, in the **Bottom-up** view in the **Performance** tool, the triangle buttons for collapsing and expanding the recorded activities rendered incorrectly. In Microsoft Edge 115, this issue has been fixed and you can now expand and collapse individual activities to see which functions are calling them: -![The triangle icons for expanding and collapsing activities in the Bottom-Up view](./devtools-115-images/icon-update-performance.png) +![The triangle icons for expanding and collapsing activities in the Bottom-up view](./devtools-115-images/icon-update-performance.png) See also: * [Step through code](../../../javascript/reference.md#step-through-code) in _JavaScript debugging features_. -* [The Bottom-Up tab](../../../evaluate-performance/reference.md#the-bottom-up-tab) in _Performance features reference_. +* [The Bottom-up tab](../../../performance/reference.md#the-bottom-up-tab) in _Performance features reference_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md index 08904ea18e..1a02c14434 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md @@ -1,6 +1,6 @@ --- title: What's New in DevTools (Microsoft Edge 121) -description: "Z-index and DOM tabs in 3D View tool working correctly. Correct Hide debugger or Show debugger icon in Sources tool. Source map support in Coverage tool. Advanced filtering in Bottom-Up, Call Tree, and Event Log tabs in Performance tool. Window Controls Overlay section for PWAs, in Application tool's Manifest section. And more." +description: "Z-index and DOM tabs in 3D View tool working correctly. Correct Hide debugger or Show debugger icon in Sources tool. Source map support in Coverage tool. Advanced filtering in Bottom-up, Call tree, and Event log tabs in Performance tool. Window Controls Overlay section for PWAs, in Application tool's Manifest section. And more." author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -67,21 +67,21 @@ See also: -## Advanced filtering capabilities in the Bottom-Up, Call Tree, and Event Log tabs in the Performance tool +## Advanced filtering capabilities in the Bottom-up, Call tree, and Event log tabs in the Performance tool - + -In the **Performance** tool, the following advanced filtering buttons were added to the **Bottom-Up**, **Call Tree**, and **Event Log** tabs: +In the **Performance** tool, the following advanced filtering buttons were added to the **Bottom-up**, **Call tree**, and **Event log** tabs: * **Match Case**. * **Use Regular Expression**. * **Match whole word**. -![The 'Match Case', 'Use Regular Expression', and 'Match whole word' buttons in the Performance tool's Bottom-Up, Call Tree, and Event Log tabs](./devtools-121-images/advanced-filters.png) +![The 'Match Case', 'Use Regular Expression', and 'Match whole word' buttons in the Performance tool's Bottom-up, Call tree, and Event log tabs](./devtools-121-images/advanced-filters.png) -Also, in the **Bottom-Up** tab, the filter has been updated to now only apply to the top-level items, instead of matching every node. +Also, in the **Bottom-up** tab, the filter has been updated to now only apply to the top-level items, instead of matching every node. See also: -* [Introduction to the Performance tool](../../../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../../../performance/index.md) @@ -112,7 +112,7 @@ Microsoft Edge 121 also includes the following updates from the Chromium project * [Improved source map support](https://developer.chrome.com/blog/new-in-devtools-121#variables) * [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-121#perf) * [Enhanced Interactions track](https://developer.chrome.com/blog/new-in-devtools-121#interactions) - * [Advanced filtering in Bottom-Up, Call Tree, and Event Log tabs](https://developer.chrome.com/blog/new-in-devtools-121#filters) + * [Advanced filtering in Bottom-up, Call tree, and Event log tabs](https://developer.chrome.com/blog/new-in-devtools-121#filters) * [Indentation markers in the Sources panel](https://developer.chrome.com/blog/new-in-devtools-121#sources) * [Helpful tooltips for overridden headers and content in the Network panel](https://developer.chrome.com/blog/new-in-devtools-121#overrides) * [New Command Menu options for adding and removing request blocking patterns](https://developer.chrome.com/blog/new-in-devtools-121#command-menu) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md index ceac040385..d2ef504a38 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md @@ -26,7 +26,9 @@ todo video -The new experiment **Timeline: Show postMessage dispatch and handling flows** improves the **Performance** tool's **Main** section to help you quickly identify `postMessage` events and handlers, by distinguishing events that are triggered by the `postMessage` method from other events that are displayed in the **Performance** tool. This experiment helps you investigate performance issues that are related to posting messages across various threads of an application, to view messages between windows, iframes, and dedicated workers. + + +The new experiment **Performance panel: show postMessage dispatch and handling flows** improves the **Performance** tool's **Main** section to help you quickly identify `postMessage` events and handlers, by distinguishing events that are triggered by the `postMessage` method from other events that are displayed in the **Performance** tool. This experiment helps you investigate performance issues that are related to posting messages across various threads of an application, to view messages between windows, iframes, and dedicated workers. Without this experiment, events that are triggered by dispatching and handling messages between threads of an application appear as generic scripting function-call events. With this experiment enabled: * `postMessage` dispatch events appear as **Schedule postMessage**. @@ -38,10 +40,10 @@ This experiment helps you investigate when a `postMessage` call occurred, and ho ![Arrows linking dispatch events to handler events](./devtools-124-images/post-message-events-arrows.png) -To use this feature, in DevTools, select **Customize and control DevTools** (![the Customize and control DevTools icon](./devtools-124-images/customize-and-control-devtools-icon.png)) > **Settings** > **Experiments**, select the checkbox **Timeline: Show postMessage dispatch and handling flows**, click the **Close** (X) button, and then click the **Reload DevTools** button. +To use this feature, in DevTools, select **Customize and control DevTools** (![the Customize and control DevTools icon](./devtools-124-images/customize-and-control-devtools-icon.png)) > **Settings** > **Experiments**, select the checkbox **Performance panel: show postMessage dispatch and handling flows**, click the **Close** (X) button, and then click the **Reload DevTools** button. See also: -* [View messages between windows, iframes, and dedicated workers](../../../evaluate-performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. +* [View messages between windows, iframes, and dedicated workers](../../../performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. * [postMessage Trace Events demo (rendered)](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) * [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) @@ -56,7 +58,7 @@ Before Microsoft Edge 124, you could rearrange the tabs in the **Activity bar** ![The context menu from right-clicking a tool's tab on the Activity bar](./devtools-124-images/rearrange-tab.png) See also: -* [Pin and rearrange tools in the Activity Bar](/microsoft-edge/devtools-guide-chromium/overview#pin-and-rearrange-tools-in-the-activity-bar) in _Overview of DevTools_. +* [Pin and rearrange tools in the Activity Bar](../../../overview.md#pin-and-rearrange-tools-in-the-activity-bar) in _Overview of DevTools_. @@ -73,8 +75,8 @@ Also, when you turn on throttling in the **Network** tool, the **Network** tab n ![Network tool's tab showing a warning icon when throttling is used](./devtools-124-images/network-warning-icon-throttling.png) See also: -* [Override webpage resources with local copies (Overrides tab)](/microsoft-edge/devtools-guide-chromium/javascript/overrides) -* [Emulate slow network connections](/microsoft-edge/devtools-guide-chromium/network/reference#emulate-slow-network-connections) in _Network features reference_. +* [Override webpage resources with local copies (Overrides tab)](../../../javascript/overrides.md) +* [Emulate slow network connections](../../../network/reference.md#emulate-slow-network-connections) in _Network features reference_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md index bdfd1ca738..e080e42c57 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md @@ -41,7 +41,8 @@ The **Selector Stats** tab has the following changes: * The unit of time has been changed from microseconds to milliseconds. See also: -* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) +* [View CSS selector statistics](../../../performance/reference.md#view-css-selector-statistics) in _Performance features reference_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md index 3da9a9d34a..8b8c44ebdf 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md @@ -31,7 +31,8 @@ After: ![New selector stats labels](./devtools-128-images/new-selector-stats.png) See also: -* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) +* [Enable advanced paint instrumentation](../../../performance/reference.md#enable-advanced-paint-instrumentation) in _Performance features reference_. +* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) @@ -75,7 +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: -* [Introduction to the Performance tool](../../../evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../../../performance/index.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/11/devtools-131.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/11/devtools-131.md index 5411868509..c71425b13b 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/11/devtools-131.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/11/devtools-131.md @@ -64,7 +64,7 @@ To view CSS selector costs: 1. Click the **CSS Selector costs** button to expand its section. See also: -* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md) +* [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index.md b/microsoft-edge/devtools-guide-chromium/workspaces/index.md index c6185379e0..b6c8d08bb9 100644 --- a/microsoft-edge/devtools-guide-chromium/workspaces/index.md +++ b/microsoft-edge/devtools-guide-chromium/workspaces/index.md @@ -31,11 +31,11 @@ To refresh your knowledge of the technologies used, see the following articles: * Use HTML, CSS, and JavaScript to build a web page. See [Getting started with the web](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) -* Use DevTools to make basic changes to CSS. See [Get started viewing and changing CSS](/microsoft-edge/devtools-guide-chromium/css/) +* Use DevTools to make basic changes to CSS. See [Get started viewing and changing CSS](../css/index.md). * Run a local HTTP web server. See: - * Using Node.js (used for this tutorial): [Set up a localhost server](/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_. + * Using Node.js (used for this tutorial): [Set up a localhost server](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_. * Using Python: [Running a simple local HTTP server](https://developer.mozilla.org/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) in _How do you set up a local testing server?_ diff --git a/microsoft-edge/extensions-chromium/developer-guide/minimize-page-load-time-impact.md b/microsoft-edge/extensions-chromium/developer-guide/minimize-page-load-time-impact.md index 6183247f16..391853dc95 100644 --- a/microsoft-edge/extensions-chromium/developer-guide/minimize-page-load-time-impact.md +++ b/microsoft-edge/extensions-chromium/developer-guide/minimize-page-load-time-impact.md @@ -28,7 +28,7 @@ To profile the performance of your extension's content script, use Microsoft Edg DevTools provides a set of features for inspecting, debugging, and profiling the code that a webpage uses. DevTools can also be used to profile your extension's code. -In this section, you'll learn how to use the **Performance** tool in DevTools to profile your extension's content script. To learn more about the **Performance** tool, see [Introduction to the Performance tool](../../devtools-guide-chromium/evaluate-performance/index.md). +In this section, you'll learn how to use the **Performance** tool in DevTools to profile your extension's content script. To learn more about the **Performance** tool, see [Analyze runtime performance (tutorial)](../../devtools-guide-chromium/evaluate-performance/index.md). 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. @@ -261,7 +261,7 @@ onmessage = event => { ## See also -* [Introduction to the Performance tool](../../devtools-guide-chromium/evaluate-performance/index.md) +* [Analyze runtime performance (tutorial)](../../devtools-guide-chromium/evaluate-performance/index.md) Chrome Extension docs: * [Manifest - content scripts](https://developer.chrome.com/docs/extensions/reference/manifest/content-scripts) diff --git a/microsoft-edge/extensions-chromium/publish/extensions-analytics.md b/microsoft-edge/extensions-chromium/publish/extensions-analytics.md index ce70372005..e050f4d8a7 100644 --- a/microsoft-edge/extensions-chromium/publish/extensions-analytics.md +++ b/microsoft-edge/extensions-chromium/publish/extensions-analytics.md @@ -108,7 +108,6 @@ The following screenshot shows Installs per Language over a six month period. > [!div class="mx-imgBorder"] > ![Language distribution for your extension](./extensions-analytics-images/extension-analytics-installs-filter-language-6-months.png) -The Analytics Dashboard helps you better understand and engage with your extension users. For information about other -features launched on Partner Center, see [Released features for Microsoft Edge extensions](../whats-new/released-features.md). +The Analytics Dashboard helps you better understand and engage with your extension users. For information about other features launched on Partner Center, see [Released features for Microsoft Edge extensions](../whats-new/released-features.md). Share your feedback, questions, and comments with the team on Twitter [@MSEdgeDev](https://twitter.com/msedgedev/) or via the [Microsoft Edge Insider forums on TechCommunity](https://techcommunity.microsoft.com/t5/articles/manifest-v3-changes-are-now-available-in-microsoft-edge/m-p/1780254). diff --git a/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md index d65b6c622e..1483767277 100644 --- a/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md +++ b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md @@ -18,7 +18,7 @@ You can go to [Legal info](https://partner.microsoft.com/dashboard/account/v3/or When account verification is complete, you can use your Partner Center dashboard to publish your extension at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/). -Verification usually takes three to five business days. If more than five days have passed, you can [Contact the Microsoft Edge extensions team](../publish/contact-extensions-team.md) for help. +Verification usually takes three to five business days. If more than five days have passed, you can [Contact the Microsoft Edge extensions team](./contact-extensions-team.md) for help. diff --git a/microsoft-edge/index.yml b/microsoft-edge/index.yml index 45591ee139..1808e1dcba 100644 --- a/microsoft-edge/index.yml +++ b/microsoft-edge/index.yml @@ -403,7 +403,7 @@ conceptualContent: url: ./web-platform/sidebar.md itemType: how-to-guide - - text: Detect Windows 11 using User-Agent Client Hints + - text: Detect Windows 11 and CPU architecture using User-Agent Client Hints url: ./web-platform/how-to-detect-win11.md itemType: how-to-guide diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index a38727c71d..48abef11cc 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -320,7 +320,7 @@ items: - name: About the list of tools href: ./devtools-guide-chromium/about-tools.md -# Icon tools ================================================================== +# Default tools =============================================================== # Inspect tool ---------------------------------------------------------------- - name: Inspect tool items: @@ -341,7 +341,12 @@ - name: Emulate and test other browsers # orig: Emulate and Test Other Browsers (orphaned) href: ./devtools-guide-chromium/device-mode/testing-other-browsers.md displayName: Device Emulation, Device Emulator, Device Mode -# Permanent tool tabs ========================================================= +# Welcome tool ---------------------------------------------------------------- + - name: Welcome tool + items: + - name: Welcome tool + href: ./devtools-guide-chromium/welcome/welcome-tool.md + displayName: Welcome tool # Elements tool --------------------------------------------------------------- - name: Elements tool, for CSS, HTML, and the DOM items: @@ -472,19 +477,95 @@ - name: Securely debug original code by using Azure Artifacts symbol server source maps href: ./devtools-guide-chromium/javascript/consume-source-maps-from-azure.md displayName: Sources tool, source maps, Azure Artifacts symbol server -# Optional tool tabs ========================================================== -# 3D View tool ---------------------------------------------------------------- - - name: 3D View tool +# Network tool ---------------------------------------------------------------- + - name: Network tool items: - - name: Navigate webpage layers, z-index, and DOM using the 3D View tool - href: ./devtools-guide-chromium/3d-view/index.md - displayName: 3D View tool, composited layers -# Animations tool ------------------------------------------------------------- - - name: Animations tool + - name: Inspect network activity + href: ./devtools-guide-chromium/network/index.md + displayName: Network tool + + - name: Network features reference + href: ./devtools-guide-chromium/network/reference.md + displayName: Network tool + + - name: Network issues guide # added article + href: ./devtools-guide-chromium/network/issues.md + displayName: Network tool + + - name: View page resources + href: ./devtools-guide-chromium/resources/index.md + displayName: Command Menu, Network tool, Sources tool, Application tool, Network tool + + - name: Service worker improvements # added article + href: ./devtools-guide-chromium/service-workers/index.md + displayName: Network tool, Application tool, Sources tool +# Performance tool ------------------------------------------------------------ + - name: Performance tool # = upstream TOC bucket "Performance" items: - - name: Inspect and modify CSS animation effects - href: ./devtools-guide-chromium/inspect-styles/animations.md - displayName: Animations tool + - name: "Performance tool: Analyze your website's performance" # = Performance > Overview + href: ./devtools-guide-chromium/performance/overview.md + displayName: Performance tool + + - name: Analyze runtime performance (tutorial) # = Performance > Analyze runtime performance + href: ./devtools-guide-chromium/performance/index.md + displayName: Performance tool, Get started analyzing runtime performance # old title + + - name: Troubleshooting common performance issues # no longer found + href: ./devtools-guide-chromium/rendering-tools/index.md + displayName: Performance tool, Analyze runtime performance # old title + + - name: Optimize website speed using Lighthouse # = Lighthouse > Optimize web speed + href: ./devtools-guide-chromium/speed/get-started.md + displayName: Performance tool, Lighthouse tool, Network tool + + - name: Performance features reference # = Performance > Features reference + href: ./devtools-guide-chromium/performance/reference.md + displayName: Performance tool, Rendering tool + + - name: Performance recording event reference # = Performance > Timeline event reference + href: ./devtools-guide-chromium/performance/performance-reference.md + displayName: Performance tool + + - name: Display original function names in performance profiles + href: ./devtools-guide-chromium/performance/unminify.md + displayName: Performance tool + + - name: Analyze CSS selector performance during Recalculate Style events + href: ./devtools-guide-chromium/performance/selector-stats.md + displayName: Performance tool, css selector stats, css selectors, selector stats, selector statistics, css selector statistics +# Memory tool ----------------------------------------------------------------- + - name: Memory tool + items: + - name: Fix memory problems + href: ./devtools-guide-chromium/memory-problems/index.md + displayName: Memory tool + + - name: Memory terminology + href: ./devtools-guide-chromium/memory-problems/memory-101.md + displayName: Memory tool + + - name: Monitor memory use in realtime (Microsoft Edge Browser Task Manager) + href: ./devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager.md + + - name: Record heap snapshots using the Memory tool ("Heap snapshot" profiling type) + href: ./devtools-guide-chromium/memory-problems/heap-snapshots.md + displayName: Memory tool + + - name: Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type) + href: ./devtools-guide-chromium/memory-problems/allocation-profiler.md + displayName: Memory tool + + - name: Speed up JavaScript runtime ("Allocation sampling" profiling type) + href: ./devtools-guide-chromium/rendering-tools/js-runtime.md + displayName: Memory tool + + - name: Debug DOM memory leaks ("Detached elements" profiling type) + href: ./devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements.md + displayName: Memory tool + + - name: The heap snapshot file format + href: ./devtools-guide-chromium/memory-problems/heap-snapshot-schema.md + displayName: Memory tool # Application tool ------------------------------------------------------------ - name: Application tool, for storage and PWAs items: @@ -535,245 +616,170 @@ - name: Debug background services href: ./devtools-guide-chromium/javascript/background-services.md displayName: Application tool -# Changes tool ---------------------------------------------------------------- - - name: Changes tool +# /Default tools +# More tools ================================================================== + - name: More tools items: - - name: Track changes to files using the Changes tool - href: ./devtools-guide-chromium/changes/changes-tool.md - displayName: Changes tool +# 3D View tool ---------------------------------------------------------------- + - name: 3D View tool + items: + - name: Navigate webpage layers, z-index, and DOM using the 3D View tool + href: ./devtools-guide-chromium/3d-view/index.md + displayName: 3D View tool, composited layers +# Animations tool ------------------------------------------------------------- + - name: Animations tool + items: + - name: Inspect and modify CSS animation effects + href: ./devtools-guide-chromium/inspect-styles/animations.md + displayName: Animations tool +# Changes tool ---------------------------------------------------------------- + - name: Changes tool + items: + - name: Track changes to files using the Changes tool + href: ./devtools-guide-chromium/changes/changes-tool.md + displayName: Changes tool # Coverage tool --------------------------------------------------------------- - - name: Coverage tool - items: - - name: Find unused JavaScript and CSS code with the Coverage tool - href: ./devtools-guide-chromium/coverage/index.md - displayName: Coverage tool -# Crash analyzer -------------------------------------------------------------- - - name: Crash analyzer tool - items: + - name: Coverage tool + items: + - name: Find unused JavaScript and CSS code with the Coverage tool + href: ./devtools-guide-chromium/coverage/index.md + displayName: Coverage tool +# Crash analyzer tool --------------------------------------------------------- - name: Crash analyzer tool - href: ./devtools-guide-chromium/crash-analyzer/index.md + items: + - name: Crash analyzer tool + href: ./devtools-guide-chromium/crash-analyzer/index.md # CSS overview tool ----------------------------------------------------------- - - name: CSS overview tool - items: - - name: Optimize CSS styles with the CSS overview tool - href: ./devtools-guide-chromium/css/css-overview-tool.md - displayName: CSS overview tool + - name: CSS overview tool + items: + - name: Optimize CSS styles with the CSS overview tool + href: ./devtools-guide-chromium/css/css-overview-tool.md + displayName: CSS overview tool # Developer resources tool ---------------------------------------------------- - - name: Developer resources tool - items: - name: Developer resources tool - href: ./devtools-guide-chromium/developer-resources/developer-resources.md - displayName: Developer resources tool + items: + - name: Developer resources tool + href: ./devtools-guide-chromium/developer-resources/developer-resources.md + displayName: Developer resources tool # Issues tool ----------------------------------------------------------------- - - name: Issues tool - items: - - name: Find and fix problems using the Issues tool - href: ./devtools-guide-chromium/issues/index.md - displayName: Issues tool + - name: Issues tool + items: + - name: Find and fix problems using the Issues tool + href: ./devtools-guide-chromium/issues/index.md + displayName: Issues tool # Lighthouse tool ------------------------------------------------------------- - - name: Lighthouse tool # new jump page # main article is in Accessibility - items: - - name: Lighthouse tool - href: ./devtools-guide-chromium/lighthouse/lighthouse-tool.md - displayName: Lighthouse tool + - name: Lighthouse tool # new jump page # main article is in Accessibility + items: + - name: Lighthouse tool + href: ./devtools-guide-chromium/lighthouse/lighthouse-tool.md + displayName: Lighthouse tool # Media tool ------------------------------------------------------------------ - - name: Media tool - items: - - name: View and debug media players information - href: ./devtools-guide-chromium/media-panel/index.md - displayName: Media tool -# Memory tool ----------------------------------------------------------------- - - name: Memory tool - items: - - name: Fix memory problems - href: ./devtools-guide-chromium/memory-problems/index.md - displayName: Memory tool - - - name: Memory terminology - href: ./devtools-guide-chromium/memory-problems/memory-101.md - displayName: Memory tool - - - name: Monitor memory use in realtime (Microsoft Edge Browser Task Manager) - href: ./devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager.md - - - name: Record heap snapshots using the Memory tool ("Heap snapshot" profiling type) - href: ./devtools-guide-chromium/memory-problems/heap-snapshots.md - displayName: Memory tool - - - name: Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type) - href: ./devtools-guide-chromium/memory-problems/allocation-profiler.md - displayName: Memory tool - - - name: Speed up JavaScript runtime ("Allocation sampling" profiling type) - href: ./devtools-guide-chromium/rendering-tools/js-runtime.md - displayName: Memory tool - - - name: Debug DOM memory leaks ("Detached elements" profiling type) - href: ./devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements.md - displayName: Memory tool - - - name: The heap snapshot file format - href: ./devtools-guide-chromium/memory-problems/heap-snapshot-schema.md - displayName: Memory tool -# Memory Inspector tool ------------------------------------------------------- - - name: Memory Inspector tool - items: - - name: Inspect a JavaScript ArrayBuffer with the Memory Inspector tool # real content pending - href: ./devtools-guide-chromium/memory-inspector/memory-inspector-tool.md - displayName: Memory Inspector tool -# Network tool ---------------------------------------------------------------- - - name: Network tool - items: - - name: Inspect network activity - href: ./devtools-guide-chromium/network/index.md - displayName: Network tool - - - name: Network features reference - href: ./devtools-guide-chromium/network/reference.md - displayName: Network tool - - - name: Network issues guide # added article - href: ./devtools-guide-chromium/network/issues.md - displayName: Network tool - - - name: View page resources - href: ./devtools-guide-chromium/resources/index.md - displayName: Command Menu, Network tool, Sources tool, Application tool, Network tool - - - name: Service worker improvements # added article - href: ./devtools-guide-chromium/service-workers/index.md - displayName: Network tool, Application tool, Sources tool + - name: Media tool + items: + - name: View and debug media players information + href: ./devtools-guide-chromium/media-panel/index.md + displayName: Media tool +# Memory inspector tool ------------------------------------------------------- + - name: Memory inspector tool + items: + - name: Inspect a JavaScript ArrayBuffer with the Memory inspector tool # real content pending + href: ./devtools-guide-chromium/memory-inspector/memory-inspector-tool.md + displayName: Memory inspector tool # Network conditions tool ----------------------------------------------------- - - name: Network conditions tool - items: - - name: Network conditions tool # new jump page - href: ./devtools-guide-chromium/network-conditions/network-conditions-tool.md - displayName: Network conditions tool + - name: Network conditions tool + items: + - name: Network conditions tool # new jump page + href: ./devtools-guide-chromium/network-conditions/network-conditions-tool.md + displayName: Network conditions tool - - name: Override the user agent string - href: ./devtools-guide-chromium/device-mode/override-user-agent.md - displayName: Network Conditions tool, Device Emulation, Device Emulator + - name: Override the user agent string + href: ./devtools-guide-chromium/device-mode/override-user-agent.md + displayName: Network Conditions tool, Device Emulation, Device Emulator # Network Console tool ----------------------------------------------- - - name: Network Console tool - items: - - name: Compose and send web API requests using the Network Console tool - href: ./devtools-guide-chromium/network-console/network-console-tool.md + - name: Network Console tool + items: + - name: Compose and send web API requests using the Network Console tool + href: ./devtools-guide-chromium/network-console/network-console-tool.md # Network request blocking tool ----------------------------------------------- - - name: Network request blocking tool - items: - - name: Block network requests - href: ./devtools-guide-chromium/network-request-blocking/network-request-blocking-tool.md - displayName: Network request blocking tool -# Performance tool ------------------------------------------------------------ - - name: Performance tool - items: - - name: Introduction to the Performance tool - href: ./devtools-guide-chromium/evaluate-performance/index.md - displayName: Performance tool, Get started analyzing runtime performance # old title - - - name: Troubleshooting common performance issues - href: ./devtools-guide-chromium/rendering-tools/index.md - displayName: Performance tool, Analyze runtime performance # old title - - - name: Optimize website speed using Lighthouse - href: ./devtools-guide-chromium/speed/get-started.md - displayName: Performance tool, Lighthouse tool, Network tool - - - name: Performance features reference - href: ./devtools-guide-chromium/evaluate-performance/reference.md - displayName: Performance tool, Rendering tool - - - name: Performance recording event reference - href: ./devtools-guide-chromium/evaluate-performance/performance-reference.md - displayName: Performance tool - - - name: Display original function names in performance profiles - href: ./devtools-guide-chromium/evaluate-performance/unminify.md - displayName: Performance tool - - - name: Analyze CSS selector performance during Recalculate Style events - href: ./devtools-guide-chromium/evaluate-performance/selector-stats.md - displayName: Performance tool, css selector stats, css selectors, selector stats, selector statistics, css selector statistics - + - name: Network request blocking tool + items: + - name: Block network requests + href: ./devtools-guide-chromium/network-request-blocking/network-request-blocking-tool.md + displayName: Network request blocking tool # Performance monitor tool ---------------------------------------------------- - - name: Performance monitor tool - items: - - name: Measure runtime performance of a page using the Performance monitor tool # added article - href: ./devtools-guide-chromium/performance-monitor/performance-monitor-tool.md - displayName: Performance monitor tool + - name: Performance monitor tool + items: + - name: Measure runtime performance of a page using the Performance monitor tool # added article + href: ./devtools-guide-chromium/performance-monitor/performance-monitor-tool.md + displayName: Performance monitor tool # Quick source tool ----------------------------------------------------------- - - name: Quick source tool # jump page - items: - - name: Display or edit source files using the Quick source tool - href: ./devtools-guide-chromium/quick-source/quick-source-tool.md - displayName: Quick source tool # also indexed elsewhere in this file + - name: Quick source tool # jump page + items: + - name: Display or edit source files using the Quick source tool + href: ./devtools-guide-chromium/quick-source/quick-source-tool.md + displayName: Quick source tool # also indexed elsewhere in this file # Recorder tool ----------------------------------------------------------- - - name: Recorder tool - items: - - name: Record and replay user flows and measure performance - href: ./devtools-guide-chromium/recorder/index.md - displayName: Recorder tool + - name: Recorder tool + items: + - name: Record and replay user flows and measure performance + href: ./devtools-guide-chromium/recorder/index.md + displayName: Recorder tool # Rendering tool -------------------------------------------------------------- - - name: Rendering tool - items: - - name: Rendering tool, to see what a webpage looks like with different display options or vision deficiencies - href: ./devtools-guide-chromium/rendering-tools/rendering-tool.md - displayName: Rendering tool + # some Rendering articles are in Accessibility section + - name: Rendering tool + items: + - name: Rendering tool, to see what a webpage looks like with different display options or vision deficiencies + href: ./devtools-guide-chromium/rendering-tools/rendering-tool.md + displayName: Rendering tool - - name: Emulate dark or light schemes in the rendered page # added article - href: ./devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md - displayName: Rendering tool + - name: Emulate dark or light schemes in the rendered page # added article + href: ./devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md + displayName: Rendering tool - - name: Force print preview mode - href: ./devtools-guide-chromium/css/print-preview.md - displayName: Rendering tool - # some articles are in Accessibility section + - name: Force print preview mode + href: ./devtools-guide-chromium/css/print-preview.md + displayName: Rendering tool # Search tool ----------------------------------------------------------------- - - name: Search tool - items: - - name: Find source files for a page using the Search tool # added article - href: ./devtools-guide-chromium/search/search-tool.md - displayName: Search tool + - name: Search tool + items: + - name: Find source files for a page using the Search tool # added article + href: ./devtools-guide-chromium/search/search-tool.md + displayName: Search tool # Security tool --------------------------------------------------------------- - - name: Security tool - items: - - name: Understand security issues using the Security tool - href: ./devtools-guide-chromium/security/index.md - displayName: Security tool + - name: Security tool + items: + - name: Understand security issues using the Security tool + href: ./devtools-guide-chromium/security/index.md + displayName: Security tool # Sensors tool ---------------------------------------------------------------- - - name: Sensors tool - items: - - name: Override geolocation with the Sensors tool # orig: was in "Mobile simulation" - href: ./devtools-guide-chromium/device-mode/geolocation.md - displayName: Sensors tool, Device Emulation - - - name: Simulate device orientation with the Sensors tool # orig: was in "Mobile simulation" - href: ./devtools-guide-chromium/device-mode/orientation.md - displayName: Sensors tool, Device Emulation -# Source maps monitor tool ---------------------------------------------------- - - name: Source Maps Monitor tool - items: - - name: Source Maps Monitor tool # no article yet - href: ./devtools-guide-chromium/source-maps-monitor/source-maps-monitor-tool.md - displayName: Source maps monitor tool + - name: Sensors tool + items: + - name: Override geolocation with the Sensors tool # orig: was in "Mobile simulation" + href: ./devtools-guide-chromium/device-mode/geolocation.md + displayName: Sensors tool, Device Emulation + + - name: Simulate device orientation with the Sensors tool # orig: was in "Mobile simulation" + href: ./devtools-guide-chromium/device-mode/orientation.md + displayName: Sensors tool, Device Emulation +# Source Maps Monitor tool ---------------------------------------------------- + - name: Source Maps Monitor tool + items: + - name: Source Maps Monitor tool # no article yet + href: ./devtools-guide-chromium/source-maps-monitor/source-maps-monitor-tool.md + displayName: Source maps monitor tool # WebAudio tool --------------------------------------------------------------- - - name: WebAudio tool - items: - name: WebAudio tool - href: ./devtools-guide-chromium/webaudio/webaudio-tool.md - displayName: WebAudio tool + items: + - name: WebAudio tool + href: ./devtools-guide-chromium/webaudio/webaudio-tool.md + displayName: WebAudio tool # WebAuthn tool --------------------------------------------------------------- - - name: WebAuthn tool - items: - - name: Emulate authenticators and debug WebAuthn - href: ./devtools-guide-chromium/webauthn/index.md - displayName: WebAuthn tool -# Welcome tool ---------------------------------------------------------------- - - name: Welcome tool - items: - - name: Welcome tool - href: ./devtools-guide-chromium/welcome/welcome-tool.md - displayName: Welcome tool + - name: WebAuthn tool + items: + - name: Emulate authenticators and debug WebAuthn + href: ./devtools-guide-chromium/webauthn/index.md + displayName: WebAuthn tool +# /More tools # /Tools # Command Menu ---------------------------------------------------------------- - name: Command Menu and keyboard shortcuts @@ -1755,7 +1761,7 @@ href: ./web-platform/sidebar.md displayName: sidebar apps, sidebar extensions, pwa, side panel, sidepanel - - name: Detect Windows 11 using User-Agent Client Hints + - name: Detect Windows 11 and CPU architecture using User-Agent Client Hints href: ./web-platform/how-to-detect-win11.md - name: Customize the password reveal button diff --git a/microsoft-edge/visual-studio-code/debugger-for-edge.md b/microsoft-edge/visual-studio-code/debugger-for-edge.md index d98f789a06..30b5a86000 100644 --- a/microsoft-edge/visual-studio-code/debugger-for-edge.md +++ b/microsoft-edge/visual-studio-code/debugger-for-edge.md @@ -17,4 +17,4 @@ For more information, see [Browser debugging in VS Code](https://code.visualstud Send your feedback by [filing an issue](https://github.com/microsoft/vscode-js-debug/issues/new) in the [vscode-js-debug repository](https://github.com/microsoft/vscode-js-debug). -You can also inspect HTML and CSS using DevTools from within Visual Studio Code. To learn more, see [Browser debugging with Microsoft Edge Devtools integration in Visual Studio Code](/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension#browser-debugging-with-microsoft-edge-devtools-integration-in-visual-studio-code). +You can also inspect HTML and CSS using DevTools from within Visual Studio Code. See [Microsoft Edge DevTools extension for Visual Studio Code](./microsoft-edge-devtools-extension.md). diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index 4ac0ec8b8b..37c7323126 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -106,7 +106,7 @@ The following tools are included in the DevTools extension for Visual Studio Cod | **Inspect** tool | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](../devtools-guide-chromium/css/inspect.md) | | **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](../devtools-guide-chromium/device-mode/index.md) | -For the list of all tools that are in the Microsoft Edge browser version of DevTools, see [Overview of all tools](../devtools-guide-chromium/about-tools.md#overview-of-all-tools) in _About the list of tools_. +For the list of all tools that are in the Microsoft Edge browser version of DevTools, see [About the list of tools](../devtools-guide-chromium/about-tools.md). diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md index a21f1afd48..acdc62baa6 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md @@ -69,7 +69,7 @@ To enable or disable CSS mirror editing: ![Checkbox in the Styles panel of the Elements tool to enable or disable CSS mirroring](./css-mirror-editing-styles-tab-images/css-mirror-editing-checkbox.png) - Or, open the Command Menu, start typing the word **mirror**, and then select **Microsoft Edge Tools: Toggle mirror editing on|off for CSS files in workspace**: + Or, open the **Command Menu**, start typing the word **mirror**, and then select **Microsoft Edge Tools: Toggle mirror editing on|off for CSS files in workspace**: ![Using the Command Menu to focus the CSS mirror editing view and turn CSS mirror editing on or off](./css-mirror-editing-styles-tab-images/css-mirror-editing-command.png) diff --git a/microsoft-edge/web-platform/release-notes/134.md b/microsoft-edge/web-platform/release-notes/134.md index b246348d6e..d623223973 100644 --- a/microsoft-edge/web-platform/release-notes/134.md +++ b/microsoft-edge/web-platform/release-notes/134.md @@ -151,7 +151,7 @@ See also: * [console.timeStamp()](https://developer.mozilla.org/docs/Web/API/console/timeStamp) at MDN. * [Console object API Reference](../../devtools-guide-chromium/console/api.md). -* [Introduction to the Performance tool](../../devtools-guide-chromium/evaluate-performance/index.md). +* [Analyze runtime performance (tutorial)](../../devtools-guide-chromium/evaluate-performance/index.md). diff --git a/microsoft-edge/web-platform/user-agent-guidance.md b/microsoft-edge/web-platform/user-agent-guidance.md index 6c93ea1ca4..dca6e5f7ca 100644 --- a/microsoft-edge/web-platform/user-agent-guidance.md +++ b/microsoft-edge/web-platform/user-agent-guidance.md @@ -305,4 +305,4 @@ Legacy browser considerations: ## See also -[Detect Windows 11 using User-Agent Client Hints](/microsoft-edge/web-platform/how-to-detect-win11) +[Detect Windows 11 and CPU architecture using User-Agent Client Hints](./how-to-detect-win11.md) diff --git a/microsoft-edge/web-platform/web-platform.md b/microsoft-edge/web-platform/web-platform.md index 1d6688904d..b9e020edf0 100644 --- a/microsoft-edge/web-platform/web-platform.md +++ b/microsoft-edge/web-platform/web-platform.md @@ -62,7 +62,7 @@ See [Develop experiences for the sidebar in Microsoft Edge](./sidebar.md). -## Detect Windows 11 using User-Agent Client Hints +## Detect Windows 11 and CPU architecture using User-Agent Client Hints Websites can differentiate between users on Windows 11 and Windows 10 by using User-Agent Client Hints (UA-CH). The User-Agent Client Hints format is used by browsers to provide user agent information to websites. @@ -76,7 +76,7 @@ There are two approaches for sites to access user agent information: * User-Agent strings (legacy). * User-Agent Client Hints (recommended). -See [Detect Windows 11 using User-Agent Client Hints](./how-to-detect-win11.md). +See [Detect Windows 11 and CPU architecture using User-Agent Client Hints](./how-to-detect-win11.md). diff --git a/microsoft-edge/webdriver-chromium/ie-mode.md b/microsoft-edge/webdriver-chromium/ie-mode.md index 4dc4e25b8b..00ad314f99 100644 --- a/microsoft-edge/webdriver-chromium/ie-mode.md +++ b/microsoft-edge/webdriver-chromium/ie-mode.md @@ -352,6 +352,6 @@ When using Microsoft Edge in IE mode, if your test switches focus away from a ce ## See also -* [Use WebDriver to automate Microsoft Edge](/microsoft-edge/webdriver-chromium) - An overview of automating Microsoft Edge with the WebDriver protocol. +* [Use WebDriver to automate Microsoft Edge](./index.md) - An overview of automating Microsoft Edge with the WebDriver protocol. * [Selenium documentation](https://www.selenium.dev/documentation) - Information about WebDriver in the context of Selenium, and how to write automated WebDriver tests using Selenium. * [Contact the Microsoft Edge DevTools team](../devtools-guide-chromium/contact.md) to send feedback about using WebDriver, WebDriver testing frameworks (such as Selenium), and Microsoft Edge. diff --git a/microsoft-edge/webview2/concepts/browser-features.md b/microsoft-edge/webview2/concepts/browser-features.md index 812e6e437f..4c1feaf886 100644 --- a/microsoft-edge/webview2/concepts/browser-features.md +++ b/microsoft-edge/webview2/concepts/browser-features.md @@ -51,7 +51,7 @@ The following table displays the WebView2 features that differ from the Microsof | Browser Task Manager | Off | No | This feature is turned off. | | Collections | Off | No | This feature is turned off. | | Continue-where-I-left-off prompt | Off | No | This feature is turned off. | -| Downloads | On | Yes | WebView2 provides an API that allows you to customize the download UI to manipulate downloads. For example, you can block, redirect, save, pause, and so on. For more information, see [Download API](/microsoft-edge/webview2/reference/win32/icorewebview2_4#add_downloadstarting). | +| Downloads | On | Yes | WebView2 provides an API that allows you to customize the download UI to manipulate downloads. For example, you can block, redirect, save, pause, and so on. See [Downloads](./overview-features-apis.md#downloads) in _Overview of WebView2 APIs_. | | Edge Shopping | Off | No | This feature is turned off. | | Family Safety | Off | No | This feature is turned off. | | Favorites | Off | No | This feature is turned off. | diff --git a/microsoft-edge/webview2/concepts/overview-features-apis.md b/microsoft-edge/webview2/concepts/overview-features-apis.md index b8e07acc99..90a292f967 100644 --- a/microsoft-edge/webview2/concepts/overview-features-apis.md +++ b/microsoft-edge/webview2/concepts/overview-features-apis.md @@ -558,7 +558,7 @@ See also: You can use cookies in WebView2 to manage user sessions, store user personalization preferences, and track user behavior. See also: -* [View, edit, and delete cookies](/microsoft-edge/devtools-guide-chromium/storage/cookies) +* [View, edit, and delete cookies](../../devtools-guide-chromium/storage/cookies.md) ##### [.NET/C#](#tab/dotnetcsharp) @@ -1252,7 +1252,7 @@ See also: The user agent is a string that represents the identity of the program on behalf of the user, such as the browser name. In WebView2, you can set the user agent. See also: -* [Detect Windows 11 using User-Agent Client Hints](../../web-platform/how-to-detect-win11.md) +* [Detect Windows 11 and CPU architecture using User-Agent Client Hints](../../web-platform/how-to-detect-win11.md) * [Override the user agent string](../../devtools-guide-chromium/device-mode/override-user-agent.md)