Merge pull request #3721 from MicrosoftDocs/main

mikehoffms · web-flow · commit 09e9a4acdda5 · 2026-02-13T11:15:40.000-08:00
main to live - Feb. 12, 2026
diff --git a/microsoft-edge/accessibility/build/index.md b/microsoft-edge/accessibility/build/index.md
@@ -108,6 +108,7 @@ Under macOS, if you want to test with an assistive technology only available for
 
 > [!NOTE]
 > The iOS Simulator doesn't currently include VoiceOver.
+<!-- todo: reformat to avoid Alert box, per corp Markdown guide https://learn.microsoft.com/en-us/help/platform/markdown-reference?toc=%2Fhelp%2Fget-started%2Ftoc.json&bc=%2Fhelp%2Fget-started%2Fbreadcrumb%2Ftoc.json#alerts-note-tip-important-caution-warning -->
 
 
 <!-- ------------------------------ -->
diff --git a/microsoft-edge/devtools/about-tools.md b/microsoft-edge/devtools/about-tools.md
@@ -124,7 +124,7 @@ The **Command Menu** first lists the **Activity Bar** tools (indicated by the **
 
 ![The Command Menu, showing the Panel tools grouped together, and then the Quick View tools](./about-tools-images/command-menu-panel-vs-quick-view-tools.png)
 
-To move a tool to the other toolbar, right-click the tool's tab and then select **Move to bottom Quick View**, **Move to side Quick View**, **Move to top Activity Bar**, or **Move to left Activity Bar**:
+To move a tool to the other toolbar, right-click the tool's tab and then select **Move to bottom Quick View**, **Move to side Quick View**, or **Move to top Activity Bar**:
 
 ![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)
 
diff --git a/microsoft-edge/devtools/issues/index.md b/microsoft-edge/devtools/issues/index.md
@@ -77,7 +77,7 @@ Feedback in the **Issues** tool is provided by several sources, including the Ch
 
 By default, such as from the **Command Menu**, the **Issues** tool opens in the **Quick View** panel.  You can instead open it in the **Activity Bar**, or move it to the **Activity Bar**: 
 
-*  In the **Quick View** toolbar, right-click the **Inspect** tab and then select **Move to top Activity Bar** or **Move to left Activity Bar**.
+*  In the **Quick View** toolbar, right-click the **Inspect** tab and then select **Move to top Activity Bar**.
 
 <!-- legacy ui
 *  Select **Customize and control DevTools** > **More tools** > **Issues**.
diff --git a/microsoft-edge/devtools/overview-images/horizontal.png b/microsoft-edge/devtools/overview-images/horizontal.png
diff --git a/microsoft-edge/devtools/overview-images/move-activity-bar-from-customize-menu.png b/microsoft-edge/devtools/overview-images/move-activity-bar-from-customize-menu.png
diff --git a/microsoft-edge/devtools/overview-images/move-activity-bar-to-left-icon.png b/microsoft-edge/devtools/overview-images/move-activity-bar-to-left-icon.png
diff --git a/microsoft-edge/devtools/overview-images/move-activity-bar-to-top-icon.png b/microsoft-edge/devtools/overview-images/move-activity-bar-to-top-icon.png
diff --git a/microsoft-edge/devtools/overview.md b/microsoft-edge/devtools/overview.md
@@ -6,19 +6,66 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 07/17/2023
+ms.date: 02/11/2026
 ---
 # Overview of DevTools
 
 <!-- icon clipboard below -->
 
-<!-- ====================================================================== -->
 <!-- keep sync'd:
 * [Overview of DevTools](overview.md) - intro section
 * [Microsoft Edge DevTools](../develop-web-microsoft-edge.md#microsoft-edge-devtools) in _Develop for the web with Microsoft Edge_
 -->
 
-The Microsoft Edge browser comes with built-in web development tools, called Microsoft Edge DevTools.  DevTools is a set of web development tools that appears next to a rendered webpage in the browser.  DevTools provides a powerful way to inspect and debug webpages and web apps.  You can even edit source files and create website projects, all within the DevTools environment.
+The Microsoft Edge browser comes with built-in web development tools, called Microsoft Edge DevTools.  DevTools is a set of web development tools that appears next to a rendered webpage in the browser.
+
+**Detailed contents:**
+* [Introduction](#introduction)
+   * [Video: Understand the DevTools user interface](#video-understand-the-devtools-user-interface)
+* [Open DevTools](#open-devtools)
+   * [Open DevTools by right-clicking an item in a webpage](#open-devtools-by-right-clicking-an-item-in-a-webpage)
+   * [Open DevTools by using the Microsoft Edge toolbar](#open-devtools-by-using-the-microsoft-edge-toolbar)
+   * [Have DevTools automatically open when you open a new tab](#have-devtools-automatically-open-when-you-open-a-new-tab)
+      * [Disabling startup boost](#disabling-startup-boost)
+   * [Turning off the F12 keyboard shortcut](#turning-off-the-f12-keyboard-shortcut)
+* [Keyboard support](#keyboard-support)
+* [Change where DevTools is docked in the browser](#change-where-devtools-is-docked-in-the-browser)
+* [Zoom DevTools in or out](#zoom-devtools-in-or-out)
+* [Overview of the user interface](#overview-of-the-user-interface)
+   * [Change the location of Quick View](#change-the-location-of-quick-view)
+* [Features of the Activity Bar](#features-of-the-activity-bar)
+   * [Tabbed tool panels containing tabs and pages](#tabbed-tool-panels-containing-tabs-and-pages)
+   * [The Activity Bar and the Quick View toolbar](#the-activity-bar-and-the-quick-view-toolbar)
+   * [Pin and rearrange tools in the Activity Bar](#pin-and-rearrange-tools-in-the-activity-bar)
+   * [Inspect tool](#inspect-tool)
+   * [Device Emulation](#device-emulation)
+   * [Welcome tool](#welcome-tool)
+   * [Elements tool](#elements-tool)
+   * [Console tool](#console-tool)
+   * [Sources tool](#sources-tool)
+   * [Network tool](#network-tool)
+   * [Performance tool](#performance-tool)
+   * [Memory tool](#memory-tool)
+   * [Application tool](#application-tool)
+   * [More Tools button](#more-tools-button)
+   * [Customize and control DevTools menu](#customize-and-control-devtools-menu)
+   * [Help button](#help-button)
+   * [Close DevTools button](#close-devtools-button)
+* [Features of the Quick View toolbar](#features-of-the-quick-view-toolbar)
+* [Overview of all tools](#overview-of-all-tools)
+* [Tool, tab, or panel](#tool-tab-or-panel)
+* [About Activity Bar and Quick View tools](#about-activity-bar-and-quick-view-tools)
+   * [See also](#see-also)
+* [Power tip: Use the Command Menu](#power-tip-use-the-command-menu)
+* [Customizing DevTools](#customizing-devtools)
+* [Trying experimental features](#trying-experimental-features)
+* [See also](#see-also-1)
+
+
+<!-- ====================================================================== -->
+## Introduction
+
+DevTools provides a powerful way to inspect and debug webpages and web apps.  You can even edit source files and create website projects, all within the DevTools environment.
 
 With DevTools, you can do the following:
 
@@ -32,7 +79,7 @@ With DevTools, you can do the following:
 
 *  Use a development environment to sync changes in DevTools with the file system and from the web.
 
-<!-- /keep sync'd -->
+<!-- /end of "keep sync'd", at top of file -->
 
 
 <!-- ------------------------------ -->
@@ -210,7 +257,7 @@ To zoom the rendered page, click the page, and then use the same keyboard shortc
 
 The DevTools user interface has the following main areas:
 
-* The **Activity Bar** at the top, or on the left side, which contains icons used to access tools, settings, documentation, and more.
+* The **Activity Bar** at the top which contains icons used to access tools, settings, documentation, and more.
    * The current tool area, where the tool that's currently selected in the **Activity Bar** appears.
 
 * The **Quick View** toolbar, at the bottom, which contains tabs used to access tools.
@@ -248,42 +295,6 @@ By default, the **Quick View** toolbar contains the following tools:
 
 In the **Activity Bar**, tool tabs either contain the tool name and icon, or just the tool icon, depending on the width of the DevTools window. If the window is wide enough, the tool name and icon appear. If the window is too narrow, only the tool icon appears and the tool name appears when you hover over the tool icon.
 
-If the **Activity Bar** is located on the left side of the DevTools window, vertically, only the tool icons appear, and the tool names appear when you hover over the tool icons.
-
-
-<!-- ------------------------------ -->
-#### Change the location of the Activity Bar
-
-By default, the **Activity Bar** is displayed horizontally at the top of the DevTools window. To maximize usable screen space in a variety of DevTools window size and locations, you can change the location of the **Activity Bar** to the left side of the DevTools window or to be automatically set depending on the DevTools window docking location.
-
-The **Activity Bar** can be in one of the following locations:
-
-* **Top** (default): The **Activity Bar** will always be horizontal.
-
-* **Left side**: The **Activity Bar** will always be vertical.
-
-* **Adapt to dock location**: The **Activity Bar** will be in a horizontal or vertical orientation depending on where DevTools is docked.
-
-  * When DevTools is docked to the left or right side of the browser window, the **Activity Bar** is vertical.
-
-  * When DevTools is docked to the bottom side of the browser window, or undocked in its own window, the **Activity Bar** is horizontal.
-
-When the **Activity Bar** is horizontal, tool names appear next to tool icons if there is enough space to display them.
-
-If there isn't enough space to display all tool names, the horizontal **Activity Bar** shows some tabs with tool icons and names, and some tabs with icons that have a tooltip instead:
-
-![The horizontal Activity Bar with limited width, so some tools don't have a label, but only an icon with tooltip](./overview-images/horizontal.png)
-
-To change the location of the **Activity Bar**, do either of the following:
-
-* Click the **Customize and control DevTools** (![Customize and control DevTools](./overview-images/customize-and-control-devtools-icon-light-mode.png)) button, and then select a location in **Activity Bar location**:
-
-  ![The 'Customize and control DevTools' menu of DevTools, showing the various Activity Bar location options](./overview-images/move-activity-bar-from-customize-menu.png)
-
-* In the **Activity Bar**, click **Move Activity Bar to left** (![The Move Activity Bar to left icon](./overview-images/move-activity-bar-to-left-icon.png)) or **Move Activity Bar to top** (![The Move Activity Bar to top icon](./overview-images/move-activity-bar-to-top-icon.png)).
-
-* Use the **Command Menu**.  Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS), enter the words **activity bar**, and then select **Move Activity Bar to left** or **Move Activity Bar to top**. See [Power tip: Use the Command Menu](#power-tip-use-the-command-menu).
-
 
 <!-- ------------------------------ -->
 #### Change the location of Quick View
@@ -343,7 +354,6 @@ Present if Experiments > "Emulate Microsoft-recommended hardware and network per
    *  **Application** tool.
 
 * Icons:
-   *  **Move Activity Bar to left** (![Move Activity Bar to left icon](./overview-images/move-activity-bar-to-left-icon.png)) button.
    *  **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) button.
    *  **Customize and control DevTools** (![Customize icon](./overview-images/customize-devtools-icon-light-theme.png)) menu button.
    *  **Help** (![Help icon](./overview-images/help-icon.png)) button.
@@ -533,7 +543,7 @@ The **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) b
 | --- | --- |
 | Open a tool in the **Activity Bar** at the top of DevTools | In the **Activity Bar** at the top of DevTools, click **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) and then select a tool. |
 | Open a tool on the **Quick View** toolbar | When DevTools has focus, press **Esc** to show the **Quick View** toolbar if it's not shown yet.  In the **Quick View** toolbar, click the **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) button, and then select a tool. |
-| Move a tool from the **Quick View** toolbar to the **Activity Bar** | When DevTools has focus, press **Esc** to show the **Quick View**.  In the **Quick View** toolbar, right-click the tool's tab, and then select **Move to top Activity Bar** or **Move to left Activity Bar**. |
+| Move a tool from the **Quick View** toolbar to the **Activity Bar** | When DevTools has focus, press **Esc** to show the **Quick View**.  In the **Quick View** toolbar, right-click the tool's tab, and then select **Move to top Activity Bar**. |
 | Move a tool from the **Activity Bar** to the **Quick View** toolbar | In the **Activity Bar**, right-click the tool's tab, and then select **Move to bottom Quick View** or **Move to side Quick View**. |
 | Open a tool in its default toolbar (**Activity Bar** or **Quick View**) | When DevTools has focus, open the **Command Menu** by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS).  Type the name of the tool, and then select a **Show \<tool\>** command. |
 
diff --git a/microsoft-edge/devtools/whats-new/2021/11/devtools.md b/microsoft-edge/devtools/whats-new/2021/11/devtools.md
@@ -1,6 +1,6 @@
 ---
 title: What's new in DevTools (Microsoft Edge 96)
-description: Focus Mode and a vertical Activity Bar.  Auto-minimizing of the Console.  Display a webpage in Visual Studio Code, emulate devices, and see issues while editing.  Sources tool notifies you when sourcemaps can't be loaded.  If Sources is open, it's used rather than Visual Studio Code.
+description: Focus Mode.  Auto-minimizing of the Console.  Display a webpage in Visual Studio Code, emulate devices, and see issues while editing.  Sources tool notifies you when sourcemaps can't be loaded.  If Sources is open, it's used rather than Visual Studio Code.
 author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: article
@@ -27,6 +27,8 @@ These are the latest features in the Stable release of Microsoft Edge DevTools.
 
 The Microsoft Edge DevTools team is experimenting with a new DevTools UI: **Focus Mode**.  Focus Mode reduces distractions and clutter with a more modern and simplified layout.  The new **Activity Bar** allows you to pin your favorite tools in a horizontal or vertical toolbar to use screen space more efficiently.
 
+**Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 To give this new UI a try in Microsoft Edge version 96, select **Settings** (![the Settings gear icon in DevTools](./devtools-images/settings-gear-icon-light-mode.png)) > **Experiments** > **Focus Mode**.
 
 Starting with Microsoft Edge version 96, the experiment's checkbox is labeled **Focus Mode** rather than **Focus Mode and DevTools Tooltips**.
diff --git a/microsoft-edge/devtools/whats-new/2022/09/devtools-105.md b/microsoft-edge/devtools/whats-new/2022/09/devtools-105.md
@@ -79,6 +79,8 @@ The **Customize and control DevTools** (**...**) menu now directly contains butt
 
 This menu also now directly contains buttons to set and indicate where the **Activity Bar** is displayed, instead of using a submenu.
 
+**Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 Selecting the docking location in Focus Mode, in previous versions of Microsoft Edge:
 
 ![Dock location menu icons before](./devtools-105-images/before-docking-menu.png)
diff --git a/microsoft-edge/devtools/whats-new/2023/02/devtools-110.md b/microsoft-edge/devtools/whats-new/2023/02/devtools-110.md
@@ -51,6 +51,8 @@ The right-click menu command for moving a tool between the **Quick View** panel
 * **Move to top Activity Bar**
 * **Move to left Activity Bar**
 
+**Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 ![Right-click menu showing 'Move to bottom Quick View'](./devtools-110-images/move-to-bottom-quick-view.png)
 
 
diff --git a/microsoft-edge/devtools/whats-new/2023/04/devtools-112.md b/microsoft-edge/devtools/whats-new/2023/04/devtools-112.md
@@ -132,6 +132,8 @@ If the **Quick View** toolbar is currently displayed (whether the **Quick View**
 
 In Focus Mode, when DevTools detects that a Node.js server is running, the Node icon is displayed.  Clicking this icon opens the dedicated DevTools for Node.
 
+**Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 Before Microsoft Edge 112, the Node icon overlaps the first tool icon when the **Activity Bar** is in vertical orientation, making it harder to select the first tool.  This issue has now been fixed; there's no overlapping of the Node icon and the first tool icon when the **Activity Bar** is vertical:
 
 ![The Node icon no longer overlaps the first tool icon in the Activity Bar](./devtools-112-images/focus-mode-node-icon-vertical-activity-bar.png)
@@ -145,6 +147,8 @@ $ node --inspect app.js
 <!-- ------------------------------ -->
 #### With the vertical Activity Bar, only one label is shown for each tool icon when hovering
 
+**Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 In **Focus Mode**, when the **Activity Bar** is in the vertical orientation, a tool name label is displayed when you hover over an icon or select an icon with the keyboard.  These labels help you learn the icon for each tool in the **Activity Bar**.
 
 Previously, selecting an icon with the keyboard or hovering over an icon with the mouse displayed two labels simultaneously.  This issue has now been fixed; only one label is displayed:
diff --git a/microsoft-edge/devtools/whats-new/2023/08/devtools-116.md b/microsoft-edge/devtools/whats-new/2023/08/devtools-116.md
@@ -24,6 +24,8 @@ todo video
 <!-- ====================================================================== -->
 ## New "Move Activity Bar" button directly on the Activity Bar
 
+**Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 In Focus Mode, you now can quickly move the **Activity Bar** with a single mouse-click.  In the upper left of DevTools, next to the **Inspect** button and **Device Emulation** button, there's now a **Move Activity Bar to left** or **Move Activity Bar to top** button:
 
 ![The 'Move Activity Bar to left' button directly on the Activity Bar](./devtools-116-images/move-activity-bar-to-left.png)
diff --git a/microsoft-edge/devtools/whats-new/2023/12/devtools-120.md b/microsoft-edge/devtools/whats-new/2023/12/devtools-120.md
@@ -27,9 +27,13 @@ todo video
 <!-- Subtitle: Introducing the all-new Edge DevTools user interface.  Check out our blog post to learn about the new Activity Bar, Quick View, and how to customize your developer tools in the redesigned DevTools UI. -->
 
 DevTools has a new look, starting with Microsoft Edge 120!  The major design updates are:
+
 * The new **Activity Bar** with icons.
+
 * The **Quick View** panel in place of the **Drawer** at the bottom of DevTools.
-* The **Activity Bar** and **Quick View** can be switched to a vertical orientation.
+
+* The **Activity Bar** and **Quick View** can be switched to a vertical orientation.  **Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 * You can easily open, close, and move tools around.
 
 ![Updated DevTools UI](./devtools-120-images/new-devtools-ui.png)
diff --git a/microsoft-edge/devtools/whats-new/2024/10/devtools-130.md b/microsoft-edge/devtools/whats-new/2024/10/devtools-130.md
@@ -60,6 +60,8 @@ See also:
 
 <!-- Subtitle: Icons in the Activity Bar are properly aligned horizontally. -->
 
+**Update:** The vertical Activity Bar is no longer supported, in Microsoft Edge 144 and future versions.
+
 When the **Activity Bar** was vertical, the icons were left-aligned:
 
 ![Broken activity bar icons](./devtools-130-images/misaligned-icons.png)
diff --git a/microsoft-edge/web-platform/release-notes/133.md b/microsoft-edge/web-platform/release-notes/133.md
@@ -111,7 +111,9 @@ Use container queries to style descendants of containers based on their scroll s
 The query container is either a scroll container, or an element affected by the scroll position of a scroll container. The following states can be queried:
 
 * `stuck`: A sticky positioned container is stuck to one of the edges of the scroll box.
+
 * `snapped`: A scroll snap aligned container is currently snapped horizontally or vertically.
+
 * `scrollable`: Whether a scroll container can be scrolled in a queried direction.
 
 A new `container-type: scroll-state` lets containers to be queried.
