Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
030a5d3
reveal headings
mikehoffms Apr 9, 2026
7ea9e64
update local toc
mikehoffms Apr 9, 2026
7b15119
populate text in sections
mikehoffms Apr 9, 2026
ffef4d4
avoid "new"
mikehoffms Apr 10, 2026
1abdfd9
format
mikehoffms Apr 10, 2026
6383e56
mid-sent link
mikehoffms Apr 13, 2026
5ed701e
Merge branch 'main' into user/mikehoffms/css-ref
mikehoffms Apr 15, 2026
2bab9e2
Merge branch 'main' into user/mikehoffms/css-ref
mikehoffms Apr 16, 2026
323c761
incoming links & pngs
mikehoffms May 14, 2026
26ad196
3 of 5 at-rules examples
mikehoffms May 15, 2026
1750709
finish at-rule sections 4 & 5
mikehoffms May 15, 2026
f950f31
clean up bottom of position-try
mikehoffms May 15, 2026
2bda2cb
h4 Emulate focused page
mikehoffms May 15, 2026
0a02462
finished main sweep
mikehoffms May 16, 2026
999c830
del 3 todos
mikehoffms May 16, 2026
d255439
flag old pngs showing LMC
mikehoffms May 16, 2026
31d7520
flag pngs needing revision
mikehoffms May 18, 2026
a72a9e6
Merge branch 'main' into user/mikehoffms/css-ref
mikehoffms May 20, 2026
78967c0
to enable Sum API
mikehoffms May 20, 2026
c4ed684
revise Emul Focused Pg sec
mikehoffms May 21, 2026
22520b5
update table
mikehoffms May 21, 2026
b9ca10a
improve name of repo
mikehoffms May 21, 2026
e0150ac
pngs not localhost url/ globe icon
mikehoffms May 22, 2026
d0d0ae2
del sync comments
mikehoffms May 22, 2026
7f5fc6c
the [MicrosoftEdge / Demos] repo
mikehoffms May 22, 2026
d59e5c4
del demo overview tables / sections
mikehoffms May 22, 2026
8e4a91a
Merge branch 'main' into user/mikehoffms/css-ref
mikehoffms Jun 2, 2026
04d16e0
linkfix
mikehoffms Jun 5, 2026
6bd4940
del moved pngs
mikehoffms Jun 5, 2026
ce43b63
fix most todos
mikehoffms Jun 5, 2026
96e90c5
inc cmts
mikehoffms Jun 5, 2026
01cde91
Merge branch 'main' into user/mikehoffms/css-ref
mikehoffms Jun 6, 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
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/css/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ To learn the basics of using DevTools to view and change the CSS for a page, fol

1. Open the [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo page in a new window or tab. (To open a link in a new window or tab, right-click the link. Or, press and hold **Ctrl** (for Windows, Linux) or **Command** (for macOS) and then click the link.)

<!-- You can view the source files for the CSS Examples demo page at the [MicrosoftEdge/Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) repo folder. -->
<!-- You can view the source files for the CSS Examples demo page at the [MicrosoftEdge / Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) repo folder. -->

1. Right-click the `Inspect Me!` text, and then select **Inspect**.

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
855 changes: 752 additions & 103 deletions microsoft-edge/devtools/css/reference.md
Comment thread
mikehoffms marked this conversation as resolved.

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion microsoft-edge/devtools/customize/extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ To install a Microsoft Edge extension that extends DevTools:

1. Click the **Add extension** button. A dialog indicates that the extension has been installed, and the Extensions (![Extensions icon](./extensions-images/extensions-icon.png)) button now lists the extension.

1. Open a new tab or window, and then go to a page that contains content that's relevant for the DevTools extension. For example, use the [TodoMVC React example page](https://todomvc.com/examples/react/dist/), or go to a live [Microsoft Edge Demos repo](https://github.com/MicrosoftEdge/Demos#demos) page, such as [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/).
1. Open a new tab or window, and then go to a page that contains content that's relevant for the DevTools extension. For example, use the [TodoMVC React example page](https://todomvc.com/examples/react/dist/), or go to a live page in the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo, such as [demo-to-do](https://microsoftedge.github.io/Demos/demo-to-do/).

1. Open DevTools, such as by pressing **F12**. In the case of this React extension, two new tabs are opened in the **Activity Bar**: **Components** and **Profiler**:

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/dom/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ When you are interested in a particular DOM node, **Inspect** is a fast way to o

1. Open the [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) demo page in a new window or tab. (To open a link in a new window or tab, right-click the link. Or, press and hold **Ctrl** (Windows, Linux) or **Command** (macOS) and then click the link.)

<!-- You can view the source files for the DOM Examples demo in the [MicrosoftEdge/Demos > devtools-dom-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) repo folder. -->
<!-- You can view the source files for the DOM Examples demo in the [MicrosoftEdge / Demos > devtools-dom-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) repo folder. -->

1. In the rendered webpage, under **Inspect a Node**, right-click **Michelangelo** and then select **Inspect**:

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/javascript/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ The first step in debugging is to find a sequence of actions that consistently r

Tip: Open Microsoft Edge in InPrivate Mode, to ensure that Microsoft Edge runs in a clean state. For more information, see [Browse InPrivate in Microsoft Edge](https://support.microsoft.com/microsoft-edge/browse-inprivate-in-microsoft-edge-cd2c9a48-0bc4-b98e-5e46-ac40c84e27e2)

<!-- You can view the source files for the Debugging demo at the [MicrosoftEdge/Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) repo folder. -->
<!-- You can view the source files for the Debugging demo at the [MicrosoftEdge / Demos > devtools-js-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) repo folder. -->

1. Enter **5** in the **Number 1** text box.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ Be sure to unmount components. For long-running apps, small memory leaks of onl

* [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_.
* [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/)
* [MicrosoftEdge/Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder - source code.<!-- link not in article -->
* [MicrosoftEdge / Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder - source code.<!-- link not in article -->

<!-- possibly uncomment after PR https://github.com/MicrosoftDocs/edge-developer/pull/3290 is merged
* [Detached Elements profiling type in Memory tool](../whats-new/2024/10/devtools-130.md#detached-elements-profiling-type-in-memory-tool) in _What's new in DevTools (Microsoft Edge 130)_.
Expand Down
6 changes: 3 additions & 3 deletions microsoft-edge/devtools/memory-problems/heap-snapshots.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Use the heap profiler in the **Memory** tool to do the following:

The DevTools heap profiler shows the memory distribution used by the JavaScript objects and by related DOM nodes on the rendered webpage.

<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder.
<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge / Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder.

This article uses demo webpages sourced at https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot -
* [Example 3: Scattered objects](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-03.html)
Expand Down Expand Up @@ -313,7 +313,7 @@ At this point, the `<div id="tree">` element can be garbage-collected. Both `tre

To understand where DOM nodes might leak, and how to detect such leakage, open the example webpage [Example 6: Leaking DOM nodes](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-06.html) in a new window or tab.

<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->
<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge / Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->


<!-- ------------------------------ -->
Expand All @@ -327,7 +327,7 @@ Open the example webpage [Example 8: Recording heap allocations](https://microso

To see why a DOM leak might be bigger than expected, open the example webpage [Example 9: DOM leaks bigger than expected](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-09.html) in a new window or tab.

<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->
<!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge / Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->

<!-- Example: Try this **demo** to play with detached DOM trees. -->

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/network/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ To get the most out of this tutorial, open the demo and try out the features on

![The demo](./index-images/demo-page.png)

<!-- You can view the source files for this demo in the [MicrosoftEdge/Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) repo folder: -->
<!-- You can view the source files for this demo in the [MicrosoftEdge / Demos > devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) repo folder: -->

<!--
![The demo in one window and this tutorial in a different window](../media/network-tutorial/windows.png)
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/performance/extension.md
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ To record a profile and view the custom performance data of the Photo Gallery de
1. Open the [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) demo webpage in a new window or tab.

Or, to be able to modify the sample code:
1. Clone the "MicrosoftEdge / Demos" repo, per [Clone the Edge Demos repo to your drive](../samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
1. Clone the Demos repo, per [Clone the "MicrosoftEdge / Demos" repo to your drive](../samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
1. Start a localhost server in the cloned `/demos/` directory, per [Start the localhost server](../samples/index.md#start-the-localhost-server), in _Sample code for DevTools_.
1. In the browser, go to `http://localhost:8080/photo-gallery/` or equivalent, in a new window or tab.

Expand Down
4 changes: 2 additions & 2 deletions microsoft-edge/devtools/quick-source/quick-source-tool.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ For example, if not done already, clone the **MicrosoftEdge / Demos** repo to yo

1. If not done already, install an up-to-date version of Node.js and npm from [Node.js](https://nodejs.org).

1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab.
1. Go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) repo in a new window or tab.

1. Click the **Code** drop-down button.

Expand All @@ -87,7 +87,7 @@ For example, if not done already, clone the **MicrosoftEdge / Demos** repo to yo
```

For details about cloning a repo, see:
* [Clone the Edge Demos repo to your drive](../samples/index.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
* [Clone the "MicrosoftEdge / Demos" repo to your drive](../samples/index.md#clone-the-microsoftedge--demos-repo-to-your-drive) in _Sample code for DevTools_.
* [Clone the WebView2Samples repo](../../webview2/how-to/machine-setup.md#clone-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. Shows a different sample repo, but shows steps for several tools.
* [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs.

Expand Down
Loading