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
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.
853 changes: 750 additions & 103 deletions microsoft-edge/devtools/css/reference.md

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
Loading