Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The W3C defines Accessible Rich Internet Applications (ARIA) as a syntax for mak

Visit [HTML5Accessibility](https://html5accessibility.com) for information on which new HTML5 features are accessibly supported by Microsoft Edge.

The Microsoft Edge rendering engine builds an accessible projection of web pages, conforming to the following W3C specifications.
The Microsoft Edge rendering engine builds an accessible projection of webpages, conforming to the following W3C specifications.


<!-- ====================================================================== -->
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/accessibility/build/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ This W3C mapping document explains how the semantics of web content languages ar
<!-- ------------------------------ -->
#### Easy Checks – A First Review of Web Accessibility

A series of quick checks by the WAI that help you assess the accessibility of a web page. For more information, go to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html).
A series of quick checks by the WAI that help you assess the accessibility of a webpage. For more information, go to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html).


<!-- ------------------------------ -->
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/accessibility/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,6 @@ You can also use the assessment feature of [Accessibility Insights](https://acce

* [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) - Approaches for evaluating websites for accessibility.

* [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) - Quick checks that help you assess the accessibility of a web page.
* [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) - Quick checks that help you assess the accessibility of a webpage.

* [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref) - A quick reference to Web Content Accessibility Guidelines (WCAG), requirements, success criteria, and techniques.
5 changes: 4 additions & 1 deletion microsoft-edge/develop-web-microsoft-edge.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@ ms.date: 02/06/2025

Develop for the web with Microsoft Edge by using standards-based web platform features, Microsoft Edge DevTools, Microsoft Edge extensions, Progressive Web Apps, WebDriver automation, WebView2, and more.

For end-user documentation about how to use Microsoft Edge, see [Microsoft Edge help & learning](https://support.microsoft.com/microsoft-edge).
For end-user documentation about how to use Microsoft Edge, see:

* [Get to know Microsoft Edge](https://www.microsoft.com/edge/)
* [Microsoft Edge help & learning](https://support.microsoft.com/microsoft-edge)


<!-- ====================================================================== -->
Expand Down
6 changes: 3 additions & 3 deletions microsoft-edge/developer/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ landingContent:

- linkListType: whats-new
links:
- text: What's New in Microsoft Edge DevTools
- text: What's new in Microsoft Edge DevTools
url: ../devtools/whats-new/whats-new.md

- linkListType: how-to-guide
Expand Down Expand Up @@ -152,7 +152,7 @@ landingContent:

- linkListType: whats-new
links:
- text: What's New in PWAs
- text: What's new in PWAs
url: ../progressive-web-apps/whats-new/pwa.md

- linkListType: get-started
Expand Down Expand Up @@ -204,7 +204,7 @@ landingContent:
url: ../webview2/samples/index.md
- linkListType: whats-new
links:
- text: Release Notes for the WebView2 SDK
- text: Release notes for the WebView2 SDK
url: ../webview2/release-notes/index.md
- linkListType: reference
links:
Expand Down
4 changes: 2 additions & 2 deletions microsoft-edge/devtools/about-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ By default, the following tools are listed in the **Activity Bar** at the top of
| --- | --- | --- |
| ![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) |
| ![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) |
Expand All @@ -64,7 +64,7 @@ There's also a **More tools** (![More Tools icon](./about-tools-images/more-tool

| Tool | Purpose | Article |
| --- | --- | --- |
| **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) |
| **3D View** | Explore the webpage 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) |
Expand Down
34 changes: 17 additions & 17 deletions microsoft-edge/devtools/accessibility/reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ This article lists typical accessibility aspects to test for webpages, and the c

| Accessibility aspect to check | Feature of DevTools | Article |
|---|---|---|
| Verify that images have alt text | **Issues** tool > **Accessibility** section of report | [Verify that images have alt text](test-issues-tool.md#verify-that-images-have-alt-text) in _Automatically test a webpage for accessibility issues_ |
| Verify that images have alt text | **Issues** tool > **Accessibility** section of report | [Verify that images have alt text](./test-issues-tool.md#verify-that-images-have-alt-text) in _Automatically test a webpage for accessibility issues_ |
| Verify that images have alt text | **Lighthouse** tool > Issues about alt-text | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |


Expand All @@ -27,11 +27,11 @@ This article lists typical accessibility aspects to test for webpages, and the c

| Accessibility aspect to check | Feature of DevTools | Article |
|---|---|---|
| Verify keyboard support | **Inspect** tool > **Accessibility** section of overlay | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
| Verify keyboard support | **Tab**, **Shift+Tab**, and **Enter** keys | [Check for keyboard support by using the Tab and Enter keys](test-tab-enter-keys.md) |
| Verify keyboard support: verify that focus is indicated | **Inspect** tool, **Styles** tab, and **Sources** tool | [Analyze the lack of indication of keyboard focus](test-analyze-no-focus-indicator.md) |
| Verify keyboard support: verify that form buttons can be used with the keyboard | **Inspect** tool, **DOM tree** in the **Elements** tool, and **Event Listeners** tab | [Analyze the lack of keyboard support in a form](test-analyze-no-keyboard-support.md) |
| Verify keyboard support: verify **Tab** key order | **Elements** tool > **Accessibility** tab > **Source Order Viewer** | [Test keyboard support using the Source Order Viewer](test-tab-key-source-order-viewer.md) |
| Verify keyboard support | **Inspect** tool > **Accessibility** section of overlay | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](./test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
| Verify keyboard support | **Tab**, **Shift+Tab**, and **Enter** keys | [Check for keyboard support by using the Tab and Enter keys](./test-tab-enter-keys.md) |
| Verify keyboard support: verify that focus is indicated | **Inspect** tool, **Styles** tab, and **Sources** tool | [Analyze the lack of indication of keyboard focus](./test-analyze-no-focus-indicator.md) |
| Verify keyboard support: verify that form buttons can be used with the keyboard | **Inspect** tool, **DOM tree** in the **Elements** tool, and **Event Listeners** tab | [Analyze the lack of keyboard support in a form](./test-analyze-no-keyboard-support.md) |
| Verify keyboard support: verify **Tab** key order | **Elements** tool > **Accessibility** tab > **Source Order Viewer** | [Test keyboard support using the Source Order Viewer](./test-tab-key-source-order-viewer.md) |
| Verify keyboard support | **Lighthouse** tool > Issues about keyboard support | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |


Expand All @@ -40,11 +40,11 @@ This article lists typical accessibility aspects to test for webpages, and the c

| Accessibility aspect to check | Feature of DevTools | Article |
|---|---|---|
| Verify that text has enough contrast (automatically, for the entire page) | **Issues** tool > **Accessibility** section of report | [Verify that text colors have enough contrast](test-issues-tool.md#verify-that-text-colors-have-enough-contrast) in _Automatically test a webpage for accessibility issues_ |
| Verify that text has enough contrast | **Elements** tool > **Styles** tab > **Color Picker** | [Test text-color contrast using the Color Picker](color-picker.md) |
| Verify that text has enough contrast | **Inspect** tool > **Accessibility** section of overlay > **Contrast** row | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
| Verify that text has enough contrast: in the hover state | **Elements** tool > **Styles** tab > **Toggle Element State** (shows **Force element state** checkboxes) | [Verify accessibility of all states of elements](test-inspect-states.md) |
| Verify that text has enough contrast: with dark theme (dark mode) and light theme | **Rendering** tool > **Emulate CSS media feature prefers-color-scheme** | [Check for contrast issues with dark theme and light theme](test-dark-mode.md) |
| Verify that text has enough contrast (automatically, for the entire page) | **Issues** tool > **Accessibility** section of report | [Verify that text colors have enough contrast](./test-issues-tool.md#verify-that-text-colors-have-enough-contrast) in _Automatically test a webpage for accessibility issues_ |
| Verify that text has enough contrast | **Elements** tool > **Styles** tab > **Color Picker** | [Test text-color contrast using the Color Picker](./color-picker.md) |
| Verify that text has enough contrast | **Inspect** tool > **Accessibility** section of overlay > **Contrast** row | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](./test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
| Verify that text has enough contrast: in the hover state | **Elements** tool > **Styles** tab > **Toggle Element State** (shows **Force element state** checkboxes) | [Verify accessibility of all states of elements](./test-inspect-states.md) |
| Verify that text has enough contrast: with dark theme (dark mode) and light theme | **Rendering** tool > **Emulate CSS media feature prefers-color-scheme** | [Check for contrast issues with dark theme and light theme](./test-dark-mode.md) |
| Verify that text has enough contrast (automatically, for the entire page) | **Lighthouse** tool > Issues about text contrast | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |


Expand All @@ -53,9 +53,9 @@ This article lists typical accessibility aspects to test for webpages, and the c

| Accessibility aspect to check | Feature of DevTools | Article |
|---|---|---|
| Verify screen reader support: Verify that input fields have labels | **Issues** tool > **Accessibility** section of report | [Verify that input fields have labels](test-issues-tool.md#verify-that-input-fields-have-labels) in _Automatically test a webpage for accessibility issues_ |
| Verify screen reader support | **Inspect** tool > **Accessibility** section of overlay > **Name** and **Role** | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
| Verify screen reader support | **Elements** tool > **Accessibility** tab > **Accessibility Tree** | [Check the Accessibility Tree for keyboard and screen reader support](test-accessibility-tree.md), and [Test accessibility using the Accessibility tab](accessibility-tab.md) |
| Verify screen reader support: Verify that input fields have labels | **Issues** tool > **Accessibility** section of report | [Verify that input fields have labels](./test-issues-tool.md#verify-that-input-fields-have-labels) in _Automatically test a webpage for accessibility issues_ |
| Verify screen reader support | **Inspect** tool > **Accessibility** section of overlay > **Name** and **Role** | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](./test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
| Verify screen reader support | **Elements** tool > **Accessibility** tab > **Accessibility Tree** | [Check the Accessibility Tree for keyboard and screen reader support](./test-accessibility-tree.md), and [Test accessibility using the Accessibility tab](./accessibility-tab.md) |
| Verify screen reader support | **Lighthouse** tool > Issues about screen reader support | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |


Expand All @@ -64,9 +64,9 @@ This article lists typical accessibility aspects to test for webpages, and the c

| Accessibility aspect to check | Feature of DevTools | Article |
|---|---|---|
| Verify that the webpage is usable by people with color blindness | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable by people with color blindness](test-color-blindness.md) |
| Verify that the webpage is usable with blurred vision | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable with blurred vision](test-blurred-vision.md) |
| Verify that the webpage is usable with UI animation turned off (reduced motion) | **Rendering** tool > **Emulate CSS media feature prefers-reduced-motion** | [Verify that a page is usable with UI animation turned off](test-reduced-ui-motion.md) |
| Verify that the webpage is usable by people with color blindness | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable by people with color blindness](./test-color-blindness.md) |
| Verify that the webpage is usable with blurred vision | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable with blurred vision](./test-blurred-vision.md) |
| Verify that the webpage is usable with UI animation turned off (reduced motion) | **Rendering** tool > **Emulate CSS media feature prefers-reduced-motion** | [Verify that a page is usable with UI animation turned off](./test-reduced-ui-motion.md) |
| Verify that the webpage is usable by people with vision deficiencies | **Lighthouse** tool > Issues about vision deficiencies | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ The **Console** reports network errors.

1. Click the link to the webpage and line of code where the error occurs, to open the Sources tool. That is, click the `network-error.html:40` link in the **Console**:

![Select the link to the webpage and line of code where the error occurs, to open the Sources tool](./console-debug-javascript-images/network-error-code-line.png)
![Console tool error with clickable filename and line number](./console-debug-javascript-images/network-error-code-line.png)

The **Sources** tool opens. The problematic line of code is highlighted and followed by an `error` (`x`) button.

Expand Down
6 changes: 3 additions & 3 deletions microsoft-edge/devtools/console/copilot-explain-console.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,17 @@ To use Copilot to explain an error or warning in the **Console** tool:

1. If not done already, [enable Copilot in Edge](#enable-copilot-in-edge), as described above.

1. Open a web page that contains the errors you want to explain. For example, open the [Console error explainer test page](https://microsoftedge.github.io/Demos/devtools-explain-error/) in a new window or tab.
1. Open a webpage that contains the errors you want to explain. For example, open the [Console error explainer test page](https://microsoftedge.github.io/Demos/devtools-explain-error/) in a new window or tab.

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 **Console** tab.

1. In the rendered web page, click the **Run** button next to one or more error descriptions.
1. In the rendered webpage, click the **Run** button next to one or more error descriptions.

The demo page then generates errors, which are shown in the **Console**:

![The demo web page in Edge, with the DevTools Console next to it, showing a few error messages](./copilot-explain-console-images/some-console-errors.png)
![The demo webpage in Edge, with the DevTools Console next to it, showing a few error messages](./copilot-explain-console-images/some-console-errors.png)

1. In the **Console** tool, click the **ask Copilot: "Explain this error"** (![The explain error icon in the Console](./copilot-explain-console-images/explain-icon.png)) button next to one of the error messages.

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/crash-analyzer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ External links:

<!--
not used in .md above:
What's New entries:
What's new entries:
* [Crash analyzer tool is available by default](../whats-new/2024/03/devtools-123.md#crash-analyzer-tool-is-available-by-default) in _What's new in DevTools (Microsoft Edge 123)_.
* [Debug JavaScript error stack traces by using the Crash Analyzer tool](../whats-new/2023/05/devtools-113.md#debug-javascript-error-stack-traces-by-using-the-crash-analyzer-tool) in _What's new in DevTools (Microsoft Edge 113)_.
-->
Loading