diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index bd2c106ece..87a4bd63bf 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -112,7 +112,7 @@ April 26, 2023 Covers: * Unminified JS names for OOPIFs in the **Performance** tool. -* Non-simple CSS selectors in the **CSS Overview** tool. +* Non-simple CSS selectors in the **CSS overview** tool. * Code folding in the JSON viewer. * Improvements in the DevTools UI. * New markers for logpoints and conditional breakpoints. diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index 0a7e36a47b..95375268c3 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -40,9 +40,9 @@ Microsoft Edge DevTools includes the following tools. | **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) | +| **CSS overview** tool | Help you better understand your page's CSS and identify potential improvements. | [CSS overview tool](css/css-overview-tool.md) | | **Detached Elements** tool | To increase the performance of your webpage, find detached elements that the browser can't garbage-collect, and then identify the JavaScript object that's still referencing the detached element. Then change your JavaScript to release the element, to reduce the number of detached elements on your page, increasing page performance and responsiveness. | [Debug DOM memory leaks by using the Detached Elements tool](memory-problems/dom-leaks.md) | -| **Developer Resources** | Shows resource URLs for the webpage. | [Developer Resources tool](developer-resources/developer-resources.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) | 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 1b8728ad8c..f0d7f4d914 100644 --- a/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md +++ b/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md @@ -1,6 +1,6 @@ --- -title: Optimize CSS styles with the CSS Overview tool -description: The CSS Overview tool in Microsoft Edge DevTools. +title: Optimize CSS styles with the CSS overview tool +description: The CSS overview tool in Microsoft Edge DevTools. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -8,27 +8,27 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 09/07/2022 --- -# Optimize CSS styles with the CSS Overview tool +# Optimize CSS styles with the CSS overview tool -The **CSS Overview** tool captures an overview of the CSS code used on a webpage and displays a report about the colors, fonts, and media-queries used. The tool also identifies potential color contrast issues and unused CSS declarations issues. +The **CSS overview** tool captures an overview of the CSS code used on a webpage and displays a report about the colors, fonts, and media-queries used. The tool also identifies potential color contrast issues and unused CSS declarations issues. -## Open the CSS Overview tool +## Open the CSS overview tool -To open the **CSS Overview** tool: +To open the **CSS overview** tool: 1. Navigate to the [TODO list demo app](https://microsoftedge.github.io/Demos/demo-to-do/) in Microsoft Edge, or to your own webpage. 1. Open DevTools by pressing **F12** or **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). -1. In the main toolbar, click **More Tools** and select **CSS Overview** from the list. +1. In the main toolbar, click **More Tools** and select **CSS overview** from the list. ![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the list of tools from the More Tools button](./css-overview-tool-images/css-overview-tool-open.png) -1. The **CSS Overview** tool opens and shows a welcome screen. +1. The **CSS overview** tool opens and shows a welcome screen. - ![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the CSS Overview welcome screen](./css-overview-tool-images/css-overview-tool-welcome.png) + ![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the CSS overview welcome screen](./css-overview-tool-images/css-overview-tool-welcome.png) @@ -36,11 +36,11 @@ To open the **CSS Overview** tool: Start using the tool by capturing a new report. Click **Capture overview**, the overview report appears. -![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the CSS Overview report for that site](./css-overview-tool-images/css-overview-tool-report.png) +![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the CSS overview report for that site](./css-overview-tool-images/css-overview-tool-report.png) If you make changes to your webpage and want to view a new report, click **Clear overview** and then capture a new overview. -![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing a CSS Overview report with the Clear overview button at the top](./css-overview-tool-images/css-overview-tool-clear.png) +![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing a CSS overview report with the Clear overview button at the top](./css-overview-tool-images/css-overview-tool-clear.png) @@ -56,7 +56,7 @@ The CSS overview report contains information organized into several sections: To view the sections of the report, use the scrollbar or click the sections in the sidebar: -![TODO demo app on the left, DevTools CSS Overview report on the right with a clickable list of sections and scrollbar](./css-overview-tool-images/css-overview-tool-scroll.png) +![TODO demo app on the left, DevTools CSS overview report on the right with a clickable list of sections and scrollbar](./css-overview-tool-images/css-overview-tool-scroll.png) @@ -156,7 +156,7 @@ Non-simple selectors are more complicated and tend to match more elements, poten To see the list of non-simple selectors, on the overview report, click **Non-simple selectors** in the sidebar to scroll to the relevant section of the report: -![The Non-simple selectors list in the CSS Overview tool](./css-overview-tool-images/non-simple-selectors-in-css-overview.png) +![The Non-simple selectors list in the CSS overview tool](./css-overview-tool-images/non-simple-selectors-in-css-overview.png) From here, you can further analyze the impact of your changes and individual selector performance by using the **Selector Stats** feature in the **Performance** tool. @@ -177,13 +177,13 @@ To find color contrast issues: 1. Open DevTools by pressing **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). -1. In the main toolbar, click **More Tools** and select **CSS Overview** from the list. +1. In the main toolbar, click **More Tools** and select **CSS overview** from the list. -1. In the **CSS Overview** tool, click **Capture overview** and then click **Colors** in the overview report sidebar. +1. In the **CSS overview** tool, click **Capture overview** and then click **Colors** in the overview report sidebar. 1. Scroll down to the **Contrast issues** sub-section to view all issues. - ![Microsoft Edge, with the TODO list demo app and DevTools, showing a list of contrast issues in the CSS Overview report](./css-overview-tool-images/css-overview-tool-contrast-issues.png) + ![Microsoft Edge, with the TODO list demo app and DevTools, showing a list of contrast issues in the CSS overview report](./css-overview-tool-images/css-overview-tool-contrast-issues.png) 1. To view the elements that have a particular color contrast issue, choose the issue you want to fix and click **Text**. The corresponding elements are listed. diff --git a/microsoft-edge/devtools-guide-chromium/developer-resources/developer-resources.md b/microsoft-edge/devtools-guide-chromium/developer-resources/developer-resources.md index 3206a89ab6..e05e10d6c9 100644 --- a/microsoft-edge/devtools-guide-chromium/developer-resources/developer-resources.md +++ b/microsoft-edge/devtools-guide-chromium/developer-resources/developer-resources.md @@ -1,6 +1,6 @@ --- -title: Developer Resources tool -description: The Developer Resources tool in Microsoft Edge DevTools. +title: Developer resources tool +description: The Developer resources tool in Microsoft Edge DevTools. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -8,8 +8,8 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 02/15/2022 --- -# Developer Resources tool +# Developer resources tool -Use the **Developer Resources** tool to view resource URLs for the webpage. +Use the **Developer resources** tool to view resource URLs for the webpage. -![The Developer Resources tool](./developer-resources-images/developer-resources-tool.png) +![The Developer resources tool](./developer-resources-images/developer-resources-tool.png) 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 4fd247615c..d92b02d6e1 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 @@ -304,18 +304,18 @@ See also: -#### View and fix color contrast issues in the CSS Overview tool +#### View and fix color contrast issues in the CSS overview tool -The **CSS Overview** tool now displays a list of elements on your page that have color contrast issues. The [CSS Overview Accessible Colors Demo](https://css-overview-accessible-colors-demo.glitch.me) page has an example of a color contrast issue. +The **CSS overview** tool now displays a list of elements on your page that have color contrast issues. The [CSS overview Accessible Colors Demo](https://css-overview-accessible-colors-demo.glitch.me) page has an example of a color contrast issue. To view a list of elements that have a color contrast issue, on **Contrast issues**, click **Text**. To open the element in the **Elements** tool, click an element in the list. To help fix contrast issues, the Microsoft Edge DevTools [automatically provide color suggestions](../08/devtools.md#accessible-color-suggestion-in-the-styles-pane). ![Color contrast issues](./devtools-images/css-overview.png) -Update: This feature has been released and is no longer experimental. +Update: This feature has been released and is no longer experimental. See also: -* [CSS Overview tool](../../../css/css-overview-tool.md) +* [CSS overview tool](../../../css/css-overview-tool.md) For history, in the Chromium open-source project, see Issue [#1120316](https://crbug.com/1120316). 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 0e560d0e8a..fd51477e80 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 @@ -1,6 +1,6 @@ --- title: What's New in DevTools (Microsoft Edge 112) -description: "The Performance tool can now unminify JavaScript running in out-of-process iframes, the CSS Overview tool displays a list of non-simple selectors for quick performance wins, and more." +description: "The Performance tool can now unminify JavaScript running in out-of-process iframes, the CSS overview tool displays a list of non-simple selectors for quick performance wins, and more." author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -51,13 +51,13 @@ See also: -## CSS Overview tool displays non-simple selectors for quick performance gains +## CSS overview tool displays non-simple selectors for quick performance gains - + -The **CSS Overview** tool has a new **Non-simple selectors** section, which displays a list of non-simple CSS selectors when you take an overview snapshot of your webpage's CSS. This list of non-simple CSS selectors in the **CSS Overview** tool provides a quick way to identify common culprits that might be causing long-running **Recalculate Styles** events: +The **CSS overview** tool has a new **Non-simple selectors** section, which displays a list of non-simple CSS selectors when you take an overview snapshot of your webpage's CSS. This list of non-simple CSS selectors in the **CSS overview** tool provides a quick way to identify common culprits that might be causing long-running **Recalculate Styles** events: -![The new, Non-simple selectors list in the CSS Overview tool](./devtools-112-images/non-simple-selectors-in-css-overview.png) +![The new, Non-simple selectors list in the CSS overview tool](./devtools-112-images/non-simple-selectors-in-css-overview.png) This is a list of selectors that could possibly reduce performance. To determine whether these selectors are actually reducing performance, use the **Selector Stats** feature in the **Performance** tool. @@ -70,7 +70,7 @@ You can try to change these selectors so that they are more specific and match f To analyze individual CSS selector performance and analyze the impact of your changes, use the **Selector Stats** feature in the **Performance** tool. See also: -* [Optimize CSS styles with the CSS Overview tool](../../../css/css-overview-tool.md) +* [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) 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 2f4f4d5e78..0a8e846b2a 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 @@ -1,6 +1,6 @@ --- title: What's New in DevTools (Microsoft Edge 114) -description: "Aggregate Selector Stats in Performance tool. Issues tool warns when CSS properties trigger Layout. Memory tool loads enhanced traces larger than 1 GB. Memory tool accurately compares heap snapshots. CSS Overview accessibility improvements. Debugging Microsoft Edge in VS Code supports high contrast. And more." +description: "Aggregate Selector Stats in Performance tool. Issues tool warns when CSS properties trigger Layout. Memory tool loads enhanced traces larger than 1 GB. Memory tool accurately compares heap snapshots. CSS overview accessibility improvements. Debugging Microsoft Edge in VS Code supports high contrast. And more." author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -110,19 +110,19 @@ See also: -## Accessibility improvements for the CSS Overview tool +## Accessibility improvements for the CSS overview tool - + -In Microsoft Edge 112, the **CSS Overview** tool was updated to display a list of non-simple selectors when taking an overview snapshot of a webpage's CSS. In Microsoft Edge 114, the **Non-simple selectors** section of the **CSS Overview** tool is now easier to use with assistive technology, such as screen readers. +In Microsoft Edge 112, the **CSS overview** tool was updated to display a list of non-simple selectors when taking an overview snapshot of a webpage's CSS. In Microsoft Edge 114, the **Non-simple selectors** section of the **CSS overview** tool is now easier to use with assistive technology, such as screen readers. When you click a selector, or navigate to a selector and then press **Enter**, screen readers now announce "Copied CSS selector": -![Navigating the CSS Overview tool with the keyboard](./devtools-114-images/non-simple-selectors-css-overview-a11y.png) +![Navigating the CSS overview tool with the keyboard](./devtools-114-images/non-simple-selectors-css-overview-a11y.png) See also: -* [CSS Overview tool displays non-simple selectors for quick performance gains](../04/devtools-112.md#css-overview-tool-displays-non-simple-selectors-for-quick-performance-gains) in _What's New in DevTools (Microsoft Edge 112)_. -* [Non-simple selectors](../../../css/css-overview-tool.md#non-simple-selectors) in _Optimize CSS styles with the CSS Overview tool_. +* [CSS overview tool displays non-simple selectors for quick performance gains](../04/devtools-112.md#css-overview-tool-displays-non-simple-selectors-for-quick-performance-gains) in _What's New in DevTools (Microsoft Edge 112)_. +* [Non-simple selectors](../../../css/css-overview-tool.md#non-simple-selectors) in _Optimize CSS styles with the CSS overview tool_. * [Navigate DevTools with assistive technology](../../../accessibility/navigation.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/css-overview.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/css-overview.png new file mode 100644 index 0000000000..dc9d6ac9e6 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/css-overview.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/developer-resources-filter-box.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/developer-resources-filter-box.png new file mode 100644 index 0000000000..33e7f2d647 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/developer-resources-filter-box.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/elements-more-tabs-invoked.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/elements-more-tabs-invoked.png new file mode 100644 index 0000000000..46c5b83dfd Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/elements-more-tabs-invoked.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/elements-tab-menu.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/elements-tab-menu.png new file mode 100644 index 0000000000..4677a1f745 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/elements-tab-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/sources-tab-menu.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/sources-tab-menu.png new file mode 100644 index 0000000000..b63c6d5354 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133-images/sources-tab-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133.md b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133.md new file mode 100644 index 0000000000..b33fa7bd55 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2025/02/devtools-133.md @@ -0,0 +1,92 @@ +--- +title: What's New in DevTools (Microsoft Edge 133) +description: "Move a tab left or right within the Elements or Sources tool. Screen reader improvements. And more." +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 02/06/2025 +--- +# What's New in DevTools (Microsoft Edge 133) + +[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + +## Move a tab left or right within the Elements or Sources tool + + + +Previously, within the **Elements** tool and **Sources** tool, you could rearrange the tabs within a tab group only by dragging them. Dragging a tab can be difficult when using a trackball, head pointer, or keyboard. Now, you can also move a tab by right-clicking the tab (or pressing the **Context menu** key) and then selecting **Move left** or **Move right**. + +Right-clicking a tab within the **Elements** tool: + +![The right-click menu for a tab in the Elements tool](./devtools-133-images/elements-tab-menu.png) + +Right-clicking a tab within the **Sources** tool: + +![The right-click menu for a tab in the Sources tool](./devtools-133-images/sources-tab-menu.png) + + + +## Screen reader support improvements + + + +Support for screen readers has been improved for various tools. + + + +#### Developer resources tool + +In the **Developer resources** tool, after you search by using the **Filter by URL and error** text box, screen readers announce the results information. If no results are available, screen readers announce "No resource matches": + +![The Filter box in Developer resources](./devtools-133-images/developer-resources-filter-box.png) + + + +#### Elements tool + +In the **Elements** tool, screen readers announce the expanded or collapsed state of the **More tabs** button and tab group, shown here in the expanded state: + +![The More tabs button in the Elements tool, with the tab group expanded](./devtools-133-images/elements-more-tabs-invoked.png) + + + +#### CSS overview tool + +In the **CSS overview** tool, when navigating to a tab, screen readers announce the tab label. After entering that tab and then navigating to an **occurrences** button, screen readers announce the button's label, such as "Two occurrences": + +![The CSS overview tool](./devtools-133-images/css-overview.png) + + + +## Announcements from the Chromium project + +Microsoft Edge 133 also includes the following updates from the Chromium project: + +* [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-133#perf) + * [Image delivery insight](https://developer.chrome.com/blog/new-in-devtools-133#perf-image-delivery) + * [Classic and modern keyboard navigation](https://developer.chrome.com/blog/new-in-devtools-133#perf-nav) + * [Ignore irrelevant scripts in the flame chart](https://developer.chrome.com/blog/new-in-devtools-133#ignore-list) + * [Timeline marker and range highlighting on hover](https://developer.chrome.com/blog/new-in-devtools-133#hover-highlight) + * [Recommended throttling settings](https://developer.chrome.com/blog/new-in-devtools-133#throttling) + * [Timings markers in an overlay](https://developer.chrome.com/blog/new-in-devtools-133#markers) + * [Stack traces of JavaScript calls in Summary](https://developer.chrome.com/blog/new-in-devtools-133#perf-stack-traces) +* [Badge settings moved to menu in Elements](https://developer.chrome.com/blog/new-in-devtools-133#badge-settings) + + + + + + + + + + + + diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 325c4d29a6..115c19e139 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -71,6 +71,10 @@ href: ./devtools-guide-chromium/whats-new/whats-new.md displayName: release notes, announcements # latest 10 What's New + - name: Microsoft Edge 133 + href: ./devtools-guide-chromium/whats-new/2025/02/devtools-133.md + displayName: What's New in DevTools (Microsoft Edge 133) # page title + - name: Microsoft Edge 132 href: ./devtools-guide-chromium/whats-new/2025/01/devtools-132.md displayName: What's New in DevTools (Microsoft Edge 132) # page title @@ -107,16 +111,16 @@ href: ./devtools-guide-chromium/whats-new/2024/04/devtools-124.md displayName: What's New in DevTools (Microsoft Edge 124) # page title - - name: Microsoft Edge 123 - href: ./devtools-guide-chromium/whats-new/2024/03/devtools-123.md - displayName: What's New in DevTools (Microsoft Edge 123) # page title - # keep 10 items above - name: Archive items: - name: What's New in DevTools archive href: ./devtools-guide-chromium/whats-new/whats-new-archive.md + - name: Microsoft Edge 123 + href: ./devtools-guide-chromium/whats-new/2024/03/devtools-123.md + displayName: What's New in DevTools (Microsoft Edge 123) # page title + - name: Microsoft Edge 122 href: ./devtools-guide-chromium/whats-new/2024/02/devtools-122.md displayName: What's New in DevTools (Microsoft Edge 122) # page title @@ -536,24 +540,24 @@ items: - name: Crash analyzer tool href: ./devtools-guide-chromium/crash-analyzer/index.md -# CSS Overview tool ----------------------------------------------------------- - - name: CSS Overview tool +# CSS overview tool ----------------------------------------------------------- + - name: CSS overview tool items: - - name: Optimize CSS styles with the CSS Overview tool + - name: Optimize CSS styles with the CSS overview tool href: ./devtools-guide-chromium/css/css-overview-tool.md - displayName: CSS Overview tool + displayName: CSS overview tool # Detached Elements tool ------------------------------------------------------ - name: Detached Elements tool items: - name: Debug DOM memory leaks by using the Detached Elements tool # added article href: ./devtools-guide-chromium/memory-problems/dom-leaks.md displayName: Detached Elements tool -# Developer Resources tool ---------------------------------------------------- - - name: Developer Resources tool +# Developer resources tool ---------------------------------------------------- + - name: Developer resources tool items: - - name: Developer Resources tool + - name: Developer resources tool href: ./devtools-guide-chromium/developer-resources/developer-resources.md - displayName: Developer Resources tool + displayName: Developer resources tool # Issues tool ----------------------------------------------------------------- - name: Issues tool items: diff --git a/microsoft-edge/web-platform/release-notes/133.md b/microsoft-edge/web-platform/release-notes/133.md index 59392f852e..27df7371f8 100644 --- a/microsoft-edge/web-platform/release-notes/133.md +++ b/microsoft-edge/web-platform/release-notes/133.md @@ -58,7 +58,7 @@ To stay up-to-date and get the latest web platform features, download an Insider ## Edge DevTools -For Edge DevTools, see [What's New in Microsoft Edge DevTools](../../devtools-guide-chromium/whats-new/whats-new.md). +For Edge DevTools, see [What's New in DevTools (Microsoft Edge 133)](../../devtools-guide-chromium/whats-new/2025/02/devtools-133.md).