From 743826ccefc25b177e88c0b5183a10ba0e9d99b9 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Tue, 2 Jul 2024 17:07:30 -0700 Subject: [PATCH] global update 'drawer' --- microsoft-edge/dev-videos/index.md | 2 +- ...ommand-menu-panel-vs-quick-view-tools.png} | Bin .../devtools-guide-chromium/about-tools.md | 2 +- .../accessibility/test-issues-tool.md | 10 ++--- ...age-console-quick-view-coverage-empty.png} | Bin ...resource-quick-view-coverage-selected.png} | Bin .../devtools-guide-chromium/coverage/index.md | 4 +- .../customize/index.md | 9 +++-- ....png => animation-before-modification.png} | Bin ...completed.png => animations-completed.png} | Bin ...nimations-selected-completed-elements.png} | Bin ....png => animations-selected-completed.png} | Bin ...used.png => animations-tool-annotated.png} | Bin ...imations.png => animations-tool-empty.png} | Bin ...-theme.png => customize-devtools-icon.png} | Bin ...t.png => display-animations-highlight.png} | Bin ...-animations.png => display-animations.png} | Bin ...nimations-delay.png => modified-delay.png} | Bin ...ions-shorter.png => modified-duration.png} | Bin ...modification.png => modified-keyframe.png} | Bin ...imations.png => more-tools-animations.png} | Bin ...on-light-theme.png => more-tools-icon.png} | Bin .../inspect-styles/animations.md | 38 +++++++++--------- .../progressive-web-apps/index.md | 2 +- .../quick-source/quick-source-tool.md | 2 +- .../sample-code/sample-code.md | 6 +-- .../more-tabs-icon-light-theme.png | Bin 258 -> 0 bytes .../search/search-tool.md | 2 +- .../service-workers/index.md | 24 +++++++---- .../devtools-guide-chromium/sources/index.md | 10 ++--- .../speed/get-started.md | 2 +- .../whats-new/2020/03/devtools.md | 2 +- .../whats-new/2020/05/devtools.md | 12 +++--- .../whats-new/2020/06/devtools.md | 6 +-- .../whats-new/2020/08/devtools.md | 2 +- ...worker-application-network-quick-view.png} | Bin .../whats-new/2020/11/devtools.md | 8 ++-- .../whats-new/2021/05/devtools.md | 8 ++-- .../whats-new/2021/11/devtools.md | 6 +-- .../whats-new/2022/04/devtools-101.md | 4 +- .../whats-new/2023/06/devtools-114.md | 2 +- .../whats-new/2023/12/devtools-120.md | 2 +- 42 files changed, 89 insertions(+), 76 deletions(-) rename microsoft-edge/devtools-guide-chromium/about-tools-images/{command-menu-panel-vs-drawer-tools.png => command-menu-panel-vs-quick-view-tools.png} (100%) rename microsoft-edge/devtools-guide-chromium/coverage/index-images/{coverage-console-drawer-coverage-empty.png => coverage-console-quick-view-coverage-empty.png} (100%) rename microsoft-edge/devtools-guide-chromium/coverage/index-images/{coverage-sources-resource-drawer-coverage-selected.png => coverage-sources-resource-quick-view-coverage-selected.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-glitch-spin-animations-console-animations.png => animation-before-modification.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-elements-styles-drawer-animations-completed.png => animations-completed.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-split-elements-styles-drawer-animations-selected-completed.png => animations-selected-completed-elements.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-elements-styles-drawer-animations-selected-completed.png => animations-selected-completed.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-elements-styles-drawer-animations-selected-paused.png => animations-tool-annotated.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-elements-styles-drawer-animations.png => animations-tool-empty.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{customize-devtools-icon-light-theme.png => customize-devtools-icon.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-glitch-display-animations-highlight.png => display-animations-highlight.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-glitch-display-animations.png => display-animations.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-glitch-spin-animations-console-animations-delay.png => modified-delay.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-glitch-spin-animations-console-animations-shorter.png => modified-duration.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-glitch-spin-animations-console-animations-keyframe-modification.png => modified-keyframe.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{inspect-styles-elements-styles-more-tools-animations.png => more-tools-animations.png} (100%) rename microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/{more-tools-icon-light-theme.png => more-tools-icon.png} (100%) delete mode 100644 microsoft-edge/devtools-guide-chromium/search/search-tool-images/more-tabs-icon-light-theme.png rename microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools-images/{service-worker-application-network-drawer.png => service-worker-application-network-quick-view.png} (100%) diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index b4d8f64057..64e0f42a31 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -491,7 +491,7 @@ Learn how to customize DevTools to fit your needs. Covers: * Dock or undock DevTools. * Open new tools. * Close tools that you don't need. -* Move tools in the bottom drawer (now the **Quick View** panel). +* Move tools in the bottom **Drawer** (now the **Quick View** panel). * Customize the text size. * Customize the theme. * Use the Command Menu keyboard shortcuts to quickly customize DevTools. diff --git a/microsoft-edge/devtools-guide-chromium/about-tools-images/command-menu-panel-vs-drawer-tools.png b/microsoft-edge/devtools-guide-chromium/about-tools-images/command-menu-panel-vs-quick-view-tools.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/about-tools-images/command-menu-panel-vs-drawer-tools.png rename to microsoft-edge/devtools-guide-chromium/about-tools-images/command-menu-panel-vs-quick-view-tools.png diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index c17220b5f1..6193acb2a1 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -93,7 +93,7 @@ _Activity Bar tools_ are tools that open in the **Activity Bar** (the upper pane The **Command Menu** first lists the **Activity Bar** tools (indicated by the **Panel** label), and then the **Quick View** tools: -![The Command Menu, showing the Panel tools grouped together, and then the Quick View tools](./about-tools-images/command-menu-panel-vs-drawer-tools.png) +![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**: diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool.md b/microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool.md index 48b904c741..dcc26d6dff 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool.md @@ -10,7 +10,7 @@ ms.date: 06/07/2021 --- # Automatically test a webpage for accessibility issues -The **Issues** tool includes an **Accessibility** section that automatically reports issues such as missing alternative text on images, missing labels on form fields, and insufficient contrast of text colors. The **Issues** tool is within the **Drawer** at the bottom of DevTools. This article uses the accessibility-testing demo webpage to step through using the **Accessibility** section of the **Issues** tool. +The **Issues** tool includes an **Accessibility** section that automatically reports issues such as missing alternative text on images, missing labels on form fields, and insufficient contrast of text colors. By default, the **Issues** tool is open in the **Quick View** panel at the bottom of DevTools. This article uses the accessibility-testing demo webpage to step through using the **Accessibility** section of the **Issues** tool. There are several ways to open the **Issues** tool, such as: @@ -34,7 +34,7 @@ There are several ways to open the **Issues** tool, such as: 1. Refresh the page, because some issues are reported based on network requests. Notice the updated count in the **Issues counter**. -1. Click the **Issues counter**. The **Issues** tool opens, in the **Drawer** at the bottom of DevTools. +1. Click the **Issues counter**. The **Issues** tool opens in the **Quick View** panel at the bottom of DevTools: ![Accessibility warnings displayed in the Issues tool](./test-issues-tool-images/a11y-testing-accessibility-issues.png) @@ -50,7 +50,7 @@ To check whether input fields have labels connected to them, use the **Issues** 1. Right-click anywhere in the webpage and then select **Inspect**. Or, press **F12**. DevTools opens next to the webpage. -1. In the upper right, click the **Issues counter** (![Issues counter](./test-issues-tool-images/issues-counter-icon.png)). The **Issues** tool opens, in the **Drawer** at the bottom of DevTools. +1. In the upper right, click the **Issues counter** (![Issues counter](./test-issues-tool-images/issues-counter-icon.png)). The **Issues** tool opens in the **Quick View** panel at the bottom of DevTools. 1. On the **Issues** tab, expand the **Accessibility** section. @@ -96,7 +96,7 @@ There's also another way to test for lack of connections between elements: Basic accessibility testing requires making sure alternative text (also called _alt text_) is provided for images. -To automatically check whether alt text is provided for images, use the **Issues** tool, which has an **Accessibility** section. The **Issues** tool is located in the **Drawer** at the bottom of DevTools. +To automatically check whether alt text is provided for images, use the **Issues** tool, which has an **Accessibility** section. By default, the **Issues** tool is open in the **Quick View** panel at the bottom of DevTools. 1. Open the [accessibility-testing demo webpage](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new window or tab. @@ -114,7 +114,7 @@ See [Images must have alternate text](https://dequeuniversity.com/rules/axe/4.1/ ## Verify that text colors have enough contrast -To automatically check whether text colors have enough contrast, use the **Issues** tool, which has an **Accessibility** section. The **Issues** tool is located in the **Drawer** at the bottom of DevTools. +To automatically check whether text colors have enough contrast, use the **Issues** tool, which has an **Accessibility** section. By default, the **Issues** tool is open in the **Quick View** panel at the bottom of DevTools. 1. Open the [accessibility-testing demo webpage](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new window or tab. diff --git a/microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-console-drawer-coverage-empty.png b/microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-console-quick-view-coverage-empty.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-console-drawer-coverage-empty.png rename to microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-console-quick-view-coverage-empty.png diff --git a/microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-sources-resource-drawer-coverage-selected.png b/microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-sources-resource-quick-view-coverage-selected.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-sources-resource-drawer-coverage-selected.png rename to microsoft-edge/devtools-guide-chromium/coverage/index-images/coverage-sources-resource-quick-view-coverage-selected.png diff --git a/microsoft-edge/devtools-guide-chromium/coverage/index.md b/microsoft-edge/devtools-guide-chromium/coverage/index.md index 787e1252bd..d18625b4fb 100644 --- a/microsoft-edge/devtools-guide-chromium/coverage/index.md +++ b/microsoft-edge/devtools-guide-chromium/coverage/index.md @@ -62,7 +62,7 @@ To find unused code in your page, use the **Coverage** tool: The **Coverage** tool opens in the **Quick View** panel at the bottom of DevTools: - ![The Coverage tool](./index-images/coverage-console-drawer-coverage-empty.png) + ![The Coverage tool](./index-images/coverage-console-quick-view-coverage-empty.png) @@ -82,7 +82,7 @@ To find unused code in your page, use the **Coverage** tool: The table in the **Coverage** tool displays the resources that were analyzed, and how much code is used within each resource. Click a row to open that resource in the **Sources** tool and display a code coverage report that gives a line-by-line breakdown of used code and unused code: -![A code coverage report](./index-images/coverage-sources-resource-drawer-coverage-selected.png) +![A code coverage report](./index-images/coverage-sources-resource-quick-view-coverage-selected.png) Columns in the code coverage report: diff --git a/microsoft-edge/devtools-guide-chromium/customize/index.md b/microsoft-edge/devtools-guide-chromium/customize/index.md index c1f55a5f2d..e37c62aa31 100644 --- a/microsoft-edge/devtools-guide-chromium/customize/index.md +++ b/microsoft-edge/devtools-guide-chromium/customize/index.md @@ -43,7 +43,7 @@ In the **Quick View** toolbar in the bottom of DevTools, you can select which to To open (or close) the **Quick View** panel, press **Esc** when focus is on DevTools. -![The Drawer](./index-images/quick-view.png) +![The Quick View panel](./index-images/quick-view.png) You can move tools between the **Activity Bar** (at the top) and the **Quick View** toolbar (at the bottom). @@ -122,6 +122,7 @@ See [Customize keyboard shortcuts](../customize/shortcuts.md). ## Videos about Customizing the DevTools UI + #### Customizing Microsoft Edge Developer Tools and quick feature access _Published on 5 May 2022._ @@ -130,9 +131,10 @@ _Published on 5 May 2022._ Learn how to customize DevTools to fit your needs. -This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the bottom drawer and customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools. +This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the **Drawer** (now **Quick View** panel) at the bottom of DevTools, and how to customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools. + #### Understand the DevTools user interface _Published on 1 September 2022._ @@ -141,13 +143,14 @@ _Published on 1 September 2022._ Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable. -In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools. +In this video, we go over the UI structure, with its main toolbar and panel, and the **Drawer** (now **Quick View** panel). We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools. Check out this video to learn about the main parts of the DevTools UI, how to customize it to meet your needs, learn about the different tools that are available, and where to go for help. + #### See also * [Videos about web development with Microsoft Edge](../../dev-videos/index.md) diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animation-before-modification.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animation-before-modification.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations-completed.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-completed.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations-completed.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-completed.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-split-elements-styles-drawer-animations-selected-completed.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-selected-completed-elements.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-split-elements-styles-drawer-animations-selected-completed.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-selected-completed-elements.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations-selected-completed.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-selected-completed.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations-selected-completed.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-selected-completed.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations-selected-paused.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-tool-annotated.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations-selected-paused.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-tool-annotated.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-tool-empty.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-drawer-animations.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/animations-tool-empty.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/customize-devtools-icon-light-theme.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/customize-devtools-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/customize-devtools-icon-light-theme.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/customize-devtools-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-display-animations-highlight.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/display-animations-highlight.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-display-animations-highlight.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/display-animations-highlight.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-display-animations.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/display-animations.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-display-animations.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/display-animations.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations-delay.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/modified-delay.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations-delay.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/modified-delay.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations-shorter.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/modified-duration.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations-shorter.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/modified-duration.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations-keyframe-modification.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/modified-keyframe.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-glitch-spin-animations-console-animations-keyframe-modification.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/modified-keyframe.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-more-tools-animations.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/more-tools-animations.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/inspect-styles-elements-styles-more-tools-animations.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/more-tools-animations.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/more-tools-icon-light-theme.png b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/more-tools-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/more-tools-icon-light-theme.png rename to microsoft-edge/devtools-guide-chromium/inspect-styles/animations-images/more-tools-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md index 64e848a56e..efd47ac8d8 100644 --- a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md +++ b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md @@ -26,7 +26,7 @@ ms.date: 05/11/2021 Inspect and modify CSS animation effects by using the **Animation Inspector** in the **Animations** tool. -![The Animations tool](./animations-images/inspect-styles-elements-styles-drawer-animations-completed.png) +![The Animations tool](./animations-images/animations-completed.png) ### Summary @@ -60,17 +60,17 @@ In other words, a set of animations that are all triggered in the same script bl To open the Animation Inspector, use any of these approaches, in DevTools: -* From the **main toolbar** or on the **Drawer**: click the **More Tools** (![More Tools icon](./animations-images/more-tools-icon-light-theme.png)) button, and then select **Animations**. +* From the toolbar of the **Activity Bar** or **Quick View**: Click the **More Tools** (![More Tools icon](./animations-images/more-tools-icon.png)) button, and then select **Animations**. - ![Animations using Main Menu](./animations-images/inspect-styles-elements-styles-more-tools-animations.png) + ![Animations using Main Menu](./animations-images/more-tools-animations.png) -* From the **Customize** menu: Click the **Customize and control DevTools** (![Customize icon](./animations-images/customize-devtools-icon-light-theme.png)) menu button, point to the **More tools** sub-menu, and then select **Animations**. +* From the **Customize** menu: Click the **Customize and control DevTools** (![Customize icon](./animations-images/customize-devtools-icon.png)) menu button, point to the **More tools** sub-menu, and then select **Animations**. -* From the **Command Menu**: When DevTools has focus, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**, start typing `animations`, and then select **Drawer: Show Animations**. +* From the **Command Menu**: When DevTools has focus, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**, start typing `animations`, and then select **Show Animations [Quick View]**. -By default, the **Animations** tool opens in the **Drawer**, next to the **Console** tool. By using the **Animations** tool on the **Drawer**, you can use it at the same time as using another tools on the main toolbar. +By default, the **Animations** tool opens in the **Quick View** panel at the bottom of DevTools. By using the **Animations** tool on the **Quick View** panel, you can use the **Animations** tool side-by-side with another tool that's open in the **Activity Bar** panel. -![Empty Animation Inspector](./animations-images/inspect-styles-elements-styles-drawer-animations.png) +![Empty Animation Inspector](./animations-images/animations-tool-empty.png) The Animation Inspector is grouped into four main sections (or panes). This guide refers to each pane as follows: @@ -81,9 +81,9 @@ The Animation Inspector is grouped into four main sections (or panes). This gui | 3 | **Timeline** | Pause and start an animation from here, or jump to a specific point in the animation. | | 4 | **Details** | Inspect and modify the currently selected Animation Group. | -![Annotated Animation Inspector](./animations-images/inspect-styles-elements-styles-drawer-animations-selected-paused.png) +![Annotated Animation Inspector](./animations-images/animations-tool-annotated.png) -To capture an animation, just perform the interaction that triggers the animation while the Animation Inspector is open. If an animation is triggered on page load, refresh the page with the Animation Inspector open to detect the animation. +To capture an animation, perform the interaction that triggers the animation while the Animation Inspector is open. If an animation is triggered on page load, refresh the page with the Animation Inspector open to detect the animation. @@ -103,21 +103,21 @@ After you capture an animation, there are a few ways to replay it: ### View animation details -After you capture an Animation Group, click on it from the **Overview** pane to view the details. In the **Details** pane, each individual animation is assigned to a row. +After you capture an Animation Group, click on it from the **Overview** pane to view the details. In the **Details** pane, each individual animation is assigned to a row: -![Animation Group details](./animations-images/inspect-styles-elements-styles-drawer-animations-selected-completed.png) +![Animation Group details](./animations-images/animations-selected-completed.png) -Hover on an animation to highlight it in the viewport. Click on the animation to select it in the **Elements** tool. +Hover on an animation to highlight it in the viewport. Click on the animation to select it in the **Elements** tool: -![Hover on the animation to highlight it in viewport](./animations-images/inspect-styles-split-elements-styles-drawer-animations-selected-completed.png) +![Hover on the animation to highlight it in viewport](./animations-images/animations-selected-completed.png) The leftmost, darker section of an animation is its definition. The right, more faded section represents iterations. For example, in the following figure, sections two and three represent iterations of section one: -![Diagram of animation iterations](./animations-images/inspect-styles-glitch-display-animations-highlight.png) +![Diagram of animation iterations](./animations-images/display-animations-highlight.png) If two elements have the same animation applied to them, the Animation Inspector assigns the same color to the elements. The color is random and has no significance. For example, in the following figure, the two elements `div.cwccw.earlier` and `div.cwccw.later` have the same animation (`spinrightleft`) applied, as do the `div.ccwcw.earlier` and `div.ccwcw.later` elements. -![Color-coded animations](./animations-images/inspect-styles-glitch-display-animations.png) +![Color-coded animations](./animations-images/display-animations.png) @@ -131,19 +131,19 @@ There are three ways you can modify an animation with the Animation Inspector: For this section, suppose that the screenshot below represents the original animation: -![Original animation before modification](./animations-images/inspect-styles-glitch-spin-animations-console-animations.png) +![Original animation before modification](./animations-images/animation-before-modification.png) To change the duration of an animation, click and drag the first or last circle. -![Modified duration](./animations-images/inspect-styles-glitch-spin-animations-console-animations-shorter.png) +![Modified duration](./animations-images/modified-duration.png) If the animation defines any keyframe rules, then these are represented as white-filled inner circles. Click and drag a white-filled inner circle to change the timing of the keyframe: -![Modified keyframe](./animations-images/inspect-styles-glitch-spin-animations-console-animations-keyframe-modification.png) +![Modified keyframe](./animations-images/modified-keyframe.png) To add a delay to an animation, click the animation anywhere except the circles, and drag it: -![Modified delay](./animations-images/inspect-styles-glitch-spin-animations-console-animations-delay.png) +![Modified delay](./animations-images/modified-delay.png) diff --git a/microsoft-edge/devtools-guide-chromium/progressive-web-apps/index.md b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/index.md index e59ab74988..25e476d52d 100644 --- a/microsoft-edge/devtools-guide-chromium/progressive-web-apps/index.md +++ b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/index.md @@ -90,7 +90,7 @@ The **Add to homescreen** button on the **App Manifest** pane lets you simulate +> Keep the **Console** open in the **Quick View** panel at the bottom of DevTools while simulating Add to Homescreen events. The Console tells you if your manifest has any issues and logs other information about the Add to Homescreen lifecycle. --> diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md index fff6d05db0..50e4bf5eae 100644 --- a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md +++ b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md @@ -12,7 +12,7 @@ ms.date: 01/20/2022 Use the **Quick source** tool to display or edit source files when using a tool other than the **Sources** tool. -The main place to view source files in the DevTools is within the **Sources** tool. But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files. You use the **Quick source** tool in the **Drawer**, which appears at the bottom of DevTools. +The main place to view source files in the DevTools is within the **Sources** tool. But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files. Use the **Quick source** tool, which by default opens in the **Quick View** panel at the bottom of DevTools. See: * [Displaying source files when using a different tool](../sources/index.md#displaying-source-files-when-using-a-different-tool) in _Sources tool overview_ diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md index c49e15bbf5..35f67220a4 100644 --- a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md +++ b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md @@ -272,9 +272,9 @@ To open an `.html` file and edit it: 1. In DevTools, on the left, select the **Page** tab, and then select the HTML file, such as `index.html` or **(index)**. -1. Press **Esc** to open the **Drawer** at the bottom of DevTools. +1. Press **Esc** to open the **Quick View** panel at the bottom of DevTools. -1. In the Drawer, click the **More Tools** (![More Tools icon](./sample-code-images/more-tools-icon-light-theme.png)) button, and then select the **Changes** tool. +1. In the **Quick View** toolbar, click the **More Tools** (![More Tools icon](./sample-code-images/more-tools-icon-light-theme.png)) button, and then select the **Changes** tool. 1. In the middle, editor pane of the **Sources** tool, edit the `.html` file. For example, in `demo-to-do/index.html` folder, in the `

` heading line, change **My tasks** to **My modified tasks**: @@ -284,7 +284,7 @@ To open an `.html` file and edit it: If editing isn't enabled, click the **Allow** button to grant read/write access to the folder by doing the steps in [Opening a folder from the Filesystem (Workspace) tab in the Sources tool](#opening-a-folder-from-the-filesystem-workspace-tab-in-the-sources-tool) above. - The change is displayed in the **Changes** tool in the Drawer, and an asterisk is added to the file name in the **index.html** tab in the **Sources** tool: + The change is displayed in the **Changes** tool in the **Quick View** panel, and an asterisk is added to the file name in the **index.html** tab in the **Sources** tool: ![The modified demo-to-do page before saving changes](./sample-code-images/modified-demo-to-do-before-save.png) diff --git a/microsoft-edge/devtools-guide-chromium/search/search-tool-images/more-tabs-icon-light-theme.png b/microsoft-edge/devtools-guide-chromium/search/search-tool-images/more-tabs-icon-light-theme.png deleted file mode 100644 index 9ecaa5aca41aae1fd1436d231a39a98d0c50f568..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 258 zcmeAS@N?(olHy`uVBq!ia0vp^+#ogw6OjBcojC_cF%}28J29*~C-V}>VM%xNb!1@J z*w6hZkrl}2EbxddW?rJWmXhm{n*I(fsv`8fpJ4K zW6J^tW{U$1`(;nHW_wmoj@eY5A7R#U@Ar=f8IBgulX_NrYDQ-BdtQl}8kDm7`2j`F zeX39AtUTFcSgqy5EVtxzL;a;(hK*B-uC6tG6?E!4&)To^4(?NAc~#v%-_Yl=V%tx- zBfo9;e1FriJxbuuE%gt55-is7Pk(nQ%O&q&Fx&6B#OjpTL!c8GJYD@<);T3K0RSiN BUwr@o diff --git a/microsoft-edge/devtools-guide-chromium/search/search-tool.md b/microsoft-edge/devtools-guide-chromium/search/search-tool.md index be751a41ee..babd791d95 100644 --- a/microsoft-edge/devtools-guide-chromium/search/search-tool.md +++ b/microsoft-edge/devtools-guide-chromium/search/search-tool.md @@ -24,7 +24,7 @@ To quickly open the **Search** tool: 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, press **Esc** to open the Drawer, and then on the Drawer toolbar, select the **Search** tab. If that tab isn't visible, click the **More tabs** (![More tabs icon](./search-tool-images/more-tabs-icon-light-theme.png)) button, or else the **More Tools** (![More Tools icon](./search-tool-images/more-tools-icon-light-theme.png)) button. +1. Press **Esc** to open the **Quick View** panel at the bottom of DevTools, and then on the **Quick View** toolbar, select the **Search** tab. If that tab isn't visible, click the **More Tools** (![More Tools icon](./search-tool-images/more-tools-icon-light-theme.png)) button. Or, press **Ctrl+Shift+F** (Windows, Linux) or **Command+Option+F** (macOS). diff --git a/microsoft-edge/devtools-guide-chromium/service-workers/index.md b/microsoft-edge/devtools-guide-chromium/service-workers/index.md index a2a7b7c148..df8e62f342 100644 --- a/microsoft-edge/devtools-guide-chromium/service-workers/index.md +++ b/microsoft-edge/devtools-guide-chromium/service-workers/index.md @@ -41,16 +41,20 @@ You can access the service worker debugging features in the **Network** tool in * Directly in the **Network** tool. * Started in the **Application** tool. -### Request routing + + +#### Request routing To make request routing easier to visualize, timelines now display the service worker start-up and the `respondWith` fetch events. To debug and visualize a network request that passed through a service worker: 1. Select the network request that went through a service worker. 1. Open the **Timing** tool. -### Fetch events -To learn more about the `respondWith` fetch events, click the dropdown arrow to the left of the `respondWith`. To find more details about the **Original Request** and **Response Received**, click the corresponding dropdown arrows. + +#### Fetch events + +To learn more about the `respondWith` fetch events, click the dropdown arrow to the left of the `respondWith`. To see more details about the **Original Request** and **Response Received**, click the corresponding dropdown arrows. @@ -58,13 +62,17 @@ To learn more about the `respondWith` fetch events, click the dropdown arrow to ![Application view](./index-images/sw-application-timeline.png) -### Service worker update timeline + + +#### Service worker update timeline The Microsoft Edge DevTools team added a timeline in the **Application** tool to reflect the update lifecycle of the service worker. This timeline displays the installation and activation events. Each of the events have a corresponding dropdown arrow to give you more details. -### Request routing and fetch events -You can now access the service worker timelines through the **Network** tool in the console drawer. This feature benefits performance, minimizes UI duplication, and creates a more comprehensive debugging experience. + +#### Request routing and fetch events + +You can now access the service worker timelines through the **Network** tool. This feature benefits performance, minimizes UI duplication, and creates a more comprehensive debugging experience. 1. Open the service worker that you're debugging. @@ -86,6 +94,8 @@ To find more stack information, set a break point in the fetch handler. The det When the debugger pauses inside a fetch handler, a combined stack information is displayed in the panel to the right. After that, you can move around in the stack frames. -### Future work + + +#### Future work The Microsoft Edge DevTools team plans to further develop the cache detail, and are investigating more ways to improve the service worker debugging experience for [Progressive Web Application (PWA)](https://developer.mozilla.org/docs/Web/Progressive_web_apps) developers. diff --git a/microsoft-edge/devtools-guide-chromium/sources/index.md b/microsoft-edge/devtools-guide-chromium/sources/index.md index eb1d713faa..8bf5abde91 100644 --- a/microsoft-edge/devtools-guide-chromium/sources/index.md +++ b/microsoft-edge/devtools-guide-chromium/sources/index.md @@ -306,9 +306,9 @@ To find and replace text, select the **Replace** (**A-\>B**) button to the left To review the changes you made to a file, right-click in the **Editor** pane and then select **Local Modifications**. -The **Drawer** opens at the bottom of DevTools, showing your changes within the **Changes** tab. +The **Quick View** panel opens at the bottom of DevTools, showing your changes within the **Changes** tab. -![Showing Local Modifications, in the Changes tab of the Drawer](./index-images/local-modifications.png) --> +![Showing Local Modifications, in the Changes tab in the Quick View panel](./index-images/local-modifications.png) --> #### Displaying source files when using a different tool -The main place to view source files in the DevTools is within the **Sources** tool. But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files. You use the **Quick source** tool in the [Drawer](../customize/index.md#quick-view), which appears at the bottom of DevTools. +The main place to view source files in the DevTools is within the **Sources** tool. But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files. You use the **Quick source** tool in the [Quick View](../customize/index.md#quick-view) panel at the bottom of DevTools. To use the **Quick source** tool: @@ -437,7 +437,7 @@ To use the **Quick source** tool: 1. Type **quick**, and then select **Show Quick source**. - At the bottom of the DevTools window, the Drawer appears, with the **Quick source** tool selected. The **Quick source** tool contains the last file you edited in the **Sources** tool, within a compact version of the DevTools code editor. + The **Quick View** panel opens at the bottom of DevTools, with the **Quick source** tool selected. The **Quick source** tool contains the last file you edited in the **Sources** tool, within a compact version of the DevTools code editor. 1. Press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS) to open the **Open File** dialog. @@ -499,7 +499,7 @@ To use a debugger on a webpage, you typically set a breakpoint and then send a f At this point, you could add expressions in the **Watch** pane. These expressions are the same expressions that you would write within a `console.log` statement to debug your code. - To run JavaScript commands to manipulate data in the current context, you use the **Console**. If you want to open the console in the Drawer at the bottom of DevTools, press **Esc**. + To run JavaScript commands to manipulate data in the current context, you use the **Console**. If you want to open the Console in the **Quick View** panel at the bottom of DevTools, press **Esc**. 1. Step through the code by using the controls at the top of the **Debugger** pane, such as **Step** (**F9**). diff --git a/microsoft-edge/devtools-guide-chromium/speed/get-started.md b/microsoft-edge/devtools-guide-chromium/speed/get-started.md index fa2e71d377..c98166c7df 100644 --- a/microsoft-edge/devtools-guide-chromium/speed/get-started.md +++ b/microsoft-edge/devtools-guide-chromium/speed/get-started.md @@ -258,7 +258,7 @@ To confirm the amount of unused code and possibly find other resources that are 1. In the **Coverage** tool, click **Start instrumenting coverage and refresh the page** (![Refresh icon](./get-started-images/reload-icon.png)). The **Coverage** tool provides an overview of how much of the JavaScript and CSS code that's loaded on the page was actually run. - ![The Coverage tool, in the Drawer panel, showing the report of how much code is unused](./get-started-images/coverage-report.png) + ![The Coverage tool in the Quick View panel at the bottom of DevTools, showing the report of how much code is unused](./get-started-images/coverage-report.png) The coverage report confirms that the Bing Map dependencies contain code that's unused when the page loads. The map on the demo website isn't visible when the page first loads. There's a good opportunity to improve performance by loading the Bing Map only when that section of the page becomes visible to users. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md index 6a7d415af6..2c5641e527 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md @@ -107,7 +107,7 @@ See also: The **Changes tool** tracks any changes you have made to CSS or JavaScript in DevTools. You can use the **Changes tool** to quickly display all your changes and take those back to your editor/IDE. -To open the **Changes** tool, in DevTools, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the [Command Menu](../../../command-menu/index.md), and then type `changes`. Select the **Show Changes** command and then press **Enter**. The **Changes tool** opens in the Drawer. +To open the **Changes** tool, in DevTools, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the [Command Menu](../../../command-menu/index.md), and then type `changes`. Select the **Show Changes** command and then press **Enter**. The **Changes tool** opens in the **Quick View** panel at the bottom of DevTools. When you have made a change to a minified file, the **Changes tool** enables you to scroll horizontally to display all of your minified code. Starting in Microsoft Edge 83, you can now scroll horizontally using the arrow keys on your keyboard. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md index 59ce5954f4..66eab56cc9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools.md @@ -96,15 +96,15 @@ Click **inspect** for the tab or PWA that you want to debug, to open DevTools. -### Resize the DevTools drawer more easily +### Resize the DevTools Quick View panel more easily -In Microsoft Edge 83 or earlier, you resized the [DevTools Drawer](../../../customize/index.md#quick-view) by hovering inside the toolbar of the drawer. The drawer behaved differently than the other resize controls for panes in DevTools where you hover on the border of the pane to resize it. The following image shows how resizing the drawer worked in Microsoft Edge version 83 or earlier: +In Microsoft Edge 83 or earlier, you resized the **Drawer** (now [Quick View](../../../customize/index.md#quick-view) panel) by hovering inside the **Drawer**'s toolbar. The **Drawer** behaved differently than the other resize controls for panes in DevTools where you hover on the border of the pane to resize it. The following image shows how resizing the **Drawer** worked in Microsoft Edge version 83 or earlier: -![Resizing the DevTools Drawer in Microsoft Edge 83](./devtools-images/drawer-83.png) +![Resizing the Drawer in Microsoft Edge 83](./devtools-images/drawer-83.png) -Starting with Microsoft Edge 84, you can resize the drawer by hovering over the border. This change aligns the behavior for resizing the DevTools drawer with other panes in DevTools. The following image shows how resizing the drawer works in Microsoft Edge 84 or later: +Starting with Microsoft Edge 84, you can resize the **Drawer** by hovering over the border. This change aligns the behavior for resizing the **Drawer** with other panes in DevTools. The following image shows how resizing the **Drawer** works in Microsoft Edge 84 or later: -![Resizing the DevTools Drawer in Microsoft Edge 84](./devtools-images/drawer-84.png) +![Resizing the Drawer in Microsoft Edge 84](./devtools-images/drawer-84.png) Chromium issue [#1076112](https://crbug.com/1076112) @@ -141,7 +141,7 @@ The following sections announce additional features available in Microsoft Edge ### Fix site issues with the new Issues tool in the DevTools Drawer -The new **Issues** tool in the Drawer at the bottom of DevTools reduces the notification fatigue and clutter of the **Console**. Currently, the **Console** is the central place for website developers, libraries, frameworks, and Microsoft Edge to log messages, warnings, and errors. The **Issues** tool aggregates warnings from the browser in a structured, aggregated, and actionable way. The **Issues** tool links to affected resources within DevTools, and provides guidance on how to fix the issues. +The new **Issues** tool in the **Drawer** (now **Quick View** panel) at the bottom of DevTools reduces the notification fatigue and clutter of the **Console**. Currently, the **Console** is the central place for website developers, libraries, frameworks, and Microsoft Edge to log messages, warnings, and errors. The **Issues** tool aggregates warnings from the browser in a structured, aggregated, and actionable way. The **Issues** tool links to affected resources within DevTools, and provides guidance on how to fix the issues. Over time, more warnings will be surfaced in the **Issues** tool rather than in the **Console**, to streamline the **Console** messages. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md index 5baf5c8b49..941332fa05 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/06/devtools.md @@ -54,13 +54,13 @@ You can now use **Edit and Replay** on requests in the [Network Log](../../../ne ![Edit and Replay a request in the NetworkLog with the Network Console](./devtools-images/experiments-network-console-edit-and-replay.png) -A new panel, the **Network Console** opens in the [DevTools Drawer](../../../customize/index.md#quick-view) and automatically populates with information for the HTTP request. To display the response returned from the server, edit the request (if needed) and select **Send**. +The new **Network Console** tool opens in the [Quick View](../../../customize/index.md#quick-view) panel at bottom of DevTools, and automatically populates with information for the HTTP request. To display the response that's returned from the server, edit the request (if needed) and then select **Send**. You can also use the **Network Console** to create and send HTTP requests directly from the DevTools. ![The Network Console panel](./devtools-images/experiments-network-console.png) -Tip: To display **Network Console** in the main (top) panel instead of the [DevTools Drawer](../../../customize/index.md#quick-view), see [moving tools between panels](#move-tools-between-panels). +Tip: To display **Network Console** in the main (top) panel instead of in the [Quick View](../../../customize/index.md#quick-view) panel, see [Move tools between panels](#move-tools-between-panels), below. Update: This feature has been released and is no longer experimental. @@ -106,7 +106,7 @@ See also: ### Move tools between panels -Normally, tools such as **Elements** and **Network** may only be opened in the main (top) panel of DevTools. Similarly, tools such as **3D View** and **Issues** may only be opened in the drawer (bottom) panel of DevTools. You can now customize your DevTools layout by moving tools between the top and bottom panels. +Previously, tools such as **Elements** and **Network** could only be opened in the main (top) panel of DevTools. Similarly, tools such as **3D View** and **Issues** could only be opened in the **Drawer** (now **Quick View** panel) at the bottom of DevTools. You can now customize your DevTools layout by moving tools between the top and bottom panels. ![Move tools between panels](./devtools-images/experiments-move-panels.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md index d5cd918d17..4ac75a6c16 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md @@ -261,7 +261,7 @@ See also [Analyze rendering performance with the Rendering tool](../../../evalua ### Emulate inactive users -The [Idle Detection API](https://web.dev/idle-detection) allows developers to detect inactive users and react on idle state changes. You can now use DevTools to emulate idle state changes in the **Sensors** tool for both the user state and the screen state instead of waiting for the actual idle state to change. You can open the **Sensors** tool from the [Drawer](../../../customize/index.md#quick-view). +The [Idle Detection API](https://web.dev/idle-detection) allows developers to detect inactive users and react on idle state changes. You can now use DevTools to emulate idle state changes in the **Sensors** tool for both the user state and the screen state instead of waiting for the actual idle state to change. You can open the **Sensors** tool in the [Quick View](../../../customize/index.md#quick-view) panel at the bottom of DevTools. ![Emulate inactive users](./devtools-images/emulate-idle.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools-images/service-worker-application-network-drawer.png b/microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools-images/service-worker-application-network-quick-view.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools-images/service-worker-application-network-drawer.png rename to microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools-images/service-worker-application-network-quick-view.png diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools.md index 520e37db15..2d984b7273 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/11/devtools.md @@ -141,13 +141,13 @@ To display additional context when debugging a service worker: ![Opening the Network tool from the Service Workers pane](./devtools-images/service-worker-application-network-requests.png) - The **Network** tool opens in the **Drawer** and displays all service worker-related network requests. The network requests are filtered using `is:service-worker-intercepted`: + The **Network** tool opens in the **Quick View** panel at the bottom of DevTools, and displays all service worker-related network requests. The network requests are filtered using `is:service-worker-intercepted`: - ![The Network tool in the Drawer](./devtools-images/service-worker-application-network-drawer.png) + ![The Network tool in Quick View](./devtools-images/service-worker-application-network-quick-view.png) -1. To move the **Network** tool to the top panel, close the **Drawer**: +1. To move the **Network** tool to the top panel, close the **Quick View** panel: - ![Close the Drawer to move the Network tool to the main toolbar](./devtools-images/service-worker-application-network-return.png) + ![Close Quick View to move the Network tool to the main toolbar](./devtools-images/service-worker-application-network-return.png) See also: * [Application tool, to manage storage](../../../storage/application-tool.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md index 5b2b3ccb33..5c1c0446be 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/05/devtools.md @@ -36,13 +36,13 @@ In Microsoft Edge version 91 or earlier, the **Close** button to close DevTools -There's a new way to open more tools in Microsoft Edge DevTools: the **More Tools** (`+`) menu. The **More Tools** menu appears on the toolbar in the main panel and on the toolbar of the drawer. Selecting a tool from the **More Tools** menu adds the tool to the toolbar. +There's a new way to open more tools in Microsoft Edge DevTools: the **More Tools** (`+`) menu. The **More Tools** menu appears on the toolbar in the main panel and on the toolbar of the **Drawer** (now **Quick View** panel). Selecting a tool from the **More Tools** menu adds the tool to the toolbar. To reorder the tabs on either toolbar, select and drag the tabs. The **More Tools** menu was available as an experiment in Microsoft Edge version 89, and is now always present. -![The More Tools button on the upper toolbar and drawer toolbar](./devtools-images/more-tools-button.png) +![The More Tools button on the upper toolbar and Drawer toolbar](./devtools-images/more-tools-button.png) ![The More Tools menu](./devtools-images/more-tools-menu.png) @@ -56,7 +56,7 @@ See also: -Tabs for each tool have been reformatted to reduce the chance of accidentally closing a tool. On each tab in the main toolbar and in the toolbar of the drawer, we added: +Tabs for each tool have been reformatted to reduce the chance of accidentally closing a tool. On each tab in the main toolbar and in the toolbar of the **Drawer** (now **Quick View** panel), the following have been added: * Spacing around the tab. * Spacing around the close (`x`) button in the tab. * A background color when hovering over the tab. @@ -77,7 +77,7 @@ These improvements are especially relevant for users of localized DevTools, in w ![Localized DevTools with narrow tabs](./devtools-images/hovering-reduced-chance-of-closing-tab.png) -We also made it easier to re-add a tool that you closed by adding a [More Tools menu](#add-tools-quickly-with-the-new-more-tools-button) to the main toolbar and drawer toolbar. +It's now easier to re-add a tool that you closed: a [More Tools menu](#add-tools-quickly-with-the-new-more-tools-button) has been added to the main toolbar and the **Drawer** (now **Quick View**) toolbar. See also: * [About the list of tools](../../../about-tools.md#the-more-tools-menus) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md index 128dd4ec47..341030c319 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md @@ -47,7 +47,7 @@ See also: Since Microsoft Edge version 87, you've been able to move any tool between the top and bottom panels, including the Console tool. However, we heard from developers that moving the Console tool repeatedly was cumbersome. As of Microsoft Edge version 96, the default experience for the Console tool has been restored, allowing you to quickly switch between a full-screen view of the Console (in the top panel) and a split-screen view (with the Console displayed in the bottom panel), without moving the Console tool. -The **Console** can be opened in the bottom panel (the **Drawer**) while another tool is open: +The **Console** can be opened in the **Drawer** (now **Quick View**) at the bottom of DevTools, alongside another tool: ![When a tool other than the Console is selected in the main toolbar, the Drawer opens and shows the Console](./devtools-images/console-displayed-when-elements-tab-selected.png) @@ -59,7 +59,7 @@ If you want to only allow the Console tool to open in a single place, you can co 1. In the main toolbar or the **Drawer** toolbar, right-click the **Console** tab, and then select **Configure console**. The **Settings** > **Preferences** page is displayed. -1. In the **Console** section, clear the checkbox **Show Console tab in main panel and drawer**, then click **Close** (**x**). +1. In the **Console** section, clear the checkbox **Show Console tab in main panel and drawer**, and then click **Close** (**x**). See also: * [Activity Bar tools vs. Quick View tools](../../../about-tools.md#activity-bar-tools-vs-quick-view-tools) in _About the list of tools_ @@ -109,7 +109,7 @@ Selecting a file with the warning icon opens the file in the Sources tool with a ![The Sources tool displaying an issue that reads 'DevTools failed to load source map'](./devtools-images/source-map-not-found-buttons.png) -From the infobar, you can learn more about the issue by selecting the **Open in Issues** button. The **Issues** tool then opens in the **Drawer** and provides information about how to resolve the issue and get your sourcemap loaded correctly in DevTools: +From the infobar, you can learn more about the issue by selecting the **Open in Issues** button. The **Issues** tool then opens in the **Drawer** (now **Quick View** panel) at the bottom of DevTools, and provides information about how to resolve the issue and get your sourcemap loaded correctly in DevTools: ![The Issues tool in the Drawer, displaying the issue as 'Source map not found', along with information on how to resolve this issue](./devtools-images/source-map-not-found.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md index acac391e13..a90d9abfdd 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md @@ -33,11 +33,11 @@ The Console is one of the most popular tools in DevTools. You can now access th You can use the Console as the main tool, or use it together with the **Elements** and **Network** tools. -The Console tool in the main toolbar of the Microsoft Edge DevTools extension for Visual Studio Code: +The Console tool open in the main toolbar of the Microsoft Edge DevTools extension for Visual Studio Code: ![The Console tool in the main toolbar of the Microsoft Edge DevTools extension for Visual Studio Code](devtools-101-images/console-tool-vsc-1.png) -The Console tool in the Drawer of the Microsoft Edge DevTools extension for Visual Studio Code: +The Console tool open in the **Drawer** of the Microsoft Edge DevTools extension for Visual Studio Code: ![The Console tool in the Drawer of the Microsoft Edge DevTools extension for Visual Studio Code](devtools-101-images/console-tool-vsc-2.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md index da46033710..eb5f0cffe7 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md @@ -60,7 +60,7 @@ In the **Styles** pane in the **Elements** tool, a wavy underline and tooltip ha ![CSS Layout issue in the Styles pane](./devtools-114-images/css-reflow-issue-styles-pane.png) -In the **Issues** tool, in the **Performance** category, a new kind of issue is reported, such as "Changes to this property will trigger: 'Layout', which can impact performance when used inside @Keyframes." When you're using the **Styles** pane, to open the issue in the **Issues** tool, **Shift**+click the wavy underline on such a property, or right-click the wavy underline and then select **View issues**. The **Issues** tool opens in the Drawer at the bottom of DevTools: +In the **Issues** tool, in the **Performance** category, a new kind of issue is reported, such as "Changes to this property will trigger: 'Layout', which can impact performance when used inside @Keyframes." When you're using the **Styles** pane, to open the issue in the **Issues** tool, **Shift**+click the wavy underline on such a property, or right-click the wavy underline and then select **View issues**. The **Issues** tool opens in the **Drawer** (now **Quick View** panel) at the bottom of DevTools: ![CSS Layout issue in the Issues tool](./devtools-114-images/css-reflow-issue-issues-tool.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md index 79a5735890..ecbb4d181a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md @@ -28,7 +28,7 @@ todo video DevTools has a new look, starting with Microsoft Edge 120! The major design updates are: * The new **Activity Bar** with icons. -* **Quick View** in place of the Drawer at bottom of DevTools. +* 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. * You can easily open, close, and move tools around.