Merge pull request #3374 from MicrosoftDocs/user/leahtu/whats-new-133

What's New in DevTools (Microsoft Edge 133)

Author: captainbrosset

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.

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) |

microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md

@@ -1,46 +1,46 @@
 ---
-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
 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)
 
 
 <!-- ====================================================================== -->
 ## Capture a CSS overview report
 
 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.
 

microsoft-edge/devtools-guide-chromium/developer-resources/developer-resources.md

@@ -1,15 +1,15 @@
 ---
-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
 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)

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.<!-- To enable this experiment, under **Settings** > **Experiments**, select the **CSS Overview** checkbox. -->
+Update: This feature has been released and is no longer experimental.<!-- To enable this experiment, under **Settings** > **Experiments**, select the **CSS overview** checkbox. -->
 
 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).
 

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
 
-<!-- Subtitle: Non-simple selectors can be common culprits for long-running Recalculate Styles events in the Performance tool. Take a quick snapshot in the CSS Overview tool to see your non-simple selectors. -->
+<!-- Subtitle: Non-simple selectors can be common culprits for long-running Recalculate Styles events in the Performance tool. Take a quick snapshot in the CSS overview tool to see your non-simple selectors. -->
 
-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)
 
 

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
 
-<!-- Subtitle: The CSS Overview tool is now easier to use with assistive technology such as screen readers. -->
+<!-- Subtitle: 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.
+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)