diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index 2d6e4d606d..462943b1fc 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -44,9 +44,9 @@ Microsoft Edge DevTools includes the following tools. | **CSS Overview** tool | Help you better understand your page's CSS and identify potential improvements. | [CSS Overview tool](css/css-overview-tool.md) | | **Detached Elements** tool | To increase the performance of your page, this tool finds detached elements that the browser cannot garbage-collect, and identifies the JavaScript object that is still referencing the detached element. By changing your JavaScript to release the element, you reduce the number of detached elements on your page, increasing page performance and responsiveness. | [Debug DOM memory leaks with the Detached Elements tool](memory-problems/dom-leaks.md) | | **Developer Resources** | Shows resource URLs for the webpage. | [Developer Resources tool](developer-resources/developer-resources.md) | -| **Device Emulation** | Use the **Device Emulation** tool, sometimes called _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | +| **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | | **Elements** tool | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) | -| **Inspect** tool | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay information and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | +| **Inspect** tool | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | | **Issues** tool | The **Issues** tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues. | [Find and fix problems using the Issues tool](issues/index.md) | | **JavaScript Profiler** tool | This tool has been replaced by the **Performance** tool and the **Memory** tool. | [JavaScript Profiler tool](javascript-profiler/javascript-profiler-tool.md) | | **Lighthouse** tool | Use the Lighthouse tool to identify and fix common problems that affect your site's performance, accessibility, and user experience. | [Lighthouse tool](lighthouse/lighthouse-tool.md) | diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index 3eb10568cf..f660a32531 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge no-loc: ["Enable webhint"] -ms.date: 08/03/2022 +ms.date: 08/30/2022 --- # Experimental features @@ -18,21 +18,21 @@ Policies to keep this page comprehensive and maintainable: * Don't change h2 text, that might break a link from UI. * When a checkbox is removed from all the channels, delete its section. -Steps to maintain this page monthly: For latest Stable, and for latest Canary: +Steps to maintain this page monthly: For latest Canary, and for latest Stable: 1. Go to edge://settings/help, update if needed. 1. In DevTools, select Settings > Preferences > Restore Defaults > Reload DevTools. 1. In DevTools, go to Settings > Experiments. -1. In the "Experiments which are turned on by default" section below, update the Edge Stable & Edge Canary list at top. +1. In the "Experiments which are turned on by default" section below, update the Edge Canary list & Edge Stable list at top. * In that section, link down to the h2; do not link to a different article. 1. Make sure the article has an h2 for each checkbox. 1. In each h2 section, update the presence or absence of "not", and update the version #: -This checkbox is|is not present in Microsoft Edge Stable v123. This checkbox is|is not present in Microsoft Edge Canary v123. +This checkbox is|is not present in Microsoft Edge Stable v123. --> -Microsoft Edge DevTools provide access to experimental features that are still in development. This article lists and describes the experimental features which are in either: +Microsoft Edge DevTools provide access to experimental features that are still in development. This article lists and describes the experimental features that are in either: * The latest version of the Canary preview channel of Microsoft Edge. -* The latest version of the Stable version of Microsoft Edge. +* The latest version of the Stable release of Microsoft Edge. All [channels of Microsoft Edge](/deployedge/microsoft-edge-channels) have experimental features. You can get the latest experimental features by using the [Microsoft Edge Canary channel](https://www.microsoftedgeinsider.com/welcome?channel=canary). To view the full list available in your version of Microsoft Edge, see the **Settings** > **Experiments** page in DevTools. @@ -47,7 +47,9 @@ The following experimental features are turned on by default. You can use these -**Turned on by default in Microsoft Edge Stable v103:** +**Turned on by default in Microsoft Edge Canary v106:** +* [Source order viewer](#source-order-viewer) +* [Emulation: Support dual screen mode](#emulation-support-dual-screen-mode) * [Enable Reporting API panel in the Application panel](#enable-reporting-api-panel-in-the-application-panel) * [Display more precise changes in the Changes tab](#display-more-precise-changes-in-the-changes-tab) * [Use Lighthouse panel with timespan and snapshot modes](#use-lighthouse-panel-with-timespan-and-snapshot-modes) @@ -57,8 +59,9 @@ The following experimental features are turned on by default. You can use these * [Show issues in Elements](#show-issues-in-elements) * [Focus Mode](#focus-mode) * [Open source files in Visual Studio Code](#open-source-files-in-visual-studio-code) +* [Enable keyboard shortcut editor](#enable-keyboard-shortcut-editor) -**Turned on by default in Microsoft Edge Canary v105:** +**Turned on by default in Microsoft Edge Stable v104:** * [Enable Reporting API panel in the Application panel](#enable-reporting-api-panel-in-the-application-panel) * [Display more precise changes in the Changes tab](#display-more-precise-changes-in-the-changes-tab) * [Use Lighthouse panel with timespan and snapshot modes](#use-lighthouse-panel-with-timespan-and-snapshot-modes) @@ -135,7 +138,7 @@ One of the UI experiments adds a new way to provide feedback: when the **Focus M ## List of experiments -Most of the experiments that appear in the latest version of the Canary preview channel of Microsoft Edge are listed below. +The experiments checkboxes that appear in the latest version of the Canary preview channel of Microsoft Edge are listed below. The Stable release is also noted, following behind the addition or removal of checkboxes in Canary. @@ -149,8 +152,8 @@ Most of the experiments that appear in the latest version of the Canary preview Some Microsoft Edge Add-ons can define custom color themes for DevTools. If you install an add-on with a theme, you need to enable the **Allow extensions to load custom stylesheets** experiment to view the add-on themes. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -159,8 +162,24 @@ Status: To capture JavaScript stack traces when DOM nodes are added to the DOM at runtime, enable this experiment. The captured stack traces are displayed in the **Stack Trace** pane of the **Elements** panel. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Automatically pretty print in the Sources Panel + + +When this experiment is turned on, when you display a minified file in the Sources panel, the file is opened in a single tab in the Sources panel, pretty-printed. + +When this experiment is turned off, a UI prompt with a button asks you whether to pretty-print the file. The file is opened in an additional tab which has an appended suffix of **:formatted**. + +* A _minified_ file is concatenated into a single long line. +* In contrast, _pretty print_ presents the contents of a file in an indented, more human-readable format. + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. Instead see [Automatically pretty print in the Microsoft Edge Sources Panel](#automatically-pretty-print-in-the-microsoft-edge-sources-panel), below. @@ -187,8 +206,8 @@ To monitor the messages sent and received by DevTools to debug the inspected pag 1. The **Protocol monitor** tool is displayed in the **Drawer** at the bottom of DevTools. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -199,8 +218,8 @@ Adds the **CSP Violations** tool, which displays any Content Security Policy (CS ![The CSP Violations tool.](index-images/csp-violations-tool.png) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -210,28 +229,14 @@ Records coverage while performance tracing. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. - - - -## Show option to take heap snapshot where globals are not treated as root - - -Shows the option to take a heap snapshot where globals are not treated as root. - - -See also: -* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) - -Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is not present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Show option to expose internals in heap snapshots - + +_new as of v105_ Whether to display a checkbox to expose internals in heap snapshots in the **Memory** tool. @@ -240,8 +245,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -253,8 +258,8 @@ See also: * [Test keyboard support using the Source Order Viewer](../accessibility/test-tab-key-source-order-viewer.md) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -264,8 +269,8 @@ Whether to include event initiators in the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -275,8 +280,8 @@ Whether to use a WebGL-based flamechart in the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -286,8 +291,8 @@ Enables DWARF support for WebAssembly debugging. See [Improved WebAssembly debu Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -298,8 +303,22 @@ Uses source maps to automatically map original variable names to minified variab See [Map the processed code to your original source code, for debugging](../javascript/source-maps.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Emulation: Support dual screen mode + +_new as of v106_ + +Whether to show the UI to emulate dual-screen mode in device emulation. + +See [Emulate dual-screen and foldable devices](../device-mode/dual-screen-and-foldables.md). + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. @@ -319,8 +338,8 @@ See also: * [Test text-color contrast using the Color Picker](../accessibility/color-picker.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -329,8 +348,8 @@ Status: Adds a button in the **Elements** tool which toggles between the DOM tree and the accessibility tree. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -360,8 +379,8 @@ For more information about the visual **Font Editor**, see [Edit CSS font styles For more information, see [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -371,8 +390,8 @@ Enables automatic contrast issue reporting in the **Issues** tool. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -382,8 +401,8 @@ Enables experimental cookie features. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -392,8 +411,8 @@ Status: Use the Reporting API to catch certain errors such as security violations or deprecated API calls. These errors happen when users visit your site and are sent to a server endpoint. Enable this experiment to add the **Reporting API** section in the **Application** panel, which lists all of the reports sent to the endpoint. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -402,8 +421,8 @@ Status: See [More precise changes in the Changes tab](https://developer.chrome.com/blog/new-in-devtools-98/#changes). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -413,8 +432,8 @@ Whether to sync CSS changes in the **Styles** tab in the **Elements** tool. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -424,22 +443,23 @@ Whether to use local overrides for response headers. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Enable CSS Authoring hints for inactive rules, deprecated properties, etc. - + +_new as of v105_ Whether to enable CSS authoring hints in the **Styles** panel of the **Elements** tool to display information tooltips next to inactive or deprecated properties. -In Canary v105, this checkbox has no effect. When this feature is implemented, this feature will provide help when writing or inspecting CSS in the **Styles** panel. Small information icons will appear next to CSS properties that are inactive (or deprecated). +This feature provides help when writing or inspecting CSS in the **Styles** panel. Small information icons appear next to CSS properties that are inactive or deprecated. An inactive property is one that applies correctly to an element but has no effect on it (for example, `width:100px` applied to an inline element has no effect). Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. @@ -451,8 +471,8 @@ See also: * [Lighthouse tool](../lighthouse/lighthouse-tool.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -461,8 +481,8 @@ Status: Adds increased support for the `@layer` CSS rule in the **Styles** pane. CSS rules in the **Styles** pane are grouped by the layers they belong to. A layer overview widget is displayed, which shows the layer tree for the currently inspected element. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -478,21 +498,35 @@ See also: * [Change colors with the Color Picker](../css/reference.md#change-colors-with-the-color-picker) in _CSS features reference_ Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Group sources into Authored and Deployed trees - -Controls whether to group sources into **Authored** and **Deployed** trees in the **Page**, **Filesystem**, and **Overrides** tabs of the **Sources** tool. This feature in the **Sources** tool allows you to group source files in two folders depending on whether these are: +_new as of v104_ + + +Controls whether to group resources into separate **Authored** and **Deployed** trees in the **Page** tab of the **Sources** tool. This feature in the **Sources** tool allows you to group source files in two folders depending on whether these are: * Original source files (authored, that is, files with your local edits). * Production files (deployed files that are on the web server after compiling and bundling the source files). Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Hide ignore-listed code in sources tree view + +_new as of v106_ + +Whether to hide or display code that's in the ignore list, in the **Sources** tool's tree view, such as the **Page** tab. + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. @@ -502,8 +536,8 @@ Controls whether to log DevTools uncaught exceptions in the **Console** tool. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -523,8 +557,8 @@ The [webhint](https://webhint.io) experiment displays the webhint feedback in th ![webhint feedback in the Issues panel.](../media/experiments-webhint.msft.png) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -533,8 +567,8 @@ Status: Enable this experiment to view syntax errors under HTML in the **DOM** view of the **Elements** tool. For more information, see [Wavy underlines highlight code issues and improvements in Elements tool](../whats-new/2021/04/devtools.md#wavy-underlines-highlight-code-issues-and-improvements-in-elements-tool). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -549,8 +583,8 @@ Focus Mode also provides a **Quick View** list, to open a second tool alongside See [Reduce the complexity of DevTools with Focus Mode](focus-mode.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -565,23 +599,19 @@ When you select a folder to use as your Workspace, selecting any link to a file Any edits that you make in DevTools now change the file on the hard drive and sync live with Visual Studio Code. You can read about setting up your workspace in [Opening source files in Visual Studio Code](../sources/opening-sources-in-vscode.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Automatically pretty print in the Microsoft Edge Sources Panel -When this experiment is turned on, when you display a minified file in the Sources panel, the file is opened in a single tab in the Sources panel, pretty-printed. - -When this experiment is turned off, a UI prompt with a button asks you whether to pretty-print the file. The file is opened in an additional tab which has an appended suffix of **:formatted**. + -* A _minified_ file is concatenated into a single long line. -* In contrast, _pretty print_ presents the contents of a file in an indented, more human-readable format. +In v106, this checkbox has been moved to the top and renamed to **Automatically pretty print in the Sources Panel**. -Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is not present in Microsoft Edge Canary v106. Instead see [Automatically pretty print in the Sources Panel](#automatically-pretty-print-in-the-sources-panel), above. +* This checkbox is present in Microsoft Edge Stable v104. @@ -596,8 +626,8 @@ Whether to include the Ignore list for JavaScript frames on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -607,8 +637,8 @@ Controls whether to include Input events on the Timeline overview. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -621,8 +651,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -635,8 +665,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -648,8 +678,8 @@ See also: * [Customize keyboard shortcuts](../customize/shortcuts.md) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -658,8 +688,8 @@ Status: Controls whether to show invalidation tracking on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -668,8 +698,8 @@ Status: Controls whether to show all events on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -678,8 +708,8 @@ Status: Controls whether to show v8 runtime call stats on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -688,8 +718,8 @@ Status: Controls whether to replay input events on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -702,5 +732,21 @@ See also: * [The first time source files are loaded, breakpoints might not trigger](https://bugs.chromium.org/p/chromium/issues/detail?id=1133307&q=%22instrumentation%20breakpoints%22&can=2) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Enable re-designed Breakpoint Sidebar Pane in the Sources Panel + + +_new as of v106_ + +Whether to show the re-designed version of the **Breakpoint Sidebar** pane in the **Sources** tool. + +See also: +* [Pause code with breakpoints](../javascript/breakpoints.md) + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. diff --git a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png index 2a72cc9f9a..69cf973574 100644 Binary files a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png and b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png differ diff --git a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png index 0886e53ca6..a4e275cb83 100644 Binary files a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png and b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png differ diff --git a/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png b/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png index e5cd813a8b..7f9ae89fa3 100644 Binary files a/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png and b/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/after-docking-menu.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/after-docking-menu.png new file mode 100644 index 0000000000..904d9868d2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/after-docking-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/before-docking-menu.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/before-docking-menu.png new file mode 100644 index 0000000000..229247be54 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/before-docking-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/dock-quick-view-bottom.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/dock-quick-view-bottom.png new file mode 100644 index 0000000000..02c2e9e1e6 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/dock-quick-view-bottom.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/edit-and-resend.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/edit-and-resend.png new file mode 100644 index 0000000000..69cf973574 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/edit-and-resend.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/focus-mode-improved-location-controls.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/focus-mode-improved-location-controls.png new file mode 100644 index 0000000000..2a922786cc Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/focus-mode-improved-location-controls.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networkconsole-edit.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networkconsole-edit.png new file mode 100644 index 0000000000..a4e275cb83 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networkconsole-edit.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networking-search.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networking-search.png new file mode 100644 index 0000000000..0696d4e21e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networking-search.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/protocol-handler.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/protocol-handler.png new file mode 100644 index 0000000000..06e28262e8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/protocol-handler.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/quickview-console.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/quickview-console.png new file mode 100644 index 0000000000..b5fd5e7d12 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/quickview-console.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/sources-search-all-files.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/sources-search-all-files.png new file mode 100644 index 0000000000..272f92b6e1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/sources-search-all-files.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md new file mode 100644 index 0000000000..9595c5d868 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md @@ -0,0 +1,157 @@ +--- +title: What's new in DevTools (Microsoft Edge 105) +description: "Focus Mode: Improved location controls for DevTools, Activity Bar, Quick View, and Improved reliability in Issues tool. And more." +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.prod: microsoft-edge +ms.date: 09/01/2022 +--- +# What's New in DevTools (Microsoft Edge 105) + +[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + +## Test your PWA's protocol handlers from the Application tool + + + + +In Microsoft Edge 105, the **Application** tool now supports testing protocol handlers. Since Microsoft Edge 96, you've been able to define protocol handlers in the application manifest of your Progressive Web App (PWA). Now you can test those protocols from the **Application** tool itself in DevTools if you have your PWA installed. + +With DevTools open for your PWA: + +1. Open the **Application** tool. +1. On the left, expand and select **Application** > **Manifest** > **Protocol Handlers**. +1. In the **Protocol Handlers** page, in the **Protocol Handlers** dropdown list, select the protocol you want to test. +1. In the text box, enter the URL or endpoint to test. +1. Click the **Test protocol** button. + +The **Application** tool will attempt to launch your PWA with the protocol and URL you specified. The browser asks for permission to open the application, and then prompts you to confirm that you want to handle the protocol and the app you want to launch. If you give permission, your app opens with the specified content. + +![Protocol Handler](./devtools-105-images/protocol-handler.png) + +See also: + +* [Test Progressive Web App (PWA) protocol handling](../../../progressive-web-apps/protocol-handlers.md) +* [Handle protocols in Progressive Web Apps](../../../../progressive-web-apps-chromium/how-to/handle-protocols.md) + + + +## Edit and resend network requests more reliably in the Network Console tool + + + + +Previously in Microsoft Edge, selecting **Edit and resend** for a network request from the Network tool may not have reliably opened the **Network Console** tool and pre-populated it with the values from the request. + +In Microsoft Edge 105, this issue has been fixed in the default UI. This issue will also be fixed in [Focus Mode](../../../experimental-features/focus-mode.md) in a future release. **Edit and resend** now pre-populates the **Network Console** tool with the values for the network request that you're looking to resend. You can continue to modify these values before sending the request from the **Network Console** tool. Thank you for sending us your feedback about this issue! + +Right-click the network request that you want to change and resend, and then select **Edit and Resend**: + +![Edit and Resend](./devtools-105-images/edit-and-resend.png) + +In the **Network Console**, edit the network request information, and then click the **Send** button: + +![Network Console Edit and Send](./devtools-105-images/networkconsole-edit.png) + +See also: +* [Starting from the Network tool](../../../network-console/network-console-tool.md#starting-from-the-network-tool) in _Compose and send web API requests using the Network Console tool_. + + + +## Focus Mode: Improved location controls for DevTools, Activity Bar, and Quick View + + + + +In Microsoft Edge 105, several improvements to location controls have been made in [Focus Mode](../../../experimental-features/focus-mode.md), including a new option for changing the orientation of **Quick View**. + +The **Customize and control DevTools** (**...**) menu now directly contains buttons to set the docking location of DevTools, instead of requiring opening a submenu. The **Dock location** icons now have greater contrast, and the currently selected **Dock location** button is now highlighted. + +This menu also now directly contains buttons to set and indicate where the **Activity Bar** is displayed, instead of using a submenu. + +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) + +Selecting the docking location in Focus Mode, in Microsoft Edge 105: + +![Dock location menu icons after](./devtools-105-images/after-docking-menu.png) + +You can now change the orientation of the **Quick View** panel as well. To display **Quick View** vertically instead of horizontally, click the **Dock Quick View to right** button: + +![Docking Quick View to the right](./devtools-105-images/quickview-console.png) + +To return **Quick View** to the horizontal orientation, click the **Dock Quick View to bottom** button: + +![Docking Quick View to the bottom](./devtools-105-images/dock-quick-view-bottom.png) + +To minimize **Quick View** in either orientation, click the **Collapse Quick View** button, or press `Esc`: + +![Minimizing Quick View](./devtools-105-images/focus-mode-improved-location-controls.png) + +See also: +* [Simplify DevTools using Focus Mode](../../../experimental-features/focus-mode.md) + + + +## Fix: Search in the Sources and Network tools now works as expected in Focus Mode + + + + +In previous versions of Microsoft Edge, the Focus Mode experiment didn't properly showcase the **Search** feature in the **Network** tool or the **Search in all files** feature in the **Sources** tool. In Microsoft Edge 105, these issues have been fixed. + +You can now search in the **Network** tool via the **Search** icon: + +![Networking Search](./devtools-105-images/networking-search.png) + +To search in all files in the **Sources** tool, in the **Page** section, right-click the **top** window or any domain, and then select **Search in all files**: + +![Networking Search All](./devtools-105-images/sources-search-all-files.png) + +See also: +* [Simplify DevTools using Focus Mode](../../../experimental-features/focus-mode.md) +* [Search network headers and responses](../../../network/index.md#search-network-headers-and-responses) in _Inspect network activity_. +* [Find source files for a page using the Search tool](../../../search/search-tool.md) + + + +## Improved reliability in the Issues tool + + + + +In previous versions of Microsoft Edge, there was a bug that that caused issues to not appear in the **Issues** tool. This bug has been fixed in Microsoft Edge 105. + +See also: + +* [Find and fix problems using the Issues tool](../../../issues/index.md) + + + +## Announcements from the Chromium project + +Microsoft Edge 105 also includes the following updates from the Chromium project: + +* [Attach Wasm debugging information at runtime](https://developer.chrome.com/blog/new-in-devtools-105/#wasm) +* [Support live edit during debugging](https://developer.chrome.com/blog/new-in-devtools-105/#live-edit) +* [View and edit @scope at rules in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-105/#scope) +* [Sourcemap improvements](https://developer.chrome.com/blog/new-in-devtools-105/#sourcemaps) + + + + + + + + + + + + diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md index 372f4c809b..039a35190e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md @@ -13,6 +13,7 @@ ms.date: 05/16/2022 +* [What's New in DevTools (Microsoft Edge 105)](2022/09/devtools-105.md) * [What's New in DevTools (Microsoft Edge 104)](2022/08/devtools-104.md) * [What's New in DevTools (Microsoft Edge 103)](2022/06/devtools-103.md) * [What's New in DevTools (Microsoft Edge 102)](2022/05/devtools-102.md) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 4991a5718f..71c8d331f2 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -32,6 +32,10 @@ # What's New pages ------------------------------------------------------------ # also add new pages to nav page: /whats-new/whats-new.md + - name: Microsoft Edge 105 + href: devtools-guide-chromium/whats-new/2022/09/devtools-105.md + displayName: what's new, announcements, release notes + - name: Microsoft Edge 104 href: devtools-guide-chromium/whats-new/2022/08/devtools-104.md displayName: what's new, announcements, release notes @@ -161,7 +165,7 @@ items: - name: Emulate mobile devices (Device Emulation) # orig: Simulate mobile devices with Device Mode href: devtools-guide-chromium/device-mode/index.md - displayName: Device Emulation, Device Emulator, Device Mode # also Network conditions tool (1x), Settings > Devices (1x) + displayName: device emulator, device mode, device simulation, device simulator # also Network conditions tool (1x), Settings > Devices (1x) - name: Emulate dual-screen and foldable devices # added article href: devtools-guide-chromium/device-mode/dual-screen-and-foldables.md