Skip to content

Commit 01fa4a2

Browse files
mikehoffmsmikehoffms
committed
group default tools info together
1 parent 13b4423 commit 01fa4a2

2 files changed

Lines changed: 41 additions & 36 deletions

File tree

‎microsoft-edge/devtools-guide-chromium/about-tools-images/all-default-tools.png‎

-161 KB
Loading

‎microsoft-edge/devtools-guide-chromium/about-tools.md‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,34 @@ ms.author: msedgedevrel
66
ms.topic: conceptual
77
ms.service: microsoft-edge
88
ms.subservice: devtools
9-
ms.date: 02/25/2025
9+
ms.date: 03/24/2025
1010
---
1111
# About the list of tools
1212

13-
DevTools provides more than 30 tools, consisting of _Default tools_ and _More tools_:
13+
DevTools provides more than 30 tools, consisting of _Default tools_ and _More tools_.
1414

15-
* **Default tools:**
16-
* ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool**
17-
* ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation**
18-
* ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome**
19-
* ![Elements icon](./about-tools-images/elements-icon.png) **Elements**
20-
* ![Console icon](./about-tools-images/console-icon.png) **Console**
21-
* ![Sources icon](./about-tools-images/sources-icon.png) **Sources**
22-
* ![Network icon](./about-tools-images/network-icon.png) **Network**
23-
* ![Performance icon](./about-tools-images/performance-icon.png) **Performance**
24-
* ![Memory icon](./about-tools-images/memory-icon.png) **Memory**
25-
* ![Application icon](./about-tools-images/application-icon.png) **Application**
2615

27-
![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png)
28-
29-
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.
30-
31-
* **More tools:**
32-
* Additional optional tools that can be added to the **Activity bar**, listed in the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** tool.
33-
34-
35-
The following features are additional ways to access the tools:
36-
37-
* The **Quick View** panel is an additional toolbar and area to hold tools, below or to the right of the **Activity Bar** panel.
38-
* The **Command Menu** is a way to directly use features of tools.
39-
* The **Settings** pages can turn on additional features of tools.
16+
<!-- ====================================================================== -->
17+
## Default tools
4018

19+
By default, the following tools are listed in the **Activity bar** at the top of DevTools:
4120

42-
<!-- ====================================================================== -->
43-
## Overview of all tools
21+
* ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool**
22+
* ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation**
23+
* ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome**
24+
* ![Elements icon](./about-tools-images/elements-icon.png) **Elements**
25+
* ![Console icon](./about-tools-images/console-icon.png) **Console**
26+
* ![Sources icon](./about-tools-images/sources-icon.png) **Sources**
27+
* ![Network icon](./about-tools-images/network-icon.png) **Network**
28+
* ![Performance icon](./about-tools-images/performance-icon.png) **Performance**
29+
* ![Memory icon](./about-tools-images/memory-icon.png) **Memory**
30+
* ![Application icon](./about-tools-images/application-icon.png) **Application**
4431

45-
Microsoft Edge DevTools includes the following tools.
32+
![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png)
4633

4734

4835
<!-- ------------------------------ -->
49-
#### Default tools
36+
#### Overview of the default tools
5037

5138
| Tool | Purpose | Article |
5239
| --- | --- | --- |
@@ -61,9 +48,19 @@ Microsoft Edge DevTools includes the following tools.
6148
| ![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) |
6249
| ![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) |
6350

51+
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.
52+
53+
54+
<!-- ====================================================================== -->
55+
## More tools
56+
57+
The **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Activity bar** lists additional, optional tools that can be added to the **Activity bar**.
58+
59+
There's also a **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Quick View** toolbar at the bottom of DevTools. To show or hide the **Quick View** panel, press **Esc**; or click **Customize and control DevTools** (**...**) in the upper right, and then click **Toggle Quick View panel**.
60+
6461

6562
<!-- ------------------------------ -->
66-
#### More tools
63+
#### Overview of tools in the More tools menu
6764

6865
| Tool | Purpose | Article |
6966
| --- | --- | --- |
@@ -93,15 +90,23 @@ Microsoft Edge DevTools includes the following tools.
9390
| **WebAudio** | Use the **WebAudio** tool to monitor WebAudio traffic. The **WebAudio** tool uses the WebAudio API. | [WebAudio tool](webaudio/webaudio-tool.md) |
9491
| **WebAuthn** | Use the **WebAuthn** tool to create and interact with software-based virtual authenticators. | [Emulate authenticators and debug WebAuthn](webauthn/index.md) |
9592

93+
The **More tools** (**+**) menu in the **Activity Bar** and in the **Quick View** toolbar is dynamic: it omits any tab tools that are open on that toolbar.
94+
9695

97-
<!-- ---------- -->
98-
###### The More tools menus
96+
<!-- ====================================================================== -->
97+
## Additional ways to access the tools
9998

100-
The **More tools** (**+**) menu in the **Activity Bar** and in the **Quick View** toolbar is dynamic: it omits any tab tools that are open on that toolbar.
99+
The following features are additional ways to access the tools:
101100

101+
* The **Quick View** panel is an additional toolbar and area to hold tools, below or to the right of the **Activity Bar** panel.
102102

103-
<!-- ------------------------------ -->
104-
#### Experimental tools
103+
* The **Command Menu** is a way to directly use features of tools.
104+
105+
* The **Settings** pages can turn on additional features of tools.
106+
107+
108+
<!-- ====================================================================== -->
109+
## Experimental tools
105110

106111
Microsoft Edge DevTools potentially includes additional tools, if you select the experiment's check box in DevTools **Settings > Experiments**. For example:
107112

0 commit comments

Comments
 (0)