Skip to content
Open
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
44 changes: 22 additions & 22 deletions microsoft-edge/devtools/about-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@ DevTools provides more than 30 tools, consisting of _Default tools_ and _More to

By default, the following tools are listed in the **Activity Bar** at the top of DevTools:

* ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool**
* ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation**
* ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome**
* ![Elements icon](./about-tools-images/elements-icon.png) **Elements**
* ![Console icon](./about-tools-images/console-icon.png) **Console**
* ![Sources icon](./about-tools-images/sources-icon.png) **Sources**
* ![Network icon](./about-tools-images/network-icon.png) **Network**
* ![Performance icon](./about-tools-images/performance-icon.png) **Performance**
* ![Memory icon](./about-tools-images/memory-icon.png) **Memory**
* ![Application icon](./about-tools-images/application-icon.png) **Application**
* **Inspect tool**
* **Device Emulation**
* **Welcome**
* **Elements**
* **Console**
* **Sources**
* **Network**
* **Performance**
* **Memory**
* **Application**

![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png)

Expand All @@ -37,16 +37,16 @@ By default, the following tools are listed in the **Activity Bar** at the top of

| Tool | Purpose | Article |
| --- | --- | --- |
| ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect** | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) |
| ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) |
| ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome** | The **Welcome** tool opens when you first open DevTools. It displays links to developer docs, latest features, release notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) |
| ![Elements icon](./about-tools-images/elements-icon.png) **Elements** | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) |
| ![Console icon](./about-tools-images/console-icon.png) **Console** | An intelligent, rich command line within DevTools. A great companion tool to use with others tools. Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | [Console overview](console/index.md) |
| ![Sources icon](./about-tools-images/sources-icon.png) **Sources** | Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | [Sources tool overview](sources/index.md) |
| ![Network icon](./about-tools-images/network-icon.png) **Network** | Use the **Network** tool to make sure that resources are being downloaded or uploaded as expected. Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | [Inspect network activity](network/index.md) |
| ![Performance icon](./about-tools-images/performance-icon.png) **Performance** | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | [Analyze runtime performance (tutorial)](./performance/index.md) |
| ![Memory icon](./about-tools-images/memory-icon.png) **Memory** | Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. | [Fix memory problems](memory-problems/index.md) |
| ![Application icon](./about-tools-images/application-icon.png) **Application** | Use the **Application** tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. | [The Application tool, to manage storage](storage/application-tool.md) |
| **Inspect** | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) |
| **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) |
| **Welcome** | The **Welcome** tool opens when you first open DevTools. It displays links to developer docs, latest features, release notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) |
| **Elements** | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) |
| **Console** | An intelligent, rich command line within DevTools. A great companion tool to use with others tools. Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | [Console overview](console/index.md) |
| **Sources** | Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | [Sources tool overview](sources/index.md) |
| **Network** | Use the **Network** tool to make sure that resources are being downloaded or uploaded as expected. Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | [Inspect network activity](network/index.md) |
| **Performance** | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | [Analyze runtime performance (tutorial)](./performance/index.md) |
| **Memory** | Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. | [Fix memory problems](memory-problems/index.md) |
| **Application** | Use the **Application** tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. | [The Application tool, to manage storage](storage/application-tool.md) |

The **Elements**, **Console**, and **Sources** tools (tabs) are permanent, in the **Activity Bar**. The other tool tabs can be removed, or moved down to the **Quick View** toolbar.

Expand Down Expand Up @@ -128,7 +128,7 @@ To move a tool to the other toolbar, right-click the tool's tab and then select

![The right-click menu for a tool in the Quick View toolbar, including the 'Move to top Activity Bar' command](./about-tools-images/move-from-quickview-to-activitybar.png)

To open the **Command Menu**, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Or, click the **Customize and control DevTools** (![Customize icon](./about-tools-images/customize-devtools-icon-light-theme.png)) button and then select **Run command**.
To open the **Command Menu**, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Or, click the **Customize and control DevTools** button and then select **Run command**.

@mikehoffms Michael Hoffman (mikehoffms) Jul 29, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace horiz ... icon by vertical dots

Stable:
image

Canary:
image



<!-- ====================================================================== -->
Expand All @@ -148,7 +148,7 @@ The **Console** tool is also a permanent tab on the **Quick View** toolbar. In

To restore all of the default tool tabs in the **Activity Bar** and **Quick View**:

1. In DevTools, select **Customize and control DevTools** (![Customize and control DevTools icon](./about-tools-images/customize-devtools-icon-light-theme.png)) > **Settings** (![Settings icon](./about-tools-images/settings-gear-icon-light-theme.png)) > **Preferences**.
1. In DevTools, select **Customize and control DevTools** > **Settings** > **Preferences**.

@mikehoffms Michael Hoffman (mikehoffms) Jul 29, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

undo but w/ vertical dots?


1. Click the **Restore defaults and refresh** button. DevTools restarts, and the default tabs appear in both toolbars.

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/contact.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ There are several ways to get in touch with the Microsoft Edge DevTools team:

To report a bug or request a feature while you are using DevTools:

1. Click the **Help** (![Help icon](./contact-images/help-icon.png)) icon, and then click **Send Feedback** (![Send Feedback icon](./contact-images/send-feedback-icon-light-theme.png)) (or press **Alt+Shift+I** on Windows and Linux or **Option+Shift+I** on macOS) to open the **Send feedback** window.
1. Click **Send Feedback** (![Send Feedback icon](./contact-images/send-feedback-icon-light-theme.png)) (or press **Alt+Shift+I** on Windows and Linux or **Option+Shift+I** on macOS) to open the **Send feedback** window.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR removes ALL icons but should only remove tool icons

1. In the **Send feedback** window, describe your bug or feature request. You can also attach a screenshot to help the team understand the problem better and add your email address so we can follow-up with you.
1. Press **Send** to create a tracked issue for the Microsoft Edge development team.

Expand Down
Binary file not shown.
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/crash-analyzer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ If you want to test the **Crash analyzer** tool but you don't have a stack trace

1. To open DevTools, right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens.

1. In DevTools, on the **Activity Bar**, click **Console** (![Console icon](./index-images/console-icon.png)). The **Console** tool opens.
1. In DevTools, on the **Activity Bar**, click **Console**. The **Console** tool opens.

1. Select the error stack trace that's displayed in the **Console** tool and copy it.

Expand Down
Binary file not shown.
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/issues/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ To display an issue for elements with wavy underlines in the DOM tree:

1. Right-click anywhere in the webpage and then select **Inspect**. Or, press **F12**. DevTools opens next to the webpage.

1. In DevTools, select the **Elements** (![Elements tool icon](./index-images/elements-tool-icon.png)) tab.
1. In DevTools, select the **Elements** tab.

1. In the DOM tree, expand `<body>` > `<section>` > `<main>` > `<article id="cats">` > `<img>`. The `<img>` element start-tag has a wavy underline:

Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
8 changes: 4 additions & 4 deletions microsoft-edge/devtools/javascript/overrides.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ When you set up a folder for local overrides the first time, that folder should

1. Right-click a webpage, such as https://microsoftedge.github.io/Demos/demo-to-do/, and then select **Inspect**. DevTools opens.

1. Select the **Sources** (![Sources icon](./overrides-images/sources-tool-icon.png)) tool.
1. Select the **Sources** tool.

1. In the **Navigator** pane (on the left), click the **Overrides** tab (grouped with the **Page** tab); if needed, click the **More tabs** (**v**) button:

Expand Down Expand Up @@ -92,7 +92,7 @@ Next, add files to your Overrides folder, as follows. This example will add a C

Continuing from above, you can now change the styles of the webpage by using your local override CSS file (in this example, `to-do-styles.css`). Add a thick red border around the rendered webpage body, as follows:

1. In DevTools, select the **Elements** (![Elements tool icon](./overrides-images/elements-tool-icon.png)) tool, and then make sure the **Styles** tab is selected.
1. In DevTools, select the **Elements** tool, and then make sure the **Styles** tab is selected.

1. Copy the following CSS style property, and then paste it into the existing `body` element CSS rule that's in your CSS override file, such as `to-do-styles.css`:

Expand All @@ -112,7 +112,7 @@ Continuing from above, you can now change the styles of the webpage by using you
<!-- ====================================================================== -->
## Adding files to Overrides from within other tabs or tools

1. Continuing from above, select the **Sources** (![Sources icon.](./overrides-images/sources-tool-icon.png)) tool, and then on the left, select the **Page** tab (grouped with the **Overrides** tab).
1. Continuing from above, select the **Sources** tool, and then on the left, select the **Page** tab (grouped with the **Overrides** tab).

1. In the tree of resource files for the page, expand the **styles** folder. Files that are already placed in your overrides folder (by using the **Overrides** tab), such as `to-do-styles.css`, have a purple dot on the icon.

Expand All @@ -122,7 +122,7 @@ Continuing from above, you can now change the styles of the webpage by using you

In the **Page** tab and **Overrides** tab in the **Sources** tool, the file's icon changes to a page icon with a purple dot (such as for `index.html`), and the file is added to your local drive's Overrides directory.

1. Select the **Network** (![Network tool icon](./overrides-images/network-tool-icon.png)) tool, right-click a resource file for the webpage, such as **to-do.js**, and then select **Override content**:
1. Select the **Network** tool, right-click a resource file for the webpage, such as **to-do.js**, and then select **Override content**:

![Selecting a file from the Network tool for overrides](./overrides-images/javascript-overrides-network.png)

Expand Down
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ To begin using **Allocations on timeline**:

DevTools opens.

1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./allocation-profiler-images/memory-tool-icon.png)) tool.
1. In DevTools, in the **Activity Bar**, select the **Memory** tool.

If that tab isn't visible, click the **More Tools** (![More Tools icon](./allocation-profiler-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens:

Expand Down
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ To use the **Detached elements** profiling type to analyze a webpage's detached

DevTools opens.

1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png)) tool.
1. In DevTools, in the **Activity Bar**, select the **Memory** tool.

If that tab isn't visible, click the **More Tools** (![More Tools icon](./dom-leaks-memory-tool-detached-elements-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens:

Expand Down
Binary file not shown.
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/memory-problems/heap-snapshots.md
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,7 @@ To use the **Heap snapshot** profiling type to find detached elements:

DevTools opens.

1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./heap-snapshots-images/memory-tool-icon.png)) tool.
1. In DevTools, in the **Activity Bar**, select the **Memory** tool.

If that tab isn't visible, click the **More Tools** (![More Tools icon](./heap-snapshots-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ To get to the **Network Console** tool by starting from the **Network** tool:

1. To open DevTools, right-click a webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).

1. On the main toolbar, select the **Network** (![Network tool icon](./network-console-tool-images/network-tool-icon.png)) tab. If that tab isn't visible, click the **More tools** (![More tools icon.](./network-console-tool-images/more-tools-icon.png)) button, and then select **Network**.
1. On the main toolbar, select the **Network** tab. If that tab isn't visible, click the **More tools** (![More tools icon.](./network-console-tool-images/more-tools-icon.png)) button, and then select **Network**.

1. Refresh the webpage. The **Network** tool displays the resources that are used to construct the webpage.

Expand Down
Loading