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 @@ -45,9 +45,11 @@ The **Memory inspector** tool provides greater ability than the **Sources** tool
## Open Memory inspector while debugging
<!-- some initial content was from [New Memory inspector tool](../whats-new/2021/04/devtools.md#new-memory-inspector-tool) in _What's New in DevTools (Microsoft Edge 91)_. -->

For example:

1. Start Microsoft Edge.

1. Open the test site [Inspect ArrayBuffers in JS (Memory in JS)](http://memory-inspector.glitch.me/demo-js.html). <!-- todo: copy code to https://github.com/MicrosoftEdge/Demos and link to there -->
1. Open the test site **Inspect ArrayBuffers in JS (Memory in JS)** (`http://memory-inspector.glitch.me/demo-js.html`)<!-- todo: copy code to https://github.com/MicrosoftEdge/Demos and link to there --> (404). (Glitch.me project hosting ended July 8, 2025. This test site is planned to move to https://github.com/MicrosoftEdge/Demos, including hosting at github.io.)

1. Open DevTools by pressing **F12** or **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).

Expand Down Expand Up @@ -177,7 +179,9 @@ Complete the following steps to debug a webpage in Memory inspector.

For WebAssembly (Wasm) memory inspection, the process is similar to inspecting JavaScript memory.

1. Open the Wasm test site [Inspect Wasm memories (Memory in Wasm)](http://memory-inspector.glitch.me/demo-wasm.html). <!-- To do item: copy to Microsoft Repo and reference there -->
For example:

1. Open the test site **Inspect Wasm memories (Memory in Wasm)** (`http://memory-inspector.glitch.me/demo-wasm.html`)<!-- todo: copy code to https://github.com/MicrosoftEdge/Demos and link to there --> (404). (Glitch.me project hosting ended July 8, 2025. This test site is planned to move to https://github.com/MicrosoftEdge/Demos, including hosting at github.io.)

1. Open DevTools by pressing **F12** or **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).

Expand Down
8 changes: 6 additions & 2 deletions microsoft-edge/devtools/whats-new/2020/10/devtools.md
Original file line number Diff line number Diff line change
Expand Up @@ -306,9 +306,13 @@ See also:
<!-- ------------------------------ -->
#### 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.

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).
For example, the **CSS overview Accessible Colors Demo** (`https://css-overview-accessible-colors-demo.glitch.me`) (404) page has an example of a color contrast issue. (Glitch.me project hosting ended July 8, 2025. This test site might move to https://github.com/MicrosoftEdge/Demos, including hosting at github.io.)

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, Microsoft Edge DevTools automatically provides color suggestions; see [Accessible color suggestion in the Styles pane](../08/devtools.md#accessible-color-suggestion-in-the-styles-pane) in _What's New in DevTools (Microsoft Edge 86)_.

![Color contrast issues](./devtools-images/css-overview.png)

Expand Down
16 changes: 14 additions & 2 deletions microsoft-edge/devtools/whats-new/2020/11/devtools.md
Original file line number Diff line number Diff line change
Expand Up @@ -285,9 +285,21 @@ For more information, see [Emulate mobile devices (Device Emulation)](../../../d
<!-- ------------------------------ -->
#### Report CORS errors in the Network tool

Try out this feature by navigating to [CORS error demo](https://cors-errors.glitch.me). Open the **Network** tool, refresh the page, and observe the failed CORS network request. The status column displays the **CORS error**. When you hover on the error, the tooltip now displays the error code. In Microsoft Edge version 87 and earlier, DevTools only displayed generic **(failed)** status for CORS errors.
The **Network** tool now displays specific status for CORS errors. For example:

![CORS errors](./devtools-images/cors-err.png)
1. Go to **CORS error demo** (`https://cors-errors.glitch.me`)<!-- todo: copy code to https://github.com/MicrosoftEdge/Demos and link to there --> (404). (Glitch.me project hosting ended July 8, 2025. This test site might move to https://github.com/MicrosoftEdge/Demos, including hosting at github.io.)

1. Open the **Network** tool, refresh the page, and observe the failed CORS network request.

The status column displays the **CORS error**.

1. Hover over the error.

The tooltip now displays the error code:

![CORS errors](./devtools-images/cors-err.png)

In Microsoft Edge version 87 and earlier, DevTools only displayed generic **(failed)** status for CORS errors.

For real-time updates on this feature in the Chromium open-source project, see Issue [1141824](https://crbug.com/1141824).

Expand Down
4 changes: 2 additions & 2 deletions microsoft-edge/devtools/whats-new/2021/05/devtools.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ Cross-origin resource sharing (CORS) errors are now surfaced in the **Issues** t

![CORS issues in the Issues tab](./devtools-images/cors-debugging-support.png)

<!-- screenshot uses http://cors-errors.glitch.me -->
<!-- screenshot uses http://cors-errors.glitch.me - glitch.me project hosting ended July 8, 2025; could move to https://github.com/MicrosoftEdge/Demos, including hosting at github.io -->

See also:
* [Report CORS errors in the Network tool](../../2020/11/devtools.md#report-cors-errors-in-the-network-tool) in _What's New in DevTools (Microsoft Edge 88)_
Expand Down Expand Up @@ -258,7 +258,7 @@ For the history of this feature in the Chromium open-source project, see Issue [
In the **Network** tool, you can now select the new **Wasm** filter to filter the WebAssembly network requests.

![Filter by Wasm](./devtools-images/wasm-network-requests.png)
<!-- screenshot uses http://memory-inspector.glitch.me/demo-wasm.html -->
<!-- screenshot uses http://memory-inspector.glitch.me/demo-wasm.html - glitch.me project hosting ended July 8, 2025; could move to https://github.com/MicrosoftEdge/Demos, including hosting at github.io -->

See also:
* [Filter resources](../../../network/index.md#filter-resources) in _Inspect network activity_
Expand Down