You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: microsoft-edge/accessibility/build/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -225,7 +225,7 @@ This W3C mapping document explains how the semantics of web content languages ar
225
225
<!-- ------------------------------ -->
226
226
#### Easy Checks – A First Review of Web Accessibility
227
227
228
-
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).
228
+
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).
Copy file name to clipboardExpand all lines: microsoft-edge/accessibility/test.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -72,6 +72,6 @@ You can also use the assessment feature of [Accessibility Insights](https://acce
72
72
73
73
*[Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) - Approaches for evaluating websites for accessibility.
74
74
75
-
*[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.
75
+
*[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.
76
76
77
77
*[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.
Copy file name to clipboardExpand all lines: microsoft-edge/develop-web-microsoft-edge.md
+4-1Lines changed: 4 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,10 @@ ms.date: 02/06/2025
11
11
12
12
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.
13
13
14
-
For end-user documentation about how to use Microsoft Edge, see [Microsoft Edge help & learning](https://support.microsoft.com/microsoft-edge).
14
+
For end-user documentation about how to use Microsoft Edge, see:
15
+
16
+
*[Get to know Microsoft Edge](https://www.microsoft.com/edge/)
17
+
*[Microsoft Edge help & learning](https://support.microsoft.com/microsoft-edge)
Copy file name to clipboardExpand all lines: microsoft-edge/devtools/about-tools.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ By default, the following tools are listed in the **Activity Bar** at the top of
39
39
| --- | --- | --- |
40
40
|**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)|
41
41
|**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)|
42
-
|**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)|
42
+
|**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)|
43
43
|**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)|
44
44
|**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)|
45
45
|**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)|
@@ -64,7 +64,7 @@ There's also a **More tools** (|
67
+
|**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)|
68
68
|**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)|
69
69
|**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)|
70
70
|**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)|
Copy file name to clipboardExpand all lines: microsoft-edge/devtools/accessibility/reference.md
+17-17Lines changed: 17 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ This article lists typical accessibility aspects to test for webpages, and the c
18
18
19
19
| Accessibility aspect to check | Feature of DevTools | Article |
20
20
|---|---|---|
21
-
| 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_|
21
+
| 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_|
22
22
| Verify that images have alt text |**Lighthouse** tool > Issues about alt-text |[Test accessibility using Lighthouse](../accessibility/lighthouse.md)|
23
23
24
24
@@ -27,11 +27,11 @@ This article lists typical accessibility aspects to test for webpages, and the c
27
27
28
28
| Accessibility aspect to check | Feature of DevTools | Article |
29
29
|---|---|---|
30
-
| 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)|
31
-
| 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)|
32
-
| 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)|
33
-
| 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)|
34
-
| 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)|
30
+
| 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)|
31
+
| 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)|
32
+
| 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)|
33
+
| 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)|
34
+
| 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)|
35
35
| Verify keyboard support |**Lighthouse** tool > Issues about keyboard support |[Test accessibility using Lighthouse](../accessibility/lighthouse.md)|
36
36
37
37
@@ -40,11 +40,11 @@ This article lists typical accessibility aspects to test for webpages, and the c
40
40
41
41
| Accessibility aspect to check | Feature of DevTools | Article |
42
42
|---|---|---|
43
-
| 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_|
44
-
| Verify that text has enough contrast |**Elements** tool > **Styles** tab > **Color Picker**|[Test text-color contrast using the Color Picker](color-picker.md)|
45
-
| 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)|
46
-
| 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)|
47
-
| 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)|
43
+
| 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_|
44
+
| Verify that text has enough contrast |**Elements** tool > **Styles** tab > **Color Picker**|[Test text-color contrast using the Color Picker](./color-picker.md)|
45
+
| 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)|
46
+
| 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)|
47
+
| 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)|
48
48
| Verify that text has enough contrast (automatically, for the entire page) |**Lighthouse** tool > Issues about text contrast |[Test accessibility using Lighthouse](../accessibility/lighthouse.md)|
49
49
50
50
@@ -53,9 +53,9 @@ This article lists typical accessibility aspects to test for webpages, and the c
53
53
54
54
| Accessibility aspect to check | Feature of DevTools | Article |
55
55
|---|---|---|
56
-
| 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_|
57
-
| 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)|
58
-
| 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)|
56
+
| 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_|
57
+
| 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)|
58
+
| 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)|
59
59
| Verify screen reader support |**Lighthouse** tool > Issues about screen reader support |[Test accessibility using Lighthouse](../accessibility/lighthouse.md)|
60
60
61
61
@@ -64,9 +64,9 @@ This article lists typical accessibility aspects to test for webpages, and the c
64
64
65
65
| Accessibility aspect to check | Feature of DevTools | Article |
66
66
|---|---|---|
67
-
| 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)|
68
-
| 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)|
69
-
| 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)|
67
+
| 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)|
68
+
| 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)|
69
+
| 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)|
70
70
| Verify that the webpage is usable by people with vision deficiencies |**Lighthouse** tool > Issues about vision deficiencies |[Test accessibility using Lighthouse](../accessibility/lighthouse.md)|
Copy file name to clipboardExpand all lines: microsoft-edge/devtools/console/console-debug-javascript.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -64,7 +64,7 @@ The **Console** reports network errors.
64
64
65
65
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**:
66
66
67
-

67
+

68
68
69
69
The **Sources** tool opens. The problematic line of code is highlighted and followed by an `error` (`x`) button.
Copy file name to clipboardExpand all lines: microsoft-edge/devtools/console/copilot-explain-console.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,17 +53,17 @@ To use Copilot to explain an error or warning in the **Console** tool:
53
53
54
54
1. If not done already, [enable Copilot in Edge](#enable-copilot-in-edge), as described above.
55
55
56
-
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.
56
+
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.
57
57
58
58
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.
59
59
60
60
1. In DevTools, on the **Activity Bar**, select the **Console** tab.
61
61
62
-
1. In the rendered web page, click the **Run** button next to one or more error descriptions.
62
+
1. In the rendered webpage, click the **Run** button next to one or more error descriptions.
63
63
64
64
The demo page then generates errors, which are shown in the **Console**:
65
65
66
-

66
+

67
67
68
68
1. In the **Console** tool, click the **ask Copilot: "Explain this error"** () button next to one of the error messages.
Copy file name to clipboardExpand all lines: microsoft-edge/devtools/crash-analyzer/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -257,7 +257,7 @@ External links:
257
257
258
258
<!--
259
259
not used in .md above:
260
-
What's New entries:
260
+
What's new entries:
261
261
* [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)_.
262
262
* [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)_.
0 commit comments