diff --git a/microsoft-edge/accessibility/build/index.md b/microsoft-edge/accessibility/build/index.md index 0b54925ee0..27689bf830 100644 --- 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. + diff --git a/microsoft-edge/devtools/about-tools.md b/microsoft-edge/devtools/about-tools.md index 738e7e6977..6c262aa9bc 100644 --- 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 index 39cf70f0ea..9f0bae6ee1 100644 --- 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**. - -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. - + @@ -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 \** command. | diff --git a/microsoft-edge/devtools/whats-new/2021/11/devtools.md b/microsoft-edge/devtools/whats-new/2021/11/devtools.md index 33cfc3adc2..939bcfe3b1 100644 --- 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 index e2997b0bb5..3146cbc798 100644 --- 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 index e608ca12d3..6ddcb05e27 100644 --- 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 index 59aa71d6e2..e76eb8a660 100644 --- 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 index b384fe7455..08d73f5271 100644 --- 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 index d0148e3d9b..6dd3337b89 100644 --- 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 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 index 67e61e3fca..5db15cbb92 100644 --- 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: +**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 index 6432870191..a68d6de35d 100644 --- 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.