Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
6ba16f0
touch article
mikehoffms Oct 24, 2025
f2f7875
move pngs
mikehoffms Oct 28, 2025
8931999
My tasks page
mikehoffms Oct 28, 2025
8a30f69
finish Sample article
mikehoffms Oct 28, 2025
e60ed8e
alt text
mikehoffms Oct 28, 2025
5504798
del 4 old rows
mikehoffms Oct 28, 2025
ec28cd2
arrange code into code file
mikehoffms Oct 29, 2025
03c5c44
linkfix
mikehoffms Oct 29, 2025
59a4713
Console step
mikehoffms Oct 29, 2025
4432ef5
png in short section
mikehoffms Oct 29, 2025
e22cfa8
dedup close/reopen
mikehoffms Oct 29, 2025
c5c217d
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Nov 5, 2025
794dde4
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Nov 14, 2025
a02fc37
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Nov 26, 2025
40cacbf
ms.topic: article
mikehoffms Nov 26, 2025
4dd2c81
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Dec 15, 2025
38a743e
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Dec 18, 2025
77a1b33
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Dec 19, 2025
97a11ac
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Jan 14, 2026
be0cee6
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Jan 16, 2026
14c5e84
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Feb 12, 2026
ed3ccf7
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Feb 19, 2026
fa46f3c
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Mar 10, 2026
9924d38
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Mar 11, 2026
6ab0756
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Mar 25, 2026
abea43d
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Apr 6, 2026
2bf7425
prep
mikehoffms Apr 6, 2026
210b62b
name of tool as tool
mikehoffms Apr 7, 2026
675a1bd
linkfix
mikehoffms Apr 7, 2026
d32c46a
explain manifest members
mikehoffms Apr 7, 2026
db3b595
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Apr 16, 2026
4409a48
redesign exten toc, leading spaces
mikehoffms Apr 20, 2026
75d3fe6
yaml fix
mikehoffms Apr 20, 2026
c12f28f
yaml fix 2
mikehoffms Apr 20, 2026
d3abe1f
Revise DevTools custom tool docs and links
mikehoffms Apr 21, 2026
e45e021
sidebar
mikehoffms Apr 21, 2026
e3354fd
rename SW
mikehoffms Apr 22, 2026
8b9d26e
update sidebar.md
mikehoffms Apr 23, 2026
9af4535
local toc fix
mikehoffms Apr 23, 2026
f2e05f4
link to extension samples page
mikehoffms Apr 23, 2026
bbbbc1c
update code listings
mikehoffms Apr 24, 2026
a28cb1e
Merge branch 'main' into user/mikehoffms/devtools-extension
mikehoffms Apr 24, 2026
2d67dcd
heading todo
mikehoffms Apr 27, 2026
87536c1
inc rvw
mikehoffms May 2, 2026
ee7b11d
linkfix
mikehoffms May 2, 2026
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
6 changes: 3 additions & 3 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope

Resources:

* [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct)
* [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq)
* Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
* [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct)
* [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq)
* Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,6 @@ Be sure to include the topic title and the URL for the page.
<!-- ====================================================================== -->
## See also

* [Getting started with writing and formatting on GitHub](https://help.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github)
* [Docs Contributor Guide](https://learn.microsoft.com/contribute/)
* [README](README.md)
* [Getting started with writing and formatting on GitHub](https://help.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github)
* [Docs Contributor Guide](https://learn.microsoft.com/contribute/)
* [README](README.md)
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ For the latest implementation status and future plans for web platform features

### File names and directories

* When adding a webpage (an article implemented as a .md file), you must add an entry for the new webpage in [toc.yml](microsoft-edge/toc.yml), for the article to appear in the Table of Contents.
* When adding a webpage (an article implemented as a .md file), you must add an entry for the new webpage in [toc.yml](microsoft-edge/toc.yml), for the article to appear in the Table of Contents.

* A directory can contain more directories or `readme.md` files.
* A directory can contain more directories or `readme.md` files.

* Folder/directory names are dash-separated (for example, `f12-tools`) and lowercase. Directories are used in URLs on the `learn.microsoft.com` site. Avoid using underscores, PascalCase, or camelCase.
* Folder/directory names are dash-separated (for example, `f12-tools`) and lowercase. Directories are used in URLs on the `learn.microsoft.com` site. Avoid using underscores, PascalCase, or camelCase.


<!-- ====================================================================== -->
Expand Down
10 changes: 5 additions & 5 deletions microsoft-edge/accessibility/build/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ Visit [HTML5Accessibility](https://html5accessibility.com) for information on wh
Assistive technologies add capabilities that computers don't usually have. For example, a user who has low vision might use their keyboard in combination with assistive technology such as a screen reader, rather than directly using the browser with the mouse and screen.

For applications on Microsoft platforms and on the web, the assistive technology interacts with any combination of:
* Microsoft [UI Automation](/windows/win32/winauto/uiauto-specandcommunitypromise).
* An application-specific object model such as the Document Object Model (DOM) in Microsoft Edge.
* Microsoft [UI Automation](/windows/win32/winauto/uiauto-specandcommunitypromise).
* An application-specific object model such as the Document Object Model (DOM) in Microsoft Edge.

For web developers, certain HTML elements are mapped to UI Automation objects, so in selecting those HTML elements, the developer can use the accessibility properties and events built in to those elements. While developing your website, you usually only need to make sure that the API is correctly written to, or that the appropriate element is specified, for the application to be accessible.

Expand Down Expand Up @@ -77,8 +77,8 @@ Verifying that the website you are building works with real assistive technologi

Once you are confident that your website works well with a keyboard, try it with other assistive technologies, such as screen readers. This testing can uncover issues in the following:

* Your HTML, ARIA, and CSS.
* The level of support of an assistive technology for a feature or technique.
* Your HTML, ARIA, and CSS.
* The level of support of an assistive technology for a feature or technique.

Different browsers might map elements to the platform accessibility APIs differently than Microsoft Edge maps them. While building your interface, it's important to consider each difference.

Expand Down Expand Up @@ -116,7 +116,7 @@ Under macOS, if you want to test with an assistive technology only available for

If an assistive technology isn't available on your OS or you not possible to install one on a virtual machine or emulator, cloud-based assistive technology testing tools are the next best thing.

* [Assistiv Labs](https://assistivlabs.com) (a commercial product) enables you to manually test with assistive technologies through any modern web browser. Select an assistive technology and browser and it connects you with a virtual machine, emulator, or real device that you can interact with.
* [Assistiv Labs](https://assistivlabs.com) (a commercial product) enables you to manually test with assistive technologies through any modern web browser. Select an assistive technology and browser and it connects you with a virtual machine, emulator, or real device that you can interact with.

See also [Cloud-based emulators and simulators](../../devtools/device-mode/testing-other-browsers.md#cloud-based-emulators-and-simulators).

Expand Down
16 changes: 8 additions & 8 deletions microsoft-edge/accessibility/design.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ Users who are blind or who have low vision rely on screen readers to interpret a

Many accessibility users rely on the keyboard to navigate and operate the UI by:

* Moving focus among elements by pressing the **Tab** key or **Shift+Tab** keys.
* Moving focus among elements by pressing the **Tab** key or **Shift+Tab** keys.

* Navigating in container elements such as lists, grids, and tree views by using the arrow keys.
* Navigating in container elements such as lists, grids, and tree views by using the arrow keys.

* Invoking actions by pressing the **Enter** key or **Spacebar**.
* Invoking actions by pressing the **Enter** key or **Spacebar**.

* Using shortcut keys to efficiently access other app functionality.
* Using shortcut keys to efficiently access other app functionality.


<!-- ====================================================================== -->
Expand All @@ -50,10 +50,10 @@ Many common accessibility issues on the web can be solved through good coding pr
<!-- ====================================================================== -->
## Resources

* [Designing for Inclusion](https://w3.org/WAI/users/Overview.html) - Designing for Inclusion by the W3C Web Accessibility Initiative provides resources to help you better understand users with disabilities and how to design your website with them in mind.
* [Designing for Inclusion](https://w3.org/WAI/users/Overview.html) - Designing for Inclusion by the W3C Web Accessibility Initiative provides resources to help you better understand users with disabilities and how to design your website with them in mind.

* [Designing inclusive software](https://msdn.microsoft.com/windows/uwp/accessibility/designing-inclusive-software) - Designing inclusive software discusses Microsoft design principles and practices for the Universal Windows Platform (UWP).
* [Designing inclusive software](https://msdn.microsoft.com/windows/uwp/accessibility/designing-inclusive-software) - Designing inclusive software discusses Microsoft design principles and practices for the Universal Windows Platform (UWP).

* [How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/Overview.html) - This resource by the W3C introduces how people with disabilities, including people with age-related impairments, use the Web.
* [How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/Overview.html) - This resource by the W3C introduces how people with disabilities, including people with age-related impairments, use the Web.

* [Inclusive Design Toolkit](https://www.microsoft.com/design/practice#howwemake-section) - Microsoft developed the Inclusive Design Toolkit to show how human diversity can create better design constraints and how to connect seemingly niche solutions to broader markets.
* [Inclusive Design Toolkit](https://www.microsoft.com/design/practice#howwemake-section) - Microsoft developed the Inclusive Design Toolkit to show how human diversity can create better design constraints and how to connect seemingly niche solutions to broader markets.
10 changes: 5 additions & 5 deletions microsoft-edge/accessibility/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ The articles in this Accessibility section present some best practices, code sam

Microsoft Edge DevTools is built into the Microsoft Edge browser, and includes many accessibility-testing features, to test aspects of webpages including:

* Alt-text for images, and screen reader support.
* Keyboard support.
* Text contrast.
* Usability with vision deficiencies.
* Usability when the browser is narrow.
* Alt-text for images, and screen reader support.
* Keyboard support.
* Text contrast.
* Usability with vision deficiencies.
* Usability when the browser is narrow.

See:

Expand Down
14 changes: 7 additions & 7 deletions microsoft-edge/accessibility/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,20 +58,20 @@ You can also use the assessment feature of [Accessibility Insights](https://acce
<!-- ====================================================================== -->
## External articles and websites

* [Assistive technology compatibility tests](http://www.powermapper.com/tests) - Test results showing how different content types and standards behave in assistive technologies (AT) such as screen readers.
* [Assistive technology compatibility tests](http://www.powermapper.com/tests) - Test results showing how different content types and standards behave in assistive technologies (AT) such as screen readers.

* [HTML5Accessibility](https://html5accessibility.com) - This site tests which new HTML5 features are accessibly supported by major browsers.
* [HTML5Accessibility](https://html5accessibility.com) - This site tests which new HTML5 features are accessibly supported by major browsers.

* [webhint](https://webhint.io) - Use webhint to check for out-of-date libraries, security improvements, performance problems, and accessibility issues.
* [webhint](https://webhint.io) - Use webhint to check for out-of-date libraries, security improvements, performance problems, and accessibility issues.

* [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html) - A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines.
* [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html) - A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines.


<!-- ====================================================================== -->
## The Web Accessibility Initiative (WAI)

* [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) - Approaches for evaluating websites for accessibility.
* [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 webpage.
* [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.
* [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.
28 changes: 14 additions & 14 deletions microsoft-edge/develop-web-microsoft-edge.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@ The Microsoft Edge browser comes with built-in web development tools, called Mic

With DevTools, you can do the following:

* Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including `.html`, `.css`, `.js`, and `.png` file formats.
* Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including `.html`, `.css`, `.js`, and `.png` file formats.

* Emulate how your webpage behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems.
* Emulate how your webpage behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems.

* Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps.
* Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps.

* Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found.
* Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found.

* Use a development environment to sync changes in DevTools with the file system and from the web.
* Use a development environment to sync changes in DevTools with the file system and from the web.

<!-- /keep sync'd -->

Expand All @@ -70,9 +70,9 @@ You can create a Microsoft Edge extension if you have an idea or product that is

A Microsoft Edge extension is structured similarly to a regular web app, and usually includes:

* An app manifest JSON file that contains basic platform information.
* A JavaScript file that defines the behavior of the browser extension.
* HTML and CSS files that define the user interface.
* An app manifest JSON file that contains basic platform information.
* A JavaScript file that defines the behavior of the browser extension.
* HTML and CSS files that define the user interface.

See [Overview of Microsoft Edge extensions](./extensions/index.md).

Expand Down Expand Up @@ -111,12 +111,12 @@ See [Introduction to Microsoft Edge WebView2](./webview2/index.md).

The following are tools to automate testing in Microsoft Edge:

* **DevTools Protocol** is used to instrument, inspect, debug, and profile browsers.
* Use **origin trials** to try experimental APIs.
* **Playwright** provides cross-browser automation through a single API.
* **Puppeteer**'s API controls Microsoft Edge via DevTools Protocol.
* **WebDriver** simulates user interaction with Microsoft Edge.
* **webhint** linting checks code for errors and best practices.
* **DevTools Protocol** is used to instrument, inspect, debug, and profile browsers.
* Use **origin trials** to try experimental APIs.
* **Playwright** provides cross-browser automation through a single API.
* **Puppeteer**'s API controls Microsoft Edge via DevTools Protocol.
* **WebDriver** simulates user interaction with Microsoft Edge.
* **webhint** linting checks code for errors and best practices.

See [Test and automation in Microsoft Edge](./test-and-automation/test-and-automation.md).

Expand Down
5 changes: 4 additions & 1 deletion microsoft-edge/developer/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,12 @@ landingContent:
- text: Overview of Microsoft Edge extensions
url: ../extensions/index.md

- text: Extension concepts and architecture
- text: Get started developing an extension
url: ../extensions/getting-started/index.md

- text: Extension concepts and architecture
url: ../extensions/getting-started/architecture.md

- linkListType: sample
links:
- text: "Sample: Picture viewer pop-up webpage"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,21 +65,21 @@ See also:

To delete a specific network blocking request pattern:

* In the **Network request blocking** table, hover over a network blocking request pattern, and then click the **Remove** (![Remove blocked request icon](./network-request-blocking-tool-images/remove-blocked-request-icon.png)) button:
* In the **Network request blocking** table, hover over a network blocking request pattern, and then click the **Remove** (![Remove blocked request icon](./network-request-blocking-tool-images/remove-blocked-request-icon.png)) button:

![Removing a blocked request](./network-request-blocking-tool-images/remove-blocked-request.png)

To delete all network blocking requests at once:

* In the toolbar, click the **Remove all patterns** (![Remove all blocked requests icon](./network-request-blocking-tool-images/remove-all-blocked-requests-icon.png)) button.
* In the toolbar, click the **Remove all patterns** (![Remove all blocked requests icon](./network-request-blocking-tool-images/remove-all-blocked-requests-icon.png)) button.


<!-- ====================================================================== -->
## Modify a blocked network request

To change an existing blocked network request:

* In the **Network request blocking** table, hover over a blocked network request, and then click **Edit** (![edit blocked request icon](./network-request-blocking-tool-images/edit-blocked-request-icon.png)):
* In the **Network request blocking** table, hover over a blocked network request, and then click **Edit** (![edit blocked request icon](./network-request-blocking-tool-images/edit-blocked-request-icon.png)):

![Editing a blocked request](./network-request-blocking-tool-images/edit-blocked-request.png)

Expand All @@ -89,7 +89,7 @@ To change an existing blocked network request:

To toggle network request blocking without having to delete and re-create all of the blocked network requests:

* In the toolbar, select or clear the **Enable network request blocking** checkbox:
* In the toolbar, select or clear the **Enable network request blocking** checkbox:

![Toggling network request blocking](./network-request-blocking-tool-images/toggle-request-blocking.png)

Expand Down
Loading