diff --git a/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md b/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md index d9f7c99e38..3c68a0ce1d 100644 --- a/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md +++ b/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md @@ -45,9 +45,11 @@ The **Memory inspector** tool provides greater ability than the **Sources** tool ## Open Memory inspector while debugging +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). +1. Open the test site **Inspect ArrayBuffers in JS (Memory in JS)** (`http://memory-inspector.glitch.me/demo-js.html`) (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). @@ -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). +For example: + +1. Open the test site **Inspect Wasm memories (Memory in Wasm)** (`http://memory-inspector.glitch.me/demo-wasm.html`) (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). diff --git a/microsoft-edge/devtools/whats-new/2020/10/devtools.md b/microsoft-edge/devtools/whats-new/2020/10/devtools.md index e46000da35..9c7406909b 100644 --- a/microsoft-edge/devtools/whats-new/2020/10/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/10/devtools.md @@ -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) diff --git a/microsoft-edge/devtools/whats-new/2020/11/devtools.md b/microsoft-edge/devtools/whats-new/2020/11/devtools.md index f34e233409..4620a903c1 100644 --- a/microsoft-edge/devtools/whats-new/2020/11/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/11/devtools.md @@ -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`) (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). diff --git a/microsoft-edge/devtools/whats-new/2021/05/devtools.md b/microsoft-edge/devtools/whats-new/2021/05/devtools.md index 0cc9ebd525..75ca79b08c 100644 --- a/microsoft-edge/devtools/whats-new/2021/05/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/05/devtools.md @@ -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) - + 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)_ @@ -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) - + See also: * [Filter resources](../../../network/index.md#filter-resources) in _Inspect network activity_