From 630b2a3cb616fb28b7a1316f85378d0be2b5d050 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Mon, 22 Jul 2024 11:10:24 -0700 Subject: [PATCH 1/9] start removing h3 --- microsoft-edge/accessibility/build/index.md | 116 +++++++++++---- .../accessibility/navigation.md | 95 +++++++++---- .../accessibility/test-issues-tool.md | 3 +- .../test-tab-key-source-order-viewer.md | 9 +- .../devtools-guide-chromium/console/api.md | 132 ++++++++++++++---- .../console/console-debug-javascript.md | 25 ++-- .../devtools-guide-chromium/console/index.md | 12 +- .../console/live-expressions.md | 14 +- .../devtools-guide-chromium/css/grid.md | 55 ++++++-- 9 files changed, 345 insertions(+), 116 deletions(-) diff --git a/microsoft-edge/accessibility/build/index.md b/microsoft-edge/accessibility/build/index.md index 8a67e468c5..d557bb503e 100644 --- a/microsoft-edge/accessibility/build/index.md +++ b/microsoft-edge/accessibility/build/index.md @@ -41,7 +41,9 @@ For more information on web accessibility, check out the [Introduction to Web Ac The [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/TR/wai-aria) specification by the W3C's [Web Accessibility Initiative](https://www.w3.org/WAI) defines as a syntax for making dynamic web content and custom user interfaces accessible to all people. ARIA extends HTML by using additional attributes (roles, properties, and states) that are designed to convey custom semantics. These attributes are used by browsers to pass along the controls' state and role to the accessibility API. -### Roles, properties, and states + + +#### Roles, properties, and states ARIA roles are set on elements using the [role](https://developer.mozilla.org/docs/Web/HTML/Reference) attribute to give assistive technologies and accessibility APIs information about the element. For example, the below `
  • ` element is assigned `role="menuitem"` to signify that it's an item in a menu. @@ -82,17 +84,23 @@ Different browsers might map elements to the platform accessibility APIs differe WebAIM conducts surveys with [screen reader](https://webaim.org/projects/screenreadersurvey8) and [low vision](https://webaim.org/projects/lowvisionsurvey2) users that help you decide which assistive technologies and browsers to test. -### Learning how to test + + +#### Learning how to test Assistive technologies are sophisticated tools. Don't assume that you're able to immediately start testing with an assistive technology without first learning about how it works. Learning to test with a screen reader has an especially steep learning curve. A novice user of screen readers might think that a screen reader has a bug, while the issue might actually be an error in using the screen reader. [Testing with Screen Readers](https://webaim.org/articles/screenreader_testing) at WebAIM provides more information about learning to test with assistive technologies. -### Testing locally + + +#### Testing locally Most devices include assistive technology that is built-in to the OS. Microsoft Windows includes the [Windows Narrator](https://support.microsoft.com/help/22798) screen reader and [Windows Magnifier](https://support.microsoft.com/windows/414948ba-8b1c-d3bd-8615-0e5e32204198). 3rd party assistive technologies like [NVDA](https://www.nvaccess.org/about-nvda), [FreedomscientificSoftwareJaws](https://www.freedomscientific.com/products/software/jaws), and [ZoomText](https://www.freedomscientific.com/products/software/zoomtext) are available to download. Apple macOS includes the [VoiceOver](https://www.apple.com/accessibility/mac/vision) screen reader. And iOS, Android, and Linux all support a variety of assistive technologies. -### Testing in virtual machines and emulators + + +#### Testing in virtual machines and emulators Under macOS, if you want to test with an assistive technology only available for Windows, like Windows Narrator or NVDA, create a Windows virtual machine. @@ -101,7 +109,9 @@ Under macOS, if you want to test with an assistive technology only available for > [!NOTE] > The iOS Simulator doesn't currently include VoiceOver. -### Cloud-based testing tools + + +#### Cloud-based testing tools If an assistive technology isn't available on your OS or you not possible to install one on a virtual machine or emulator, cloud-based assistive technology testing tools are the next best thing. @@ -115,11 +125,15 @@ See also [Cloud-based emulators and simulators](../../devtools-guide-chromium/de These are projects and initiatives for accessibility. -### The A11Y project + + +#### The A11Y project [The A11Y Project](http://a11yproject.com) is a community-driven effort to make web accessibility easier. Check out [The A11Y Project](https://a11yproject.com) site to learn about basic accessibility principles, their accessible pattern and widget [library](https://a11yproject.com/patterns), and their [resources](http://a11yproject.com/resources.html) on accessibility software, blogs, books, and tools. -### Web Accessibility Initiative (WAI) + + +#### Web Accessibility Initiative (WAI) The W3C [Web Accessibility Initiative (WAI)](https://w3.org/WAI) is an effort to help improve the accessibility of the web. Their site provides a variety of resources for [Getting Started with Web Accessibility](https://www.w3.org/WAI/gettingstarted/Overview.html), [Designing for Inclusion](https://www.w3.org/WAI/users/Overview.html), [tutorials and presentations](https://www.w3.org/WAI/train.html), and more. @@ -129,11 +143,15 @@ The W3C [Web Accessibility Initiative (WAI)](https://w3.org/WAI) is an effort to These are blogs about accessibility. -### TPGi, LLC + + +#### TPGi, LLC [TPGi, LLC](https://www.tpgi.com/blog) provides consulting and technology solutions to organizations around the world to ensure that their clients reach all audiences effectively and efficiently, while meeting governmental and international standards. Their blog covers topics like web accessibility best practices, accessibility tools, and accessibility trends. -### Level Access + + +#### Level Access [Level Access](https://www.levelaccess.com/blog) is a digital accessibility firm supporting their clients in developing and deploying accessible products and services. Their blog addresses topics like ARIA best practices, accessibility trends, webinars, and more. @@ -143,15 +161,21 @@ These are blogs about accessibility. These are libraries and examples for accessibility. -### ally.js - Tutorials + + +#### ally.js - Tutorials JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler. For more information, go to [ally.js - Tutorials](http://allyjs.io/tutorials). -### OpenAjax examples + + +#### OpenAjax examples The [OpenAjax Alliance website](http://oaa-accessibility.org) is an excellent resource for verifying the rules for WAI-ARIA and provides a number of examples of WAI-ARIA implementations. -### Patterns + + +#### Patterns [The A11Y Project](http://a11yproject.com) offers a library of accessible widgets and patterns like menus, buttons, tooltips, and more. For more information, go to [Patterns](http://a11yproject.com/patterns.html). @@ -161,70 +185,104 @@ The [OpenAjax Alliance website](http://oaa-accessibility.org) is an excellent re These are techniques and tools for improving accessibility. -### Accessibility: Creating accessible extension icons for Microsoft Edge + + +#### Accessibility: Creating accessible extension icons for Microsoft Edge Get guidance on creating accessible extensions icons for Microsoft Edge. For more information, go to [Accessibility: Creating accessible extension icons for Microsoft Edge](/archive/microsoft-edge/legacy/developer/extensions/guides/accessibility). -### Accessible Name and Description: Computation and Mappings 1.1 + + +#### Accessible Name and Description: Computation and Mappings 1.1 This W3C mapping document explains how browsers determine name and descriptions of accessible objects from web content languages and expose them in accessibility APIs. For more information, go to [Accessible Name and Description: Computation and Mappings 1.1](https://www.w3.org/TR/accname-1.1). -### Accessibility Evaluation Resources + + +#### Accessibility Evaluation Resources Accessibility Evaluation Resources is a multi-page resource by the W3C that outlines different approaches for evaluating websites for accessibility. For more information, go to [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html). -### Assistive technology compatibility tests + + +#### Assistive technology compatibility tests Test results showing how different content types and standards behave in assistive technologies (AT) like screen readers. For more information, go to [Assistive technology compatibility tests](http://www.powermapper.com/tests). -### Building accessible websites just got a lot easier + + +#### Building accessible websites just got a lot easier This .NET Web Development and Tools blog post describes the Visual Studio extension [Web Accessibility Checker](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebAccessibilityChecker). For more information, go to [Building accessible websites just got a lot easier](https://devblogs.microsoft.com/aspnet/building-accessible-websites-just-got-a-lot-easier). -### Core Accessibility API Mappings 1.1 + + +#### Core Accessibility API Mappings 1.1 This W3C mapping document explains how the semantics of web content languages are exposed to accessibility APIs. For more information, go to [Core Accessibility API Mappings 1.1](https://www.w3.org/TR/core-aam-1.1). -### Easy Checks – A First Review of Web Accessibility + + +#### Easy Checks – A First Review of Web Accessibility A series of quick checks by the WAI that help you assess the accessibility of a web page. For more information, go to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html). -### How to Meet WCAG 2.0 + + +#### How to Meet WCAG 2.0 A quick reference to Web Content Accessibility Guidelines (WCAG) 2.0 requirements (success criteria) and techniques. For more information, go to [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref). -### HTML Accessibility API Mappings 1.0 + + +#### HTML Accessibility API Mappings 1.0 This W3C mappings document explains how HTML5.1 element and attributes map to platform accessibility APIs. For more information, go to [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0). -### Quick Tips + + +#### Quick Tips A list of quick web development tips for accessibility by [The A11Y Project](http://a11yproject.com). For more information, go to [Quick Tips](http://a11yproject.com#Quick-tips). -### Site Scan + + +#### Site Scan The Site Scan tool on Microsoft Edge Dev Center checks for out-of-date libraries, layout issues, and accessibility issues. For more information, go to [Site Scan](https://developer.microsoft.com/microsoft-edge/tools). -### Techniques for WCAG 2.0 + + +#### Techniques for WCAG 2.0 Techniques from the W3C that provide guidance for web developers on meeting [Web Content Accessibility Guidelines (WCAG) 2.0](https://w3.org/TR/WCAG20) success criteria. For more information, go to [Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/Overview.html). -### Tips on Developing for Web Accessibility + + +#### Tips on Developing for Web Accessibility Tips from the W3C on developing web content that is more accessible to people with disabilities. For more information, go to [Tips on Developing for Web Accessibility](https://w3.org/WAI/gettingstarted/tips/developing.html). -### WAI-ARIA Authoring Practices 1.1 + + +#### WAI-ARIA Authoring Practices 1.1 A document by the W3C that provides readers with an understanding of how to use WAI-ARIA 1.1 and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. For more information, go to [WAI-ARIA Authoring Practices 1.1](http://w3c.github.io/aria-practices). -### WAI Guidelines and Techniques + + +#### WAI Guidelines and Techniques A series of web accessibility guidelines and standards developed by the WAI. For more information, go to [WAI Guidelines and Techniques](https://w3.org/WAI/guid-tech.html). -### Web Accessibility Evaluation Tools List + + +#### Web Accessibility Evaluation Tools List A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. For more information, go to [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html). -### Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone + + +#### Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone A series of short situational videos by the W3C about the impact of accessibility and the benefits for everyone. For more information, go to [Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone](https://w3.org/WAI/perspectives). diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md index 89e30fd264..bb14d2a1de 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md @@ -30,7 +30,8 @@ This article helps you use DevTools through the keyboard and through assistive t For DevTools features related to improving the accessibility of a webpage, see [Accessibility-testing features](./reference.md). -### Tabbed tool panels containing tabs and pages + +#### Tabbed tool panels containing tabs and pages For the terminology of tabs, tools, and panels, see [Tabbed tool panels containing tabs and pages](../overview.md#tabbed-tool-panels-containing-tabs-and-pages) in _Overview of DevTools_. @@ -85,19 +86,25 @@ In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any You can move among the tools by using the keyboard navigation keys or by using the Command Menu. -### Navigate by keyboard + + +#### Navigate by keyboard * With DevTools open, press **Ctrl+]** (Windows, Linux) or **Command+]** (macOS) to move focus to the next tool on the **Activity Bar**. + * Press **Ctrl+[** (Windows, Linux) or **Command+[** (macOS) to move focus to the previous tool on the **Activity Bar**. + * Press **Tab** or **Shift+Tab** repeatedly until focus moves to the tabs of the **Activity Bar** or **Quick View** toolbar, and then use the arrow keys to move among the tools. -#### Known issues +Known issues: * Some tools, such as the **Console** and **Performance** tools, may move focus into the tool's content area as soon as the tool is selected. This may make navigating by arrow keys difficult. * The name of the selected tool is announced, but only after announcing the focused content in the tool. This sequence of announcements may make it easy to miss the name of the tool. -### Navigate by Command Menu + + +#### Navigate by Command Menu To select a specific tool, use the [Command Menu](../command-menu/index.md). In the Command Menu, a tool is indicated as either a _Panel_ or _Quick View_ item. @@ -122,7 +129,9 @@ Opening a tool this way puts focus in the content area of the tool. In the case ## The Elements tool -### Inspect an element on the page + + +#### Inspect an element on the page 1. Go to the element you want to inspect, using the cursor in the screen reader. @@ -131,7 +140,9 @@ Opening a tool this way puts focus in the content area of the tool. In the case The **DOM Tree** is laid out as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree). For an example, see [Navigate the **DOM Tree** with a keyboard](../dom/index.md#navigate-the-dom-tree-with-a-keyboard). -### Copy the code for an element in the DOM Tree + + +#### Copy the code for an element in the DOM Tree 1. Right-click a node in the **DOM Tree**. @@ -139,12 +150,13 @@ The **DOM Tree** is laid out as an [ARIA tree](https://www.w3.org/TR/wai-aria-1. 1. Select **Copy outerHTML**. -#### Known issues +Known issues: * **Copy outerHTML** often doesn't select the current node, but instead selects the parent node. However, the contents of the element should still be in the copied `outerHTML`. -### Modify the attributes of an element in the DOM Tree + +#### Modify the attributes of an element in the DOM Tree * When focus is on a node of the DOM Tree, press **Enter** to edit the node. @@ -152,12 +164,13 @@ The **DOM Tree** is laid out as an [ARIA tree](https://www.w3.org/TR/wai-aria-1. * Press **Ctrl+Enter** (Windows, Linux) or **Command+Enter** (macOS) to accept the change and hear the entire contents of the element. -#### Known issues +Known issues: * When you type into the text input, you get no feedback. If you make a typo and use the arrow keys to explore your input, you also get no feedback. The easiest way to check your work is to accept the change, then listen for the entire element to be announced. -### Edit the HTML of an element in the DOM Tree + +#### Edit the HTML of an element in the DOM Tree * When focus is on a node of the DOM Tree, press **Enter** to edit the node. @@ -179,13 +192,13 @@ The **Elements** tool contains additional tabs for inspecting things like the CS The **DOM Tree** turns elements with `href` attributes into focusable links, so you may need to press **Tab** more than once to reach the **Styles** pane. - -### Known issues +Known issues: The **DOM Breakpoints** and **Properties** tabs aren't keyboard-accessible. -### Styles pane + +#### Styles pane The **Styles** pane has controls to filter styles, toggle element states (such as [:active](https://developer.mozilla.org/docs/Web/CSS/:active) and [:focus](https://developer.mozilla.org/docs/Web/CSS/:focus)), toggle classes, and add new classes. There's also a powerful style inspection tool to explore and modify styles currently applied to the element that has focus in the **DOM Tree**. @@ -193,7 +206,9 @@ The key concept to understand about the **Styles** pane is that it only shows st You might find it faster to use the [Inspect](#inspect-an-element-on-the-page) workflow to inspect a node that is in the general vicinity of the `footer` node (such as a link within the footer), which focuses the **DOM Tree**, and then use your keyboard to navigate to the exact node in which you're interested. -#### Navigate the Styles pane + + +##### Navigate the Styles pane Because all of the style tools connect in one way or another back to the **Styles** pane, it makes sense to become an expert in this tool first. @@ -211,11 +226,13 @@ Because all of the style tools connect in one way or another back to the **Style For additional shortcuts, see [Styles pane keyboard reference](../shortcuts/index.md#styles-pane-keyboard-shortcuts). -##### Known issues +Known issues: * If you use the **Filter** editable text field, you can't navigate the list of styles. -#### Toggle element state + + +##### Toggle element state To toggle the state of an element, such as `:active` or `:focus`: @@ -229,55 +246,67 @@ To toggle the state of an element, such as `:active` or `:focus`: 1. Press **Tab** to explore all of the available states. -#### Add an existing class + + +##### Add an existing class The **Element Classes** button is next to the **Toggle Element State** button. To move the focus to the **Element Classes** button, press **Tab**, and then press **Enter**. Focus moves into an edit text field labeled **Add new class**. The **Element Classes** button is primarily used for adding existing classes to an element. For example, if your stylesheet contained a helper class named `.clearfix`, you can press `.` inside of the edit text field to display a suggestion list of classes and use the **Down Arrow** to find the `.clearfix` suggestion. Or type the class name out yourself and press **Enter** to apply it. -#### Add a new style rule -Adjacent to the **Element Classes** button is the **New Style Rule** button. To move the focus to it, press **Tab** and then press **Enter**. Focus moves into an editable text field inside of the style inspector. The initial text content of the field is the tag name of the element that is selected in the **DOM Tree**. -You can type any class name you want into this field and then press **Tab** to assign CSS properties to it. + +##### Add a new style rule +Adjacent to the **Element Classes** button is the **New Style Rule** button. To move the focus to it, press **Tab** and then press **Enter**. Focus moves into an editable text field inside of the style inspector. The initial text content of the field is the tag name of the element that is selected in the **DOM Tree**. You can type any class name you want into this field and then press **Tab** to assign CSS properties to it. -### Computed tab + + +#### Computed tab With focus on the **Computed** tab, press **Tab** to move focus inside and explore the contents. Within the **Computed** tab there are controls for exploring which CSS properties are actually applied to an element in order of specificity. -#### Explore all computed styles + + +##### Explore all computed styles Press **Tab** until you reach the collection of computed styles. Computed styles are presented as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree). Expanding a listbox reveals which CSS selectors are applying the computed style. These selectors are organized by specificity. A screen reader announces the computed value, which CSS selector is currently matching, the file name of the stylesheet that contains the selector, and the line number for the selector. -**Known issues** +Known issues: * If you use the **Filter** text field, you're no longer able to inspect styles. -### Event Listeners tab + +#### Event Listeners tab To inspect the event listeners that are applied to an element, select the **Elements** tool and then select the **Event Listeners** tab (grouped with the **Styles** tab). When focus is on the **Styles** tab, press **Right Arrow** to navigate to the **Event Listeners** tab. -#### Explore event listeners + + +##### Explore event listeners Event listeners are presented as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree). You can use the arrow keys to navigate them. A screen reader announces the name of the DOM object that the event listener is attached to, as well as the file name where the event listener is defined and the line number. -### Accessibility tab + +#### Accessibility tab Select the **Tab** key to move around within the **Accessibility** tab in the **Elements** tool. The **Accessibility** tab is near the **Styles** tab. On the Accessibility tab, there are controls for exploring the accessibility tree, the ARIA attributes applied to an element, and the computed accessibility properties. See [Test accessibility using the Accessibility tab](accessibility-tab.md). -#### Accessibility Tree + + +##### Accessibility Tree The **Accessibility Tree** is presented as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree) where each `treeitem` corresponds to an element in the DOM. The tree announces the computed role for the selected node. Generic elements like `div` and `span` are announced as "GenericContainer" in the tree. Use the arrow keys to traverse the tree and explore parent-child relationships. -**Known issues** +Known issues: * The type of [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree) used by the **Accessibility** tab may not be properly exposed in Microsoft Edge for macOS screen readers like VoiceOver. Subscribe to [Chromium issue #868480](https://bugs.chromium.org/p/chromium/issues/detail?id=868480) to be informed about progress on this issue. * Each of the **ARIA Attributes** and **Computed Properties** sections are marked up as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree), but each section doesn't currently have focus management, and isn't keyboard-operable. @@ -300,7 +329,9 @@ See [Analyze pages using the Inspect tool](../css/inspect.md). **Lighthouse** runs a series of tests against a site to check for common issues related to performance, accessibility, SEO, and a number of other categories. -### Configure and generate a report + + +#### Configure and generate a report 1. When the **Lighthouse** tool is first opened in DevTools, focus is placed on the **Generate report** button. By default, the form is configured to run reports for every category using mobile emulation on a simulated 3G connection. @@ -310,12 +341,14 @@ See [Analyze pages using the Inspect tool](../css/inspect.md). 1. Focus moves into a modal window with a **Cancel** button which allows you to exit the audit. You may hear a series of earcons as the audit runs and refreshes the page multiple times. -#### Known issues +Known issues: * The different sections of the configuration form aren't currently marked up with a `fieldset` element. It may be easier to navigate them in Browse mode to figure out which controls are associated with each section. * There is no earcon or live region announcement when the audit is finished running. Generally the audit takes about 30 seconds, after which you should be able to navigate to the results. Using Browse mode may be the easiest way to reach the results. -### Navigate the Lighthouse report + + +#### Navigate the Lighthouse report The Lighthouse report is organized into sections that correspond with each of the audit categories. The report opens with a list of scores for each category. These scores are also links which you can use to skip to the relevant sections. Within each section are expandable `details` elements, which contain information relating to passed or failed audits. By default, only failing audits are shown. Each section ends with a final `details` element which contains all of the passed audits. 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 dcc26d6dff..ab292fa156 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool.md @@ -133,7 +133,8 @@ To automatically check whether text colors have enough contrast, use the **Issue ![Element in the webpage highlighted after clicking a link in the Affected Resources section](./test-issues-tool-images/a11y-testing-element-with-contrast-issues.png) -### Wavy underlines in the DOM tree indicate automatically detected issues + +#### Wavy underlines in the DOM tree indicate automatically detected issues The DOM tree in the **Elements** tool flags issues directly in the HTML with wavy underlines. These issues are reported by the **Issues** tool. When you press **Shift** while clicking any element with a wavy underline, the **Issues tool** opens. diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/test-tab-key-source-order-viewer.md b/microsoft-edge/devtools-guide-chromium/accessibility/test-tab-key-source-order-viewer.md index c22db91731..29e5dd84f9 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/test-tab-key-source-order-viewer.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/test-tab-key-source-order-viewer.md @@ -43,7 +43,8 @@ In the source code of the document, the sidebar navigation menu appears after th You can test the order of page elements by using the **Source Order Viewer** in the **Accessibility** tab. -### Activating and using the Source Order Viewer + +## Activating and using the Source Order Viewer To activate and use the Source Order Viewer, with the demo page: @@ -68,3 +69,9 @@ To activate and use the Source Order Viewer, with the demo page: ![The Source Order Viewer overlay on the section element](./test-tab-key-source-order-viewer-images/section-source-order.png) 1. Scroll the page to see all of the numbers and check how the source order of the different elements differs from the visual order of the elements. + + + +## See also + +* [Accessibility-testing demo webpage](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) diff --git a/microsoft-edge/devtools-guide-chromium/console/api.md b/microsoft-edge/devtools-guide-chromium/console/api.md index 10111c9b9f..6cd6a19fda 100644 --- a/microsoft-edge/devtools-guide-chromium/console/api.md +++ b/microsoft-edge/devtools-guide-chromium/console/api.md @@ -25,6 +25,7 @@ ms.date: 05/04/2021 + Use the `console` object's methods to write messages to the **Console** from your JavaScript. @@ -40,6 +41,7 @@ You can also enter these methods into the **Console**. For example, in the **Co --- + ## assert @@ -51,7 +53,9 @@ console.assert(expression, object) [Log level](reference.md#persist-messages-across-page-loads): `Error` -### Example + + +#### Example ```javascript const x = 5; @@ -60,7 +64,9 @@ const reason = 'x is expected to be less than y'; console.assert(x < y, {x, y, reason}); ``` -#### Output + + +##### Output ![The result of the console.assert() example](./api-images/console-demo-assert-button.png) @@ -68,6 +74,7 @@ console.assert(x < y, {x, y, reason}); --- + ## clear @@ -79,7 +86,9 @@ If [Preserve Log](reference.md#filter-by-log-level) is turned on, the [clear](#c console.clear() ``` -### See also + + +#### See also * [Clear the Console](reference.md#clear-the-console) @@ -87,6 +96,7 @@ console.clear() --- + ## count @@ -98,7 +108,9 @@ console.count([label]) [Log level](reference.md#persist-messages-across-page-loads): `Info` -### Example + + +#### Example ```javascript console.count(); @@ -107,7 +119,9 @@ console.count(); console.count(); ``` -#### Output + + +##### Output ![The result of the console.count() example](./api-images/console-demo-count-button.png) @@ -115,6 +129,7 @@ console.count(); --- + ## countReset @@ -124,7 +139,9 @@ Resets a count. console.countReset([label]) ``` -### Example + + +#### Example ```javascript console.countReset(); @@ -135,6 +152,7 @@ console.countReset('coffee'); --- + ## debug @@ -146,13 +164,17 @@ console.debug(object [, object, ...]) [Log level](reference.md#persist-messages-across-page-loads): `Verbose` -### Example + + +#### Example ```javascript console.debug('debug'); ``` -#### Output + + +##### Output ![The result of the console.debug() example](./api-images/console-demo-debug-button.png) @@ -160,6 +182,7 @@ console.debug('debug'); --- + ## dir @@ -171,13 +194,17 @@ console.dir(object) [Log level](reference.md#persist-messages-across-page-loads): `Info` -### Example + + +#### Example ```javascript console.dir(document.head); ``` -#### Output + + +##### Output ![The result of the console.dir() example](./api-images/console-demo-dir-button.png) @@ -185,6 +212,7 @@ console.dir(document.head); --- + ## dirxml @@ -196,13 +224,17 @@ console.dirxml(node) [Log level](reference.md#persist-messages-across-page-loads): `Info` -### Example + + +#### Example ```javascript console.dirxml(document); ``` -#### Output + + +##### Output ![The result of the console.dirxml() example](./api-images/console-demo-dirxml-button.png) @@ -210,6 +242,7 @@ console.dirxml(document); --- + ## error @@ -221,13 +254,17 @@ console.error(object [, object, ...]) [Log level](reference.md#persist-messages-across-page-loads): `Error` -### Example + + +#### Example ```javascript console.error("I'm sorry, Dave. I'm afraid I can't do that."); ``` -#### Output + + +##### Output ![The result of the console.error() example](./api-images/console-demo-error-button.png) @@ -235,6 +272,7 @@ console.error("I'm sorry, Dave. I'm afraid I can't do that."); --- + ## group @@ -244,7 +282,9 @@ Visually groups messages together until the [groupEnd](#groupend) method is used console.group(label) ``` -### Example + + +#### Example ```javascript const label = 'Adolescent Irradiated Espionage Tortoises'; @@ -256,7 +296,9 @@ console.info('Raph'); console.groupEnd(label); ``` -#### Output + + +##### Output ![The result of the console.group() example](./api-images/console-demo-group-button.png) @@ -264,6 +306,7 @@ console.groupEnd(label); --- + ## groupCollapsed @@ -277,6 +320,7 @@ console.groupCollapsed(label) --- + ## groupEnd @@ -290,6 +334,7 @@ console.groupEnd(label) --- + ## info @@ -301,13 +346,17 @@ console.info(object [, object, ...]) [Log level](reference.md#persist-messages-across-page-loads): `Info` -### Example + + +#### Example ```javascript console.info('info'); ``` -#### Output + + +##### Output ![The result of the console.info() example](./api-images/console-demo-info-button.png) @@ -315,6 +364,7 @@ console.info('info'); --- + ## log @@ -326,13 +376,17 @@ console.log(object [, object, ...]) [Log level](reference.md#persist-messages-across-page-loads): `Info` -### Example + + +#### Example ```javascript console.log('log'); ``` -#### Output + + +##### Output ![The result of the console.log() example](./api-images/console-demo-log-button.png) @@ -340,6 +394,7 @@ console.log('log'); --- + ## table @@ -351,7 +406,9 @@ console.table(array) [Log level](reference.md#persist-messages-across-page-loads): `Info` -### Example + + +#### Example ```javascript console.table([ @@ -371,7 +428,9 @@ console.table([ ]); ``` -#### Output + + +##### Output ![The result of the console.table() example](./api-images/console-demo-table-button.png) @@ -379,6 +438,7 @@ console.table([ --- + ## time @@ -388,7 +448,9 @@ Starts a new timer. Use the [timeEnd](#timeend) method to stop the timer and pr console.time([label]) ``` -### Example + + +#### Example ```javascript console.time(); @@ -398,7 +460,9 @@ for (var i = 0; i < 100000; i++) { console.timeEnd(); ``` -#### Output + + +##### Output ![The result of the console.time() example](./api-images/console-demo-time-button.png) @@ -406,6 +470,7 @@ console.timeEnd(); --- + ## timeEnd @@ -421,6 +486,7 @@ console.timeEnd([label]) --- + ## trace @@ -432,7 +498,9 @@ console.trace() [Log level](reference.md#persist-messages-across-page-loads): `Info` -### Example + + +#### Example ```javascript const first = () => { second(); }; @@ -442,7 +510,9 @@ const fourth = () => { console.trace(); }; first(); ``` -#### Output + + +##### Output ![The result of the console.trace() example](./api-images/console-demo-trace-button.png) @@ -450,6 +520,7 @@ first(); --- + ## warn @@ -461,13 +532,17 @@ console.warn(object [, object, ...]) [Log level](reference.md#persist-messages-across-page-loads): `Warning` -### Example + + +#### Example ```javascript console.warn('warn'); ``` -#### Output + + +##### Output ![The result of the console.warn() example](./api-images/console-demo-warn-button.png) @@ -475,6 +550,7 @@ console.warn('warn'); --- + ## See also diff --git a/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md b/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md index b5386ad67b..6ecca3b3ac 100644 --- a/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md +++ b/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md @@ -16,10 +16,11 @@ This article walks you through six demo pages to demonstrate resolving JavaScrip ## Fix JavaScript errors -The first experience you have with the **Console** is likely to be errors in scripts. +A major role of the **Console** is to display any JavaScript errors that are found in the webpage. -### Demo page: JavaScript error reported in the Console tool + +#### Demo page: JavaScript error reported in the Console tool 1. Open the demo webpage [JavaScript error reported in the Console tool](https://microsoftedge.github.io/Demos/devtools-console/error.html) in a new window or tab. @@ -43,10 +44,11 @@ The first experience you have with the **Console** is likely to be errors in scr ## Find and debug network issues -The **Console** also reports network errors. +The **Console** reports network errors. -### Demo page: Network error reported in Console + +#### Demo page: Network error reported in Console 1. Open the demo webpage [Network error reported in Console](https://microsoftedge.github.io/Demos/devtools-console/network-error.html) in a new window or tab. @@ -93,12 +95,14 @@ The **Console** also reports network errors. ![The Sources tool displays the line of code with the error](./console-debug-javascript-images/network-error-code-error.png) -### Viewing the resulting page when there are no errors in the Console + +#### Viewing the resulting page when there are no errors in the Console Next, we'll look at the resulting page when there are no errors in the **Console**. -#### Demo page: Fixed network error reported in Console + +##### Demo page: Fixed network error reported in Console 1. Open the demo webpage [Fixed network error reported in Console](https://microsoftedge.github.io/Demos/devtools-console/network-error-fixed.html) in a new window or tab. @@ -107,7 +111,8 @@ Next, we'll look at the resulting page when there are no errors in the **Console ![The example without any errors loads information from GitHub and displays it](./console-debug-javascript-images/network-error-fixed.png) -#### Demo page: Network error reporting in Console and UI + +##### Demo page: Network error reporting in Console and UI Use defensive coding techniques to avoid the previous user experiences. Make sure your code catches errors and displays each error in the **Console**, as follows: @@ -147,7 +152,8 @@ Use defensive coding techniques to avoid the previous user experiences. Make su Besides the `throw Error` example in the previous section, you can also create different errors and trace problems in the **Console**. -### Demo page: Creating error reports and assertions in Console + +#### Demo page: Creating error reports and assertions in Console To display two created error messages in the **Console**: @@ -209,7 +215,8 @@ To display two created error messages in the **Console**: * You test for `x >= 40` for the assertion. -### Demo page: Creating traces in Console + +#### Demo page: Creating traces in Console If you aren't sure which function requests another function, use the `console.trace()` method to track which functions are requested in order to get to the current function. diff --git a/microsoft-edge/devtools-guide-chromium/console/index.md b/microsoft-edge/devtools-guide-chromium/console/index.md index 04214bf820..5f70fdeb8e 100644 --- a/microsoft-edge/devtools-guide-chromium/console/index.md +++ b/microsoft-edge/devtools-guide-chromium/console/index.md @@ -74,7 +74,8 @@ DevTools with a **Console** full of messages: The most popular use case for the **Console** is logging information from your scripts using the `console.log()` method or other similar methods. -### Example code + +#### Example code ```javascript // prints the text to the console as a log message @@ -179,7 +180,8 @@ Autocompletion of JavaScript expressions in the **Console**: The **Console** has access to the [Window](https://developer.mozilla.org/docs/Web/API/Window) object of the browser. You can write scripts that interact with the current webpage, by reading data from the DOM and assigning data to DOM elements. -### Reading from the DOM tree in the Console + +#### Reading from the DOM tree in the Console To use a JavaScript expression to read from the current page by reading a selected element from the DOM tree: @@ -198,7 +200,8 @@ To use a JavaScript expression to read from the current page by reading a select You have read from the DOM representation of the webpage, by entering a JavaScript expression in the **Console** and displaying the output in the **Console**. -### Writing to the DOM tree and webpage from the Console + +#### Writing to the DOM tree and webpage from the Console You can also change the rendered webpage, by changing the DOM (or _writing to_ the DOM), from within the **Console**. @@ -219,7 +222,8 @@ To change the rendered webpage: You changed the main heading of the webpage to **Rocking the Console**. -### Using the $$ Console utility method to + +#### Using the $$ Console utility method to The **Console Utility** methods make it easy to access and manipulate the current webpage. diff --git a/microsoft-edge/devtools-guide-chromium/console/live-expressions.md b/microsoft-edge/devtools-guide-chromium/console/live-expressions.md index 3a56aaa94c..9720d76bb5 100644 --- a/microsoft-edge/devtools-guide-chromium/console/live-expressions.md +++ b/microsoft-edge/devtools-guide-chromium/console/live-expressions.md @@ -85,7 +85,8 @@ To get rid of a Live Expression, click the **Close** (![The close live expressio You can create as many Live Expressions as you want, and persist each Live Expression across browser sessions and windows. Live Expressions are a way to cut down on noise in your debugging workflow. -### Use Console logging to display mouse coordinates + +#### Use Console logging to display mouse coordinates To monitor the mouse movement in the current webpage: @@ -102,7 +103,8 @@ To monitor the mouse movement in the current webpage: The large amount of information slows down your debugging process, and makes it hard to see the changes that you're trying to monitor. As the **Console** displays more messages when you move your mouse, the values that you want to see scroll off the screen. -### Use Live Expressions to display mouse coordinates + +#### Use Live Expressions to display mouse coordinates Use Live Expressions to monitor the mouse movement in the current webpage, without relying on verbose log messages. @@ -127,3 +129,11 @@ To use Live Expressions to avoid excessive Console log messages: Now in the **Console**, the values of the `x` and `y` Live Expressions are updated in real time: ![The Console tool, with the x and y live expressions, showing the coordinates of the mouse in the rendered webpage](./live-expressions-images/x-and-y.png) + + + +## See also + +* [live expression demo](https://microsoftedge.github.io/Demos/devtools-console/live-expressions.html) +* [Logging Mouse Movement demo](https://microsoftedge.github.io/Demos/devtools-console/mousemove.html) +* [Mouse movement without logging demo](https://microsoftedge.github.io/Demos/devtools-console/mousemove-no-log.html) diff --git a/microsoft-edge/devtools-guide-chromium/css/grid.md b/microsoft-edge/devtools-guide-chromium/css/grid.md index 5202ac8e19..0e9dbb204d 100644 --- a/microsoft-edge/devtools-guide-chromium/css/grid.md +++ b/microsoft-edge/devtools-guide-chromium/css/grid.md @@ -51,7 +51,9 @@ The **Grid** section in the **Layout** pane contains the following 2 sub-section In the **Layout** tab, in the expandable **Grid** section, the **Overlay display settings** section contains the following UI. -### Dropdown list + + +#### Dropdown list Select one of the following options from the dropdown list: @@ -63,13 +65,17 @@ Select one of the following options from the dropdown list: The following sections explain the **Overlay display settings** dropdown list commands. -#### Hide line labels + + +##### Hide line labels In the dropdown list, select **Hide line labels** to hide the labels of the lines for each grid overlay. ![Hide line labels](./grid-images/grid-hide-line-labels.png) -#### Show line numbers + + +##### Show line numbers In the dropdown list, select **Show line numbers** to display the numbers of the lines for each grid overlay (selected by default). @@ -79,7 +85,9 @@ For more information about negative numbers in the grid overlay, see [Line-based ![Display line numbers](./grid-images/grid-show-line-numbers.png) -#### Show line names + + +##### Show line names In the dropdown list, select **Show line names** to view the line names instead of numbers; this displays the names of the lines for each grid overlay when names are provided. In the example, 4 lines have names: `left`, `middle1`, `middle2`, and `right`. @@ -89,7 +97,9 @@ For more information about line names in the grid overlay, see [Layout using nam ![Show line names](./grid-images/grid-show-line-names.png) -### Checkboxes + + +#### Checkboxes Select any of the checkboxes in the **Overlay display settings** section: @@ -101,7 +111,9 @@ Select any of the checkboxes in the **Overlay display settings** section: The following sections explain these checkboxes. -#### Show track sizes + + +##### Show track sizes Select the **Show track sizes** checkbox, to view the track sizes of the grid. @@ -128,13 +140,17 @@ The row line labels display only computed sizes, since there are no row sizes de ![Show track sizes](./grid-images/grid-show-track-sizes.png) -#### Show area names + + +##### Show area names To view the area names, select the **Show area names** checkbox. In the example, there are 3 areas in the grid: **top**, **bottom1** and **bottom2**. ![Show area names](./grid-images/grid-show-area-names.png) -#### Extend grid lines + + +##### Extend grid lines Select the **Extend grid lines** checkbox to extend the grid lines to the edge of the viewport along each axis. @@ -146,7 +162,9 @@ Select the **Extend grid lines** checkbox to extend the grid lines to the edge o The **Grid overlays** section contains a list of grids that are present on the page, each with a checkbox, along with various options. -### Enable overlay views of multiple grids + + +#### Enable overlay views of multiple grids To display the overlay grid for multiple grids, select the checkbox next to each name of the grid. In the example, there are 2 grid overlays enabled, that are each represented with different colors: @@ -155,19 +173,34 @@ To display the overlay grid for multiple grids, select the checkbox next to each ![Enable overlay views of multiple grids](./grid-images/grid-grid-overlays.png) -### Customize the grid overlay color + + +#### Customize the grid overlay color To open the color picker and customize the grid overlay color, click the box next to the name of the grid overlay: ![Customize the grid overlay color](./grid-images/grid-grid-overlays-color.png) -### Highlight the grid + + +#### Highlight the grid To highlight the HTML element in the **Elements** tool and scroll to it on the webpage, click the **Show element in the Elements panel** (![Show element in the Elements panel icon](./grid-images/show-element-in-element-panel-icon.png)) icon. ![Highlight the grid](./grid-images/grid-grid-overlays-highlight.png) + +## See also + + +* [Fruit box](https://jec.fyi/demo/css-grid-fruit) - example used in figures in this article. +* [Snack box](https://jec.fyi/demo/css-grid-snack) - example used in figures in this article. +* [CSS Grid Layout guide](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout) on MDN. +* [Line-based placement with CSS Grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) on MDN. +* [Layout using named grid lines](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) on MDN. + + > [!NOTE] > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). From fcb57822fd689f8a408879a404cb1d4bfe5c03c6 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Mon, 16 Sep 2024 09:33:40 -0700 Subject: [PATCH 2/9] remaining files --- .../devtools-guide-chromium/css/reference.md | 9 +- .../device-mode/dual-screen-and-foldables.md | 8 +- .../inspect-styles/animations.md | 20 +-- .../media-panel/index.md | 4 +- .../memory-inspector/memory-inspector-tool.md | 17 +- .../memory-problems/index.md | 4 +- .../devtools-guide-chromium/network/index.md | 6 +- .../remote-debugging/index.md | 19 ++- .../remote-debugging/local-server.md | 16 +- .../remote-debugging/surface-duo-emulator.md | 8 +- .../remote-debugging/webviews.md | 14 +- .../remote-debugging/windows.md | 53 ++++--- .../rendering-tools/js-runtime.md | 24 +-- .../shortcuts/index.md | 8 +- .../whats-new/2019/12/devtools.md | 84 ++++++---- .../whats-new/2020/01/devtools.md | 80 +++++----- .../whats-new/2020/03/devtools.md | 65 ++++---- .../whats-new/2020/05/devtools.md | 79 ++++----- .../whats-new/2020/06/devtools.md | 83 +++++----- .../whats-new/2020/08/devtools.md | 117 +++++++------- .../whats-new/2020/10/devtools.md | 46 +++--- .../whats-new/2020/11/devtools.md | 52 +++--- .../whats-new/2021/02/devtools.md | 40 ++--- .../whats-new/2021/04/devtools.md | 68 ++++---- .../whats-new/2021/05/devtools.md | 32 ++-- .../whats-new/2021/11/devtools.md | 6 +- .../whats-new/2022/01/devtools.md | 4 +- microsoft-edge/visual-studio/index.md | 45 ++++-- .../web-platform/tracking-prevention.md | 150 +++++++++++------- microsoft-edge/webdriver-chromium/ie-mode.md | 52 +++--- .../webview2/concepts/basic-authentication.md | 48 ++---- .../webview2/concepts/browser-features.md | 15 +- .../webview2/concepts/enterprise.md | 19 ++- .../webview2/concepts/threading-model.md | 4 +- .../webview2/concepts/user-data-folder.md | 10 +- .../concepts/win32-api-conventions.md | 4 +- microsoft-edge/webview2/get-started/win32.md | 13 +- microsoft-edge/webview2/get-started/wpf.md | 18 ++- .../how-to/communicate-btwn-web-native.md | 11 +- .../webview2/how-to/context-menus.md | 6 +- .../how-to/debug-visual-studio-code.md | 13 +- .../webview2/how-to/debug-visual-studio.md | 4 +- .../webview2/how-to/machine-setup.md | 16 +- .../webview2/how-to/publish-uwp-app-store.md | 18 ++- .../webview2/samples/webview2browser.md | 26 ++- 45 files changed, 813 insertions(+), 625 deletions(-) diff --git a/microsoft-edge/devtools-guide-chromium/css/reference.md b/microsoft-edge/devtools-guide-chromium/css/reference.md index a02f2f9793..da35b3eb72 100644 --- a/microsoft-edge/devtools-guide-chromium/css/reference.md +++ b/microsoft-edge/devtools-guide-chromium/css/reference.md @@ -311,7 +311,8 @@ To add a new style rule: ![Add a new style rule](./reference-images/css-elements-styles-style-new.png) -### Select a stylesheet to add a rule to + +#### Select a stylesheet to add a rule to By default, when adding a style rule, DevTools creates a new stylesheet named `inspector-stylesheet` in the document and then adds the new style rule in this stylesheet. @@ -322,7 +323,8 @@ To instead add the rule in an existing stylesheet: ![Selecting a stylesheet](./reference-images/css-elements-styles-style-new-select-existing.png) -### Add a style rule to a specific location + +#### Add a style rule to a specific location By default, adding a style rule by clicking on **New Style Rule** inserts the new rule beneath the **element.style** rule in the `inspector-stylesheet` stylesheet. @@ -387,7 +389,8 @@ The following figure and list describes of each of the UI elements of the **Colo | 9 | **Color Palette Switcher** | Toggle between the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette), a custom palette, or a page colors palette. DevTools generates the page color palette based on the colors that it finds in your stylesheets. | -### Sample a color off the page with the Eyedropper + +#### Sample a color off the page with the Eyedropper To change the selected color to some other color on the page: diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md b/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md index 0ab3156a03..d96ba365af 100644 --- a/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md +++ b/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md @@ -36,9 +36,13 @@ The [Device Toolbar](../device-mode/index.md#simulate-a-mobile-viewport) has add The **Experimental Web Platform features** (![ExperimentalApis](./dual-screen-and-foldables-images/experimental-apis-dark-icon.png)) icon displays the state of the **Experimental Web Platform features** flag. If the flag is turned on, the icon is highlighted. If the flag is turned off, the icon isn't highlighted. To turn on (or off) the flag, either click the icon or go to `edge://flags` and toggle the flag. -### Known issues -#### Pointer shaking or stuttering + +#### Known issues + + + +###### Pointer shaking or stuttering When you use a [Microsoft Remote Desktop client](/windows-server/remote/remote-desktop-services/clients/remote-desktop-clients) to connect to a remote PC and emulate the [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) or [Samsung Galaxy Fold](https://www.samsung.com/global/galaxy/galaxy-fold), the pointer may shake or stutter. If you run into the issue, contact the Microsoft Edge DevTools team. diff --git a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md index efd47ac8d8..e7d53fed01 100644 --- a/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md +++ b/microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md @@ -24,17 +24,15 @@ ms.date: 05/11/2021 # Inspect and modify CSS animation effects -Inspect and modify CSS animation effects by using the **Animation Inspector** in the **Animations** tool. +Inspect and modify CSS animation effects by using the **Animation Inspector** in the **Animations** tool: ![The Animations tool](./animations-images/animations-completed.png) -### Summary +Capture animations by opening the **Animations** tool. The **Animations** tool automatically detects and sorts animations into groups. -* Capture animations by opening the **Animations** tool. The **Animations** tool automatically detects and sorts animations into groups. +Inspect animations by slowing down each one, replaying each one, or viewing the source code. -* Inspect animations by slowing down each one, replaying each one, or viewing the source code. - -* Modify animations by changing the timing, delay, duration, or keyframe offsets. +Modify animations by changing the timing, delay, duration, or keyframe offsets. @@ -48,9 +46,11 @@ The **Animations** tool has two main purposes: The Animation Inspector supports CSS animations, CSS transitions, and web animations. `requestAnimationFrame` animations are currently not supported. -### What's an Animation Group? -An _Animation Group_ is a group of animations that may be related to each other. Currently, the web has no real concept of a group animation, so motion designers and developers have to compose and time individual animations so that the animations render as one coherent visual effect. The Animation Inspector predicts which animations are related based on start time (excluding delays, and so on). The Animation Inspector also groups the animations side-by-side. + +#### Animation Groups + +An _Animation Group_ is a group of animations that may be related to each other. The web has no real concept of a group animation, so motion designers and developers have to compose and time individual animations so that the animations render as one coherent visual effect. The Animation Inspector predicts which animations are related based on start time (excluding delays, and so on). The Animation Inspector also groups the animations side-by-side. In other words, a set of animations that are all triggered in the same script block are grouped together. If an animation is asynchronous, it is placed in a separate group. @@ -101,7 +101,9 @@ After you capture an animation, there are a few ways to replay it: * Select the Animation Group from the **Overview** pane (so that it is displayed in the **Details** pane), and then click the **replay** (![replay icon](./animations-images/replay-button-icon.png)) icon. The animation is replayed in the viewport. Click the **animation speed** (![animation speed icons](./animations-images/animation-speed-buttons-icon.png)) icons to change the preview speed of the currently selected Animation Group. You can use the red vertical bar to change your current position. * Click and drag the red vertical bar to scrub the viewport animation. -### View animation details + + +#### 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: diff --git a/microsoft-edge/devtools-guide-chromium/media-panel/index.md b/microsoft-edge/devtools-guide-chromium/media-panel/index.md index a7b8e8a5d4..b23cf02fbe 100644 --- a/microsoft-edge/devtools-guide-chromium/media-panel/index.md +++ b/microsoft-edge/devtools-guide-chromium/media-panel/index.md @@ -63,7 +63,9 @@ The **Media** tool is the main place in DevTools for inspecting the media player ![Media timeline](./index-images/media-panel-timeline.png) -### Remote debugging + + +#### Remote debugging View the media players information on an Android device from your Windows or macOS computer. diff --git a/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md b/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md index dd5133be15..91bfbdb304 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md +++ b/microsoft-edge/devtools-guide-chromium/memory-inspector/memory-inspector-tool.md @@ -76,7 +76,9 @@ https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/whats-new/202 ![ArrayBuffer open in the Memory Inspector panel](./memory-inspector-tool-images/memory-inspector-panel.png) -### Inspect multiple objects + + +#### Inspect multiple objects You can inspect multiple objects at the same time such as DataView and TypedArray. @@ -86,6 +88,7 @@ A new tab for the `b2` object opens next to the first tab, which represents the ![Two ArrayBuffer tabs open in the Memory Inspector panel](./memory-inspector-tool-images/memory-inspector-panel-two.png) + ## Navigating in Memory Inspector @@ -95,7 +98,9 @@ The Memory Inspector panel includes three types of content: * [Memory buffer](#memory-buffer) * [Value inspector](#value-inspector) -### Navigation bar + + +#### Navigation bar ![Memory Inspector panel Navigation bar](./memory-inspector-tool-images/memory-inspector-panel-navigation-bar.png) @@ -107,7 +112,9 @@ Use the far-left history arrows to **Go back in address history** (![Go back in If the Memory buffer does not automatically update when stepping through values, click **Refresh** (![Memory buffer refresh](./memory-inspector-tool-images/memory-inspector-refresh.png)). -### Memory buffer + + +#### Memory buffer ![Memory Inspector panel Memory buffer](./memory-inspector-tool-images/memory-inspector-panel-memory-buffer.png) @@ -117,7 +124,9 @@ The **memory** is also shown in hex format, each byte separated by a space. The The **ASCII representation** of the memory is shown on the right side of the panel. The highlighted character corresponds to the selected byte. You can click on any character or navigate using the arrow keys (left, right, up, and down). -### Value inspector + + +#### Value inspector ![Memory Inspector panel Value inspector](./memory-inspector-tool-images/memory-inspector-panel-value-inspector.png) diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index.md b/microsoft-edge/devtools-guide-chromium/memory-problems/index.md index 7e1f31c5c9..c3adf9e652 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/index.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/index.md @@ -48,7 +48,9 @@ Memory issues are important because they are often perceivable by users. Users * **The performance of a page is delayed or appears to pause frequently**. This is possibly a symptom of frequent garbage collections. Garbage collection is when the browser reclaims memory. The browser decides when this happens. During collections, all script running is paused. So if the browser is garbage collecting a lot, script runtime is going to get paused a lot. -### Memory bloat: how much is "too much"? + + +#### Memory bloat: How much is "too much"? A memory leak is easy to define. If a site is progressively using more and more memory, then you have a leak. But memory bloat is a bit harder to pin down. What qualifies as "using too much memory"? diff --git a/microsoft-edge/devtools-guide-chromium/network/index.md b/microsoft-edge/devtools-guide-chromium/network/index.md index 1d88296133..dede20fa44 100644 --- a/microsoft-edge/devtools-guide-chromium/network/index.md +++ b/microsoft-edge/devtools-guide-chromium/network/index.md @@ -250,7 +250,8 @@ The **Filters** toolbar should be turned on by default. If the **Filters** tool ![The Filters toolbar](./index-images/filter-empty.png) -### Filter by string, regular expression, or property + +#### Filter by string, regular expression, or property The **Filter** text box supports many different types of filtering. @@ -269,7 +270,8 @@ The **Filter** text box supports many different types of filtering. 1. Clear the **Filter** text box of any text. -### Filter by resource type + +#### Filter by resource type To focus in on a certain type of file, such as stylesheets: diff --git a/microsoft-edge/devtools-guide-chromium/remote-debugging/index.md b/microsoft-edge/devtools-guide-chromium/remote-debugging/index.md index 621e37c6fa..ff97d91c34 100644 --- a/microsoft-edge/devtools-guide-chromium/remote-debugging/index.md +++ b/microsoft-edge/devtools-guide-chromium/remote-debugging/index.md @@ -65,7 +65,9 @@ The workflow below works for most users. For more help, see [Troubleshooting: D ![The Remote Devices tab has successfully detected an unknown device that is pending authorization](../media/remote-debugging--unknown-device.png) --> -### Troubleshooting: DevTools isn't detecting the Android device + + +#### Troubleshooting: DevTools isn't detecting the Android device Use the following tips to help you troubleshoot the correct settings for your hardware. @@ -105,22 +107,27 @@ If you find a solution that isn't mentioned on this page or in [DevTools Devices The version of Microsoft Edge running on your Android device determines the version of DevTools that opens on your development machine. So, if your Android device is running a very old version of Microsoft Edge, the DevTools instance may look very different than what you are used to. --> -### More actions: focus, refresh, or close a tab + + +#### More actions: focus, refresh, or close a tab Select **focus tab**, **reload**, or **close** next to the tab that you want to focus, refresh, or close. ![The buttons for focusing, refreshing, or closing a tab](./index-images/remote-debugging-edge-inspect-with-targets-buttons.png) -### Inspect elements + + +#### Inspect elements Go to the **Elements** tool of your DevTools instance, and hover over an element to highlight it in the viewport of your Android device. You can also tap an element on your Android device screen to select it in the **Elements** tool. Click **Select Element** (![Select Element](./index-images/select-element-icon.png)) icon on your DevTools instance, and then select the element on your Android device screen. -> [!NOTE] -> **Select Element** is disabled after the first selection, so you need to re-enable it every time you want to use this feature. +**Select Element** is disabled after the first selection, so you need to re-enable it every time you want to use this feature. + -### Screencast your Android screen to your development machine + +#### Screencast your Android screen to your development machine Click the **Toggle Screencast** (![Toggle Screencast](./index-images/toggle-screencast-icon.png)) icon to view the content of your Android device in your DevTools instance. diff --git a/microsoft-edge/devtools-guide-chromium/remote-debugging/local-server.md b/microsoft-edge/devtools-guide-chromium/remote-debugging/local-server.md index 7c41c1db04..1f5ec80c29 100644 --- a/microsoft-edge/devtools-guide-chromium/remote-debugging/local-server.md +++ b/microsoft-edge/devtools-guide-chromium/remote-debugging/local-server.md @@ -25,13 +25,11 @@ ms.date: 05/11/2021 Host a site on a development machine web server, then access the content from an Android device. -With a USB cable and Microsoft Edge DevTools, run a site from a development machine and then view the site on an Android device. - -### Summary +Port forwarding enables you to view content hosted by the web server running in your development machine on your Android device. -* Port forwarding enables you to view content hosted by the web server running in your development machine on your Android device. +If your web server is using a custom domain, set up your Android device to access the content at that domain with custom domain mapping. -* If your web server is using a custom domain, set up your Android device to access the content at that domain with custom domain mapping. +With a USB cable and Microsoft Edge DevTools, run a site from a development machine and then view the site on an Android device. @@ -73,7 +71,9 @@ Custom domain mapping enables you to view content on an Android device from a we For example, suppose that your site uses a third-party JavaScript library that only works on the domain `microsoft-edge.devtools`. So, you create an entry in your `hosts` file on your development machine to map this domain to `localhost` (for example, `127.0.0.1 microsoft-edge.devtools`). After setting up custom domain mapping and port forwarding, view the site on your Android device at the URL `microsoft-edge.devtools`. -### Set up port forwarding to proxy server + + +#### Set up port forwarding to proxy server To map a custom domain you must run a proxy server on your development machine. Examples of proxy servers are [Charles](https://www.charlesproxy.com), [Squid](https://wiki.squid-cache.org), and [Fiddler](https://www.telerik.com/fiddler). @@ -86,7 +86,9 @@ To set up port forwarding to a proxy: 1. Set up [port forwarding](#set-up-port-forwarding) to your Android device. For the **local address** field, enter `localhost:` followed by the port that your proxy server is running on. For example, if it is running on port `8000`, go to `localhost:8000`. In the **device port** field enter the number that you want your Android device to listen on, such as `3333`. -### Configure proxy settings on your device + + +#### Configure proxy settings on your device Next, you need to configure your Android device to communicate with the proxy server. diff --git a/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md b/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md index 7cd490bb61..bbb93f8683 100644 --- a/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md +++ b/microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md @@ -68,13 +68,17 @@ You can now use the Microsoft Edge DevTools to debug your web content on the [Su ![Using the Microsoft Edge DevTools to debug Bing in the Microsoft Edge app on the Surface Duo emulator](./surface-duo-emulator-images/remote-debugging-surface-duo-devtools.png) -### Troubleshooting + + +#### Troubleshooting If **SurfaceDuoEmulator** isn't displayed on the `edge://inspect` page, try opening or closing tabs in the [Microsoft Edge app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) on the [Surface Duo Emulator](/dual-screen/android/use-emulator). For additional troubleshooting steps, see [troubleshooting section for Android devices](index.md#troubleshooting-devtools-isnt-detecting-the-android-device). -### How the hinge impacts the layout of your web content + + +#### How the hinge impacts the layout of your web content If you span the [Microsoft Edge app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) across both screens in the emulator, the screencast will reflect the new size of the app but not the hinge. diff --git a/microsoft-edge/devtools-guide-chromium/remote-debugging/webviews.md b/microsoft-edge/devtools-guide-chromium/remote-debugging/webviews.md index 2821c36eaf..352301ba58 100644 --- a/microsoft-edge/devtools-guide-chromium/remote-debugging/webviews.md +++ b/microsoft-edge/devtools-guide-chromium/remote-debugging/webviews.md @@ -23,20 +23,18 @@ ms.date: 05/04/2021 limitations under the License. --> # Remotely debug Android WebViews -Debug Android WebViews in your native Android apps using Microsoft Edge Developer Tools. +Debug Android WebViews in your native Android apps using Microsoft Edge Developer Tools, as follows: +* Turn on Android WebView debugging in your native Android app; debug Android WebViews in Microsoft Edge DevTools. +* To display the list of the Android WebViews with debugging turned on, go to `edge://inspect`. +* Debug Android WebViews in the same way you debug a webpage through [remote debugging](index.md). + +Details are below. On Android 4.4 (KitKat) or later, use DevTools to debug WebView content in native Android apps. Android WebView is not related to [Microsoft Edge WebView2](../../webview2/index.md). -### Summary - -* Turn on Android WebView debugging in your native Android app; debug Android WebViews in Microsoft Edge DevTools. -* To display the list of the Android WebViews with debugging turned on, go to `edge://inspect`. -* Debug Android WebViews in the same way you debug a webpage through [remote debugging](index.md). - - ## Configure Android WebViews to debug diff --git a/microsoft-edge/devtools-guide-chromium/remote-debugging/windows.md b/microsoft-edge/devtools-guide-chromium/remote-debugging/windows.md index 03637c3d51..9584477f38 100644 --- a/microsoft-edge/devtools-guide-chromium/remote-debugging/windows.md +++ b/microsoft-edge/devtools-guide-chromium/remote-debugging/windows.md @@ -34,7 +34,9 @@ To set up the host (debuggee) machine: 1. Activate [Developer Mode](/windows/apps/get-started/enable-your-device-for-development) and enable [Device Portal](/windows/uwp/debug-test-perf/device-portal) -### Install and configure Microsoft Edge + + +#### Install and configure Microsoft Edge 1. If you haven't already, on the Windows 10 or later device that you want to debug, install Microsoft Edge from [this page](https://www.microsoft.com/edge). @@ -46,18 +48,21 @@ To set up the host (debuggee) machine: ![Setting 'Enable remote debugging through Windows Device Portal flag'](./windows-images/remote-debugging-windows-media-edge-flags-on-host.png) -### Install the Remote Tools for Microsoft Edge (Beta) + + +#### Install the Remote Tools for Microsoft Edge (Beta) Install the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT) from the [Microsoft Store](https://www.microsoft.com/store/apps/windows). -> [!NOTE] -> The **Get** button for the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT) may be disabled if you are on Windows 10 or later version 1809 or earlier. To set up the host (debuggee) machine, it must be running Windows 10 version 1903 or later. Update the host (debuggee) machine to acquire the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT). +The **Get** button for the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT) may be disabled if you are on Windows 10 or later version 1809 or earlier. To set up the host (debuggee) machine, it must be running Windows 10 version 1903 or later. Update the host (debuggee) machine to acquire the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT). ![The Remote Tools for Microsoft Edge (Beta) in the Microsoft Store](./windows-images/remote-debugging-windows-media-remote-tools-in-store.png) Launch the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT) and, if prompted, accept the permissions dialog in the app. You can now close the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT) and you don't need to have it open for future remote debugging sessions. -### Activate Developer Mode and enable Device Portal + + +#### Activate Developer Mode and enable Device Portal If you are on a WiFi network, make sure the network is marked as either **Domain** or **Private**. You can verify the state by opening the **Windows Security** app, selecting **Firewall & network protection** and checking if your network is listed as a **Domain** network or **Private** network. @@ -65,12 +70,11 @@ If your network is listed as **Public**, go to **Settings** > **Network & Intern Now, open the **Settings** app. In **Find a setting**, enter `Developer settings` and select it. Toggle on **Developer Mode**. You can now turn on the **Device Portal** by setting **Turn on remote diagnostics over local area network connections** to **On**. You can then optionally turn **Authentication** on so that the client (debugger) device must provide the correct credentials to connect to this device. -> [!NOTE] -> If **Turn on remote diagnostics over local area network connections.** was previously turned on, you must turn it off and turn it on again for **Device Portal** to work with the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT). If a **For developers** section isn't displayed in **Settings**, **Device Portal** may already be turned on, so try restarting the Windows 10 or later device instead. +If **Turn on remote diagnostics over local area network connections.** was previously turned on, you must turn it off and turn it on again for **Device Portal** to work with the [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT). If a **For developers** section isn't displayed in **Settings**, **Device Portal** may already be turned on, so try restarting the Windows 10 or later device instead. ![The Settings app with Developer Mode and Device Portal configured](./windows-images/remote-debugging-windows-media-host-settings.png) -Note the machine IP address and connection port displayed under **Connect using:**. The IP address in the image below is `192.168.86.78` and the connection port is `50080`: +Note the machine IP address and connection port that are displayed under **Connect using:**. The IP address in the image below is `192.168.86.78` and the connection port is `50080`: ![Note the IP address and connection port in the Settings](./windows-images/remote-debugging-windows-media-host-settings-ip-address.png) @@ -96,7 +100,9 @@ The client or debugger machine is the device you want to debug from. This devic 1. If you set up authentication for the host (debuggee) machine, you are prompted to enter the **Username** and **Password** for the client (debugger) machine to connect successfully. -### Using https instead of http + + +#### Using https instead of http If you want to connect to the host (debuggee) machine using `https` instead of `http`: @@ -116,8 +122,11 @@ If you want to connect to the host (debuggee) machine using `https` instead of ` 1. Now, when connecting to the host (debuggee) machine from the client (debugger) machine using the `edge://inspect` page, you must use a different `connection port` value. By default, for desktop Windows, the Device Portal uses `50080` as the `connection port` for `http`. For `https`, the Device Portal uses `50043` so follow this pattern: https://`IP address`:`50043` on the `edge://inspect` page. [Read more about the default ports used by Device Portal](/windows/uwp/debug-test-perf/device-portal#setup). -> [!NOTE] -> The default port for `http` is `50080` and the default port for `https` is `50043`, but this isn't always the case, because Device Portal on desktop claims ports in the ephemeral range (\>50,000) to prevent collisions with existing port claims on the device. To learn more, see the [Port Settings](/windows/uwp/debug-test-perf/device-portal-desktop#registry-based-configuration-for-device-portal) section for Device Portal on Windows desktop. + + +###### Default ports + +The default port for `http` is `50080` and the default port for `https` is `50043`, but this isn't always the case, because Device Portal on desktop claims ports in the ephemeral range (\>50,000) to prevent collisions with existing port claims on the device. To learn more, see the [Port Settings](/windows/uwp/debug-test-perf/device-portal-desktop#registry-based-configuration-for-device-portal) section for Device Portal on Windows desktop. @@ -131,14 +140,15 @@ Determine the content you want to debug, and then click **inspect**. The Micros ![The Microsoft Edge DevTools on the client debugging a tab in Microsoft Edge on the host](./windows-images/remote-debugging-windows-media-devtools-client.png) -### Inspect elements + + +#### Inspect elements For example, try inspecting an element. Go to the **Elements** tool of your DevTools instance on the client, and hover on an element to highlight it in the viewport of the host device. You can also tap an element on your host device screen to select it in the **Elements** tool. Select **Select Element** on your DevTools instance on the client, and then tap the element on your host device screen. -> [!NOTE] -> **Select Element** is disabled after the first touch, so you need to turn it on again every time you want to use this feature. +**Select Element** is disabled after the first touch, so you need to turn it on again every time you want to use this feature. > [!IMPORTANT] > The **Event Listeners** pane in the **Elements** tool is blank on Windows 10 version 1903. This is a known issue and the team plans to fix the **Event Listeners** pane in a servicing update to Windows 10 version 1903. @@ -157,19 +167,22 @@ You can interact with the screencast in multiple ways: * To simulate a pinch gesture, hold **Shift** while dragging. * To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer. -Some notes on screencasts: +Notes about screencasts: + * Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Microsoft Edge Address bar, the Windows 10 or later taskbar, and the Windows 10 or later keyboard. + * Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of the performance of your page. + * If your host device screen locks, the content of your screencast disappears. Unlock your host device screen to automatically resume the screencast. -## Known Issues +## Known issues -The **Event Listeners** pane in the **Elements** tool is blank on Windows 10 version 1903. The team plans to fix the **Event Listeners** pane in a servicing update to Windows 10 version 1903. +* The **Event Listeners** pane in the **Elements** tool is blank on Windows 10 version 1903. The team plans to fix the **Event Listeners** pane in a servicing update to Windows 10 version 1903. -The **Cookies** pane in the **Application** panel is blank on Windows 10 version 1903. The team plans to fix the **Cookies** pane in a service update to Windows 10 version 1903. +* The **Cookies** pane in the **Application** panel is blank on Windows 10 version 1903. The team plans to fix the **Cookies** pane in a service update to Windows 10 version 1903. -The **Audits** tool, the **3D View** tool, the **Emulated Devices** section in **Settings**, and the **Accessibility tree** pane in the **Elements** tool aren't currently working as expected. The team plans to fix the listed tools in a future update of Microsoft Edge. +* The **Audits** tool, the **3D View** tool, the **Emulated Devices** section in **Settings**, and the **Accessibility tree** pane in the **Elements** tool aren't currently working as expected. -The file explorer doesn't launch from the DevTools in the **Sources** tool or in the **Security** panel when you remote debug. The team plans to fix the tools in a future update of Microsoft Edge. +* The file explorer doesn't launch from the DevTools in the **Sources** tool or in the **Security** panel when you remote debug. diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md index 20d7252293..fe5d85894a 100644 --- a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md +++ b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md @@ -23,15 +23,13 @@ ms.date: 05/04/2021 limitations under the License. --> # Speed up JavaScript runtime -To identify expensive functions, use the **Memory** tool. +To identify expensive functions, use the **Memory** tool: ![Sample Profiles](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-heavy-bottom-up.png) -### Summary +Record exactly which functions were called and how much memory each requires with Allocation Sampling in the **Memory** tool. -* Record exactly which functions were called and how much memory each requires with Allocation Sampling in the **Memory** tool. - -* Visualize your profiles as a flame chart. +Visualize your profiles as a flame chart. @@ -59,7 +57,9 @@ When you finish recording, DevTools automatically populates the **Memory** panel The default view is **Heavy (Bottom Up)**. This view allows you to review which functions had the most impact on performance and examine the requesting path for each function. -### Change sort order + + +#### Change sort order To change the sorting order, select the dropdown menu next to the **focus selected function** (![focus selected function](./js-runtime-images/focus-icon.png)) icon and then select one of the following options: @@ -75,7 +75,9 @@ To change the sorting order, select the dropdown menu next to the **focus select ![Tree chart](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-tree-top-down.png) -### Exclude functions + + +#### Exclude functions To exclude a function from your Sampling Profile, select it and then click the **exclude selected function** (![exclude selected function](./js-runtime-images/exclude-icon.png)) button. The requesting function (parent) of the excluded function (child) is charged with the allocated memory assigned to the excluded function (child). @@ -104,13 +106,17 @@ Functions are colored randomly. There is no correlation to the colors used in t A tall call stack isn't necessarily significant; it might just mean that a lot of functions were called. But a wide bar means that a function took a long time to complete, so these are candidates for optimization. -### Zoom in on specific parts of recording + + +#### Zoom in on specific parts of recording To zoom in on particular parts of the call stack, click and drag left and right across the overview. After you zoom, the call stack automatically displays the portion of the recording that you selected. ![Chart zoomed](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart-zoomed.png) -### View function details + + +#### View function details Click a function, to view it in the **Sources** tool. diff --git a/microsoft-edge/devtools-guide-chromium/shortcuts/index.md b/microsoft-edge/devtools-guide-chromium/shortcuts/index.md index 987955289e..dfda94d64c 100644 --- a/microsoft-edge/devtools-guide-chromium/shortcuts/index.md +++ b/microsoft-edge/devtools-guide-chromium/shortcuts/index.md @@ -87,7 +87,9 @@ The following keyboard shortcuts are available in most DevTools panels. | Hide the currently selected element | **H** | **H** | | Toggle **Edit as HTML** mode on the currently selected element | **Function+F2** | **F2** | -### Styles pane keyboard shortcuts + + +#### Styles pane keyboard shortcuts | Action | Windows/Linux | macOS | |---|---|---| @@ -123,7 +125,9 @@ The following keyboard shortcuts are available in most DevTools panels. | Navigate to a function declaration, if the current file is HTML or a script.
    Navigate to a rule set, if the current file is a stylesheet. | Press **Ctrl+Shift+O**, then type in the name of the declaration / rule set, or select it from the list of options | press **Command+Shift+O**, then type in the name of the declaration / rule set, or select it from the list of options | | Close the active tab | **Alt+W** | **Option+W** | -### Code Editor keyboard shortcuts + + +#### Code Editor keyboard shortcuts | Action | Windows/Linux | macOS | |---|---|---| diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2019/12/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2019/12/devtools.md index d956dc251e..714cd4a2d4 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2019/12/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2019/12/devtools.md @@ -30,8 +30,8 @@ ms.date: 12/13/2021 ## Announcements from the Microsoft Edge DevTools team - -### Accessibility improvements to the DevTools + +#### Accessibility improvements to the DevTools @@ -50,8 +50,8 @@ See also: * [Navigate DevTools with assistive technology](../../../accessibility/navigation.md) - -### Using the DevTools in other languages + +#### Using the DevTools in other languages @@ -90,8 +90,8 @@ See also: * [Change DevTools language settings](../../../customize/localization.md) - -### webhint Microsoft Edge extension + +#### webhint Microsoft Edge extension @@ -105,8 +105,8 @@ See also: * [The webhint extension for Visual Studio Code](../../../../test-and-automation/webhint.md) - -### 3D View + +#### 3D View @@ -124,12 +124,14 @@ See also: * [Navigate z-index, DOM, and layers using the 3D View tool](../../../3d-view/index.md) - -### Visual Studio Code extensions + +#### Visual Studio Code extensions The DevTools team has also released some extensions for [Visual Studio Code](https://aka.ms/vscode) that let you use the power of the DevTools directly from your text editor. Check out the following extensions. -#### Elements for Microsoft Edge + + +###### Elements for Microsoft Edge @@ -142,7 +144,8 @@ Update: As of 2022, the **Elements for Microsoft Edge** extension is now the **M For more information, check out [Microsoft Edge DevTools extension for Visual Studio Code](../../../../visual-studio-code/microsoft-edge-devtools-extension.md). -#### Debugger for Microsoft Edge + +###### Debugger for Microsoft Edge @@ -154,7 +157,8 @@ With the Debugger for Microsoft Edge Visual Studio Code extension, debug JavaScr Update: As of 2022, the **Debugger for Microsoft Edge Visual Studio Code extension** has been replaced by a built-in debugger for Microsoft Edge in Visual Studio Code. See [Debug Microsoft Edge in Visual Studio Code](../../../../visual-studio-code/debugger-for-edge.md). -#### webhint + +###### webhint @@ -169,8 +173,8 @@ See also: * [The webhint extension for Visual Studio Code](../../../../visual-studio-code/webhint.md) - -### Visual Studio integration + +#### Visual Studio integration @@ -183,9 +187,8 @@ In Visual Studio 2019 version 16.2 or later, use the Visual Studio debugger to d To learn more about debugging Microsoft Edge from Visual Studio, see [Visual Studio for web development](../../../../visual-studio/index.md). - - -### Tracking prevention Console messages + +#### Tracking prevention Console messages @@ -206,8 +209,8 @@ See also: The following sections announce additional features available in Microsoft Edge 80 that were contributed to the open source Chromium project. - -### Support for let and class redeclarations in the Console + +#### Support for let and class redeclarations in the Console The **Console** now supports redeclarations of `let` and `class` statements. The inability to redeclare was a common annoyance for web developers who use the Console to experiment with new JavaScript code. @@ -229,8 +232,8 @@ See also: * [Run JavaScript in the Console](../../../console/console-javascript.md) - -### Improved WebAssembly debugging + +#### Improved WebAssembly debugging DevTools has started to support the DWARF Debugging Standard, which means increased support for stepping over code, setting breakpoints, and resolving stack traces in your source languages within DevTools. @@ -246,10 +249,12 @@ See also: * [Filter Wasm resource type in the Network tool](../../../whats-new/2021/05/devtools.md#filter-wasm-resource-type-in-the-network-tool) in _What's New in DevTools (Microsoft Edge 92)_. - -### Network panel updates + +#### Network panel updates -#### Request Initiator Chains in the Initiator panel + + +###### Request Initiator Chains in the Initiator panel You can now view the initiators and dependencies of a network request as a nested list. This may help you understand why a resource was requested, or what network activity a certain resource (such as a script) caused. @@ -266,7 +271,8 @@ Initiator and dependency information can also be accessed by holding **Shift** a Chromium issue [#842488](https://crbug.com/842488) -#### Highlight the selected network request in the Overview + +###### Highlight the selected network request in the Overview After you select a network resource in order to inspect it, the Network panel now puts a blue border around that resource in the **Overview**. This can help you detect if the network request is happening earlier or later than expected. @@ -277,7 +283,8 @@ Chromium issue [#988253](https://crbug.com/988253) See [Hide the Overview pane](../../../network/reference.md#hide-the-overview-pane) in _Network features reference_. -#### URL and path columns in the Network panel + +###### URL and path columns in the Network panel Use the new **Path** and **URL** columns in the **Network** tool to display the absolute path or full URL of each network resource. @@ -293,7 +300,8 @@ See also: * [Sort requests](../../../network/reference.md#sort-requests) in _Network features reference_ mentions the **Waterfall** column. -#### Updated User-Agent strings + +###### Updated User-Agent strings DevTools supports setting a custom User-Agent string through the **Network Conditions** panel. The User-Agent string affects the `User-Agent` HTTP header attached to network resources, and also the value of `navigator.userAgent`. @@ -313,12 +321,14 @@ See also: * [Override the user agent string](../../../device-mode/override-user-agent.md) - -### Audits panel updates + +#### Audits panel updates In a later release, the **Audits** panel was renamed as the **Lighthouse** panel. -#### New configuration UI + + +###### New configuration UI The configuration UI has a new, responsive design, and the throttling configuration options have been simplified. For more information on the throttling UI changes, see [Audits Panel Throttling](https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#devtools-audits-panel-throttling). @@ -328,10 +338,12 @@ See also: * [Lighthouse tool](../../../lighthouse/lighthouse-tool.md) - -### Coverage tool updates + +#### Coverage tool updates -#### Per-function or per-block coverage modes + + +###### Per-function or per-block coverage modes The **Coverage** tool has a new dropdown menu that lets you specify whether code coverage data should be collected **per function** or **per block**. **Per block** coverage is more detailed but also far more expensive to collect. DevTools uses **per function** coverage by default now. @@ -340,7 +352,9 @@ The **Coverage** tool has a new dropdown menu that lets you specify whether code ![The coverage mode dropdown menu](./devtools-images/modes.png) -#### Coverage must now be initiated by a page refresh + + +###### Coverage must now be initiated by a page refresh Toggling code coverage without a page refresh has been removed because the coverage data was unreliable. For example, a function may be reported as unused if the runtime was a long time ago and the V8 garbage collector has cleaned it up. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md index 7bf41a0b01..7950460555 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md @@ -30,8 +30,8 @@ ms.date: 05/04/2021 ## Announcements from the Microsoft Edge DevTools team - -### Accessibility improvements to the DevTools + +#### Accessibility improvements to the DevTools @@ -50,8 +50,8 @@ See also: * [Navigate DevTools with assistive technology](../../../accessibility/navigation.md) - -### Using the DevTools in other languages + +#### Using the DevTools in other languages @@ -94,8 +94,8 @@ See also: * [Change DevTools language settings](../../../customize/localization.md) - -### webhint Microsoft Edge extension + +#### webhint Microsoft Edge extension @@ -109,8 +109,8 @@ See also: * [The webhint extension for Visual Studio Code](../../../../test-and-automation/webhint.md) - -### 3D View + +#### 3D View @@ -128,8 +128,8 @@ See also: * [Navigate z-index, DOM, and layers using the 3D View tool](../../../3d-view/index.md) - -### Visual Studio Code extensions + +#### Visual Studio Code extensions The DevTools team has also released some extensions for [Visual Studio Code](https://code.visualstudio.com) that let you use the power of the DevTools directly from your text editor! Check out the extensions below: @@ -138,8 +138,8 @@ See also: * [Microsoft Edge DevTools extension for Visual Studio Code](../../../../visual-studio-code/microsoft-edge-devtools-extension.md) - -#### Elements for Microsoft Edge + +###### Elements for Microsoft Edge @@ -152,8 +152,8 @@ Update: As of 2022, the **Elements for Microsoft Edge** extension is now the **M For more information, check out [Microsoft Edge DevTools extension for Visual Studio Code](../../../../visual-studio-code/microsoft-edge-devtools-extension.md). - -#### Debugger for Microsoft Edge + +###### Debugger for Microsoft Edge @@ -165,8 +165,8 @@ With the Debugger for Microsoft Edge Visual Studio Code extension, debug JavaScr Update: As of 2022, the **Debugger for Microsoft Edge Visual Studio Code extension** has been replaced by a built-in debugger for Microsoft Edge in Visual Studio Code. See [Debug Microsoft Edge in Visual Studio Code](../../../../visual-studio-code/debugger-for-edge.md). - -#### webhint + +###### webhint @@ -181,8 +181,8 @@ See also: * [The webhint extension for Visual Studio Code](../../../../visual-studio-code/webhint.md) - -### Visual Studio integration + +#### Visual Studio integration @@ -193,8 +193,8 @@ In Visual Studio 2019 version 16.2 or later, use the Visual Studio debugger to d To learn more about debugging Microsoft Edge from Visual Studio, see [Visual Studio for web development](../../../../visual-studio/index.md). - -### Tracking prevention Console messages + +#### Tracking prevention Console messages @@ -215,8 +215,8 @@ See also: The following sections announce additional features available in Microsoft Edge 81 that were contributed to the open source Chromium project. - -### Moto G4 support in Device Mode + +#### Moto G4 support in Device Mode After [enabling the Device Toolbar](../../../device-mode/index.md#simulate-a-mobile-viewport), simulate the dimensions of a Moto G4 viewport from the **Device** list. @@ -234,16 +234,16 @@ Related features: Chromium issue [#924693](https://crbug.com/924693) - -### Cookie-related updates + +#### Cookie-related updates See also: * [View, edit, and delete cookies](../../../../devtools-guide-chromium/storage/cookies.md) * [Display cookies](../../../../devtools-guide-chromium/network/reference.md#display-cookies) in _Network features reference_ - -#### Blocked cookies in the Cookies pane + +###### Blocked cookies in the Cookies pane The **Cookies** pane in the **Application** panel now displays blocked cookies with a yellow background. @@ -252,8 +252,8 @@ The **Cookies** pane in the **Application** panel now displays blocked cookies w Chromium issue [#1030258](https://crbug.com/1030258) - -#### Cookie priority in the Cookie pane + +###### Cookie priority in the Cookie pane The Cookies tables in the **Network** and **Application** tools now include a **Priority** column. @@ -262,16 +262,16 @@ Caution: Chromium-based browsers, like Microsoft Edge, are the only browsers tha Chromium issue [#1026879](https://crbug.com/1026879) - -#### Edit all cookie values + +###### Edit all cookie values All cells in the Cookie tables are editable now, except cells in the **Size** column because that column represents the network size of the cookie, in bytes. For an explanation of each column, see [Fields](../../../storage/cookies.md#fields)in _View, edit, and delete cookies_. ![Editing a cookie value](./devtools-images/editcookie.png) - -#### Copy as Node.js fetch to include cookie data + +###### Copy as Node.js fetch to include cookie data To get a `fetch` expression that includes cookie data, right-click a network request, and then select **Copy** > **Copy as Node.js fetch**. @@ -280,8 +280,8 @@ To get a `fetch` expression that includes cookie data, right-click a network req Chromium issue [#1029826](https://crbug.com/1029826) - -### More accurate web app manifest icons + +#### More accurate web app manifest icons Previously, the **Manifest** pane in the **Application** panel sent its own requests in order to display web app manifest icons. DevTools now shows the exact same manifest icon that Microsoft Edge uses. @@ -293,8 +293,8 @@ See also: * [Open the Cookies pane](../../../../devtools-guide-chromium/storage/cookies.md#open-the-cookies-pane) in _View, edit, and delete cookies_ - -### Hover on CSS content properties to display unescaped values + +#### Hover on CSS content properties to display unescaped values In the **Styles** pane of the **Elements** tool, to display the unescaped version of a value of a `content` property, hover on the value. @@ -310,8 +310,8 @@ See also: * [CSS features reference](../../../../devtools-guide-chromium/css/reference.md) - -### More detailed source map errors in the Console + +#### More detailed source map errors in the Console The Console now provides more detail on why a source map failed to load or parse. Previously it just provided an error without explaining what went wrong. @@ -322,8 +322,8 @@ See also: * [Map the processed code to your original source code, for debugging](../../../../devtools-guide-chromium/javascript/source-maps.md) - -### Setting for disabling scrolling past the end of a file + +#### Setting for disabling scrolling past the end of a file To prevent the default UI behavior that allows you to scroll well past the end of a file in the **Sources** panel, open [Settings](../../../customize/index.md#settings) and then clear the checkbox **Preferences** > **Sources** > **Allow scrolling past end of file**. 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 2c5641e527..194295c071 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 @@ -32,8 +32,8 @@ Following the updated Chromium schedule, we are adjusting our schedule for upcom ## Announcements from the Microsoft Edge DevTools team - -### Remotely debug Microsoft Edge on Windows 10 or later Devices + +#### Remotely debug Microsoft Edge on Windows 10 or later Devices The [Remote Tools for Microsoft Edge (Beta)](https://www.microsoft.com/store/apps/9P6CMFV44ZLT) app is now available in the [Microsoft Store](https://www.microsoft.com/store/apps/windows). This app extends the [Windows Device Portal](/windows/uwp/debug-test-perf/device-portal). You can connect from Microsoft Edge running on your development machine to a remote Windows 10 or later device and display a list of targets. This list of targets includes all tabs in Microsoft Edge and [PWAs](../../../../progressive-web-apps-chromium/index.md) open on the Windows device. Use DevTools on your development machine against a target running on the remote Windows device. @@ -44,8 +44,8 @@ Read our guide for setting up your Windows 10 device and your development machin Let us know about your remote debugging experience by [tweeting](https://twitter.com/intent/tweet?text=@EdgeDevTools) or clicking the [Send Feedback](../../../contact.md) icon. - -### New ways to access Settings + +#### New ways to access Settings There are tons of settings for DevTools that you can customize to make DevTools look, feel, and work the way you need. In Microsoft Edge 83, accessing [Settings](../../../customize/index.md#settings) in DevTools is now much easier. Open **Settings** by clicking the gear icon next to Console alerts and the main menu. @@ -58,8 +58,8 @@ You can also open **Settings** from the **Main Menu** under **More tools**. Chromium issue [#1050855](https://crbug.com/1050855) - -### New and improved infobars + +#### New and improved infobars Informational notification bars (infobars) in DevTools now have an improved look and more functionality. In Microsoft Edge 83, infobars are easier to read and provide buttons so you can take the relevant action right away. @@ -70,8 +70,8 @@ Chromium issue [#1056348](https://crbug.com/1056348) - -### Navigate the Color Picker with your keyboard + +#### Navigate the Color Picker with your keyboard In previous versions of Microsoft Edge, you couldn't navigate the **Shades** section of the [Color Picker](../../../css/reference.md#change-colors-with-the-color-picker) with the keyboard. In Microsoft Edge 83, you can now use the keyboard to move the selector in the **Shades** section of the Color Picker. @@ -85,8 +85,8 @@ See also: * [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) - -### Properties tab now populates after a page refresh + +#### Properties tab now populates after a page refresh In Microsoft Edge 81 and earlier, the **Properties tab** in the **Elements** panel was broken by page refreshes. When you refreshed the page, the **Properties tab** didn't populate the properties of the currently selected element: @@ -102,8 +102,8 @@ See also: * [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) - -### Use the arrow keys to scroll in the Changes tool + +#### Use the arrow keys to scroll in the Changes tool 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. @@ -121,15 +121,14 @@ See also: * [Track changes to files using the Changes tool](../../../changes/changes-tool.md) - ## Announcements from the Chromium project The following sections announce additional features available in Microsoft Edge 83 that were contributed to the open source Chromium project. - -### Emulate vision deficiencies + +#### Emulate vision deficiencies In the **Rendering** tool, use the new **Emulate vision deficiencies** feature to get a better idea of how people with different types of vision deficiencies experience your site: @@ -158,8 +157,8 @@ See also: * [Types of Colour Blindness](http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness), at Colourblindawareness.org. - -### Emulate locales + +#### Emulate locales To emulate locales, in the **Sensors** tool, select a location from the **Location** dropdown list. (To access the **Sensors** tool, [open the **Command Menu**](../../../command-menu/index.md) and type `Sensors`.) After you select a location, DevTools modifies the current default locale, which affects the following code: @@ -181,8 +180,8 @@ See also: * [Override geolocation with the Sensors tool](../../../device-mode/geolocation.md) - -### Cross-Origin Embedder Policy (COEP) debugging + +#### Cross-Origin Embedder Policy (COEP) debugging The **Network** panel now provides [Cross-Origin Embedder Policy](https://docs.google.com/document/d/1zDlfvfTJ_9e8Jdc8ehuV4zMEu9ySMCiTGMS9y0GU92k/edit#bookmark=id.uo6kivyh0ge2) debugging information. @@ -202,8 +201,8 @@ See also: * [Block requests](../../../network/index.md#block-requests) in _Inspect network activity_. - -### New icons for breakpoints, conditional breakpoints, and logpoints + +#### New icons for breakpoints, conditional breakpoints, and logpoints Update: As of 2022, breakpoints are now indicated by a blue rectangle, instead of a red circle. @@ -221,16 +220,16 @@ See also: * [Pause code with breakpoints](../../../javascript/breakpoints.md) - -### View network requests that set a specific cookie path + +#### View network requests that set a specific cookie path Use the new `cookie-path` filter keyword in the **Network** tool to focus on the network requests that set a specific [cookie path](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie#Directives). To discover more keywords like `cookie-path`, see [Filter requests by properties](../../../network/reference.md#filter-requests-by-properties) in _Network features reference_. - -### Dock to left from the Command Menu + +#### Dock to left from the Command Menu To move DevTools to the left of the viewport (rendered webpage), open the [Command Menu](../../../command-menu/index.md) and run the `Dock to left` command. The **Dock to left** feature has been available since Microsoft Edge 75, but it was previously only accessible from the main menu. You can now access the **Dock to left** feature from the Command Menu, as well. @@ -244,8 +243,8 @@ See also: * [Change DevTools placement (Undock, Dock to bottom, Dock to left)](../../../customize/placement.md) - -### The Audits panel is now the Lighthouse panel + +#### The Audits panel is now the Lighthouse panel The DevTools team frequently got feedback from web developers that while it was possible to run [Lighthouse](https://github.com/GoogleChrome/lighthouse) from DevTools, when they tried it out, they couldn't find a "Lighthouse" panel. So, the **Audits** panel is now called the **Lighthouse** panel. @@ -257,8 +256,8 @@ See also: * [Lighthouse tool](../../../lighthouse/lighthouse-tool.md) - -### Delete all Local Overrides in a folder + +#### Delete all Local Overrides in a folder After setting up **Local Overrides**, you can right-click a directory and then select the new **Delete all overrides** option to delete all Local Overrides in that folder. @@ -272,8 +271,8 @@ See also: * [Override webpage resources with local copies (Overrides tab)](../../../javascript/overrides.md) - -### Updated Long tasks UI + +#### Updated Long tasks UI A **Long Task** is JavaScript code that monopolizes the main thread for a long time, causing a web page to freeze. @@ -286,8 +285,8 @@ Send your feedback by [tweeting](https://twitter.com/intent/tweet?text=@EdgeDevT Chromium issue [#1054447](https://crbug.com/1054447) - -### Maskable icon support in the Manifest pane + +#### Maskable icon support in the Manifest pane There's a new checkbox, **Show only the minimum safe area for maskable icons**, in the **Manifest** pane of the **Application** tool. 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 66eab56cc9..fe0758182b 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 @@ -30,8 +30,8 @@ ms.date: 12/13/2021 ## Announcements from the Microsoft Edge DevTools team - -### Use the DevTools in Windows high contrast mode + +#### Use the DevTools in Windows high contrast mode Microsoft Edge DevTools is now displayed in high-contrast mode when Windows is in high-contrast mode. @@ -48,8 +48,8 @@ See also: * [Check for contrast issues with dark theme and light theme](../../../accessibility/test-dark-mode.md) - -### Match keyboard shortcuts in the DevTools to Visual Studio Code + +#### Match keyboard shortcuts in the DevTools to Visual Studio Code From your [feedback](../../../contact.md) and the [Chromium public issue tracker](https://bugs.chromium.org/p/chromium/issues/list), the Microsoft Edge DevTools team learned that you wanted to be able to customize keyboard shortcuts in DevTools. In Microsoft Edge 84, you can now match keyboard shortcuts in DevTools to [Visual Studio Code](https://code.visualstudio.com/), which is just one of the features the team is working on for shortcut customization. @@ -79,8 +79,8 @@ See also: * [Customize keyboard shortcuts](../../../customize/shortcuts.md) - -### Remote debug Surface Duo emulators + +#### Remote debug Surface Duo emulators You can now remotely debug your web content that's running in the [Surface Duo emulator](/dual-screen/android/use-emulator) using the full power of Microsoft Edge DevTools. @@ -95,8 +95,8 @@ The `edge://inspect` page in a desktop instance of Microsoft Edge shows the **Su Click **inspect** for the tab or PWA that you want to debug, to open DevTools. Follow the step-by-step guide to remotely debug your web content on the Surface Duo emulator: [Remotely debug Surface Duo emulators](../../../remote-debugging/surface-duo-emulator.md). - -### Resize the DevTools Quick View panel more easily + +#### Resize the DevTools Quick View panel more easily 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: @@ -109,8 +109,8 @@ Starting with Microsoft Edge 84, you can resize the **Drawer** by hovering over Chromium issue [#1076112](https://crbug.com/1076112) - -### Screencasting navigation buttons display focus + +#### Screencasting navigation buttons display focus When remote debugging an [Android device](../../../remote-debugging/index.md), a [Windows 10 or later device](../../../remote-debugging/windows.md), or a [Surface Duo emulator](../../../remote-debugging/surface-duo-emulator.md), you can toggle screencasting with the ![Toggle Screencast](./devtools-images/toggle-screencast-icon.png) icon in the top-left corner of DevTools. With screencasting enabled, you can navigate the tab in Microsoft Edge on the remote device from the DevTools window. @@ -121,8 +121,8 @@ In Microsoft Edge 84, these navigation buttons are now also keyboard-accessible. Chromium issue [#1081486](https://crbug.com/1081486) - -### Network panel Details pane is now accessible + +#### Network panel Details pane is now accessible In Microsoft Edge 84, the [Details pane](../../../network/index.md#inspect-the-details-of-the-resource) in the **Network** tool now takes focus when you open it for a resource in the [Network Log](../../../network/index.md#log-network-activity). This change allows screen readers to read out and interact with the content of the **Details** pane. @@ -131,15 +131,14 @@ In Microsoft Edge 84, the [Details pane](../../../network/index.md#inspect-the-d Chromium issue [#963183](https://crbug.com/963183) - ## Announcements from the Chromium project The following sections announce additional features available in Microsoft Edge 84 that were contributed to the open source Chromium project. - -### Fix site issues with the new Issues tool in the DevTools Drawer + +#### Fix site issues with the new Issues tool in the DevTools Drawer 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. @@ -152,8 +151,8 @@ To get started, see [Find and fix problems using the Issues tool](../../../issue Chromium issue [#1068116](https://crbug.com/1068116) - -### View accessibility information in the Inspect Mode tooltip + +#### View accessibility information in the Inspect Mode tooltip The **Inspect Mode** tooltip now indicates whether the element has an accessible [name and role](https://webhint.io/docs/user-guide/hints/hint-axe/name-role-value/) and is [keyboard-focusable](https://webhint.io/docs/user-guide/hints/hint-axe/keyboard/). @@ -170,15 +169,15 @@ See also: * [Analyze pages using the Inspect tool](../../../css/inspect.md) - -### Performance panel updates + +#### Performance panel updates See also: * [Performance features reference](../../../evaluate-performance/reference.md) - -#### View Total Blocking Time information in the footer + +###### View Total Blocking Time information in the footer After recording your load performance, the **Performance** panel now shows Total Blocking Time (TBT) information in the footer. TBT is a load performance metric that helps quantify how long a page takes to become usable. TBT essentially measures how long a page only _appears_ to be usable (because the content is rendered to the screen); but the page isn't actually usable, because JavaScript is blocking the main thread and therefore the page doesn't respond to user input. TBT is the main metric for approximating First Input Delay. @@ -200,8 +199,8 @@ See also: * [Performance features reference](../../../evaluate-performance/reference.md) - -#### Layout Shift events in the new Experience section + +###### Layout Shift events in the new Experience section The new **Experience** section of the **Performance** panel helps you detect layout shifts. Cumulative Layout Shift (CLS) is a metric that helps you quantify unwanted visual instability. @@ -216,8 +215,8 @@ See also: * [Performance features reference](../../../evaluate-performance/reference.md) - -### More accurate promise terminology in the Console + +#### More accurate promise terminology in the Console When logging a `Promise`, the **Console** incorrectly provided `PromiseStatus` value set to `resolved`. @@ -233,15 +232,15 @@ See also: * [Console overview](../../../console/index.md) - -### Styles pane updates + +#### Styles pane updates See also: * [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md) - -#### Support for the revert keyword + +###### Support for the revert keyword The autocomplete UI of the **Styles** pane now detects the [revert](https://developer.mozilla.org/docs/Web/CSS/revert) CSS keyword, which reverts the cascaded value of a property to the previous value applied to the styling of the element. @@ -253,8 +252,8 @@ See also: * [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md) - -#### Image previews + +###### Image previews Hover on a `background-image` value in the **Styles** pane to display a preview of the image in a tooltip. @@ -266,8 +265,8 @@ See also: * [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md) - -#### Color Picker now uses space-separated functional color notation + +###### Color Picker now uses space-separated functional color notation [CSS Color Module Level 4](https://drafts.csswg.org/css-color#changes-from-3) specifies that color functions, such as `rgb()`, should support space-separated arguments. For example, `rgb(0, 0, 0)` is equivalent to `rbg(0 0 0)`. @@ -285,21 +284,23 @@ The space-separated argument syntax has been supported in most browsers for a wh Chromium issue [#1072952](https://crbug.com/1072952) - -### Deprecation of the Properties pane in the Elements panel + +#### Deprecation of the Properties pane in the Elements panel The **Properties** pane in the **Elements** tool is deprecated. Run `console.dir($0)` in the **Console** instead. ![The deprecated Properties pane](./devtools-images/properties.png) -#### Reference + + +###### Reference * [console.dir()](../../../console/api.md#dir) * [$0](../../../console/utilities.md#recently-selected-element-or-javascript-object-0-4) - -### App shortcuts support in the Manifest pane + +#### App shortcuts support in the Manifest pane In the **Application** tool, the **Manifest** page now shows app shortcuts. App shortcuts help users quickly start common or recommended tasks within a web app. The app shortcuts menu is shown only for Progressive Web Apps that are installed on the user's desktop or mobile device. @@ -314,7 +315,7 @@ See also: * [Debug Progressive Web Apps (PWAs)](../../../progressive-web-apps/index.md) - + > [!NOTE] > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). > The original page is found [here](https://developer.chrome.com/blog/new-in-devtools-84) and is authored by [Kayce Basques](https://developers.google.com/web/resources/contributors#kayce-basques) (Technical Writer, Chrome DevTools \& Lighthouse). 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 941332fa05..fb15d40699 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 @@ -30,8 +30,8 @@ ms.date: 05/04/2021 ## Announcements from the Microsoft Edge DevTools team - -### CSS grid debugging features + +#### CSS grid debugging features The Microsoft Edge DevTools team is collaborating with the Chrome DevTools team and Chromium community to add new CSS grid debugging features to DevTools. You can now display grid line numbers, grid gaps, and extended grid lines as an on-page overlay. Plus, more improvements to the grid tools are coming soon. @@ -47,8 +47,8 @@ See also: * [Inspect CSS Grid](../../../css/grid.md) - -### Edit and Replay requests with the Network Console + +#### Edit and Replay requests with the Network Console You can now use **Edit and Replay** on requests in the [Network Log](../../../network/index.md#log-network-activity) using the **Network Console**. Open the [Network Log](../../../network/index.md#log-network-activity), right-click, and then select **Edit and Replay**: @@ -67,8 +67,8 @@ Update: This feature has been released and is no longer experimental. -### Service worker respondWith events in the Timing tab + +#### Service worker respondWith events in the Timing tab The **Timing** tab of the **Network** tool now includes `respondWith` service worker events. The `respondWith` service worker event shows the duration from the time immediately before the service worker `fetch` event handler starts running to the time when the `respondWith` promise of the `fetch` handler is settled. @@ -85,8 +85,8 @@ See also: * [Display the timing breakdown of a request](../../../network/reference.md#display-the-timing-breakdown-of-a-request) in _Network features reference_. - -### webhint feedback in the Issues panel + +#### webhint feedback in the Issues panel ![Experimental feature](./devtools-images/experimental-tag.png) @@ -103,8 +103,8 @@ See also: * [Enable webhint](../../../experimental-features/index.md#enable-webhint) in _Experimental features in Microsoft Edge DevTools_ - -### Move tools between panels + +#### Move tools between 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. @@ -118,8 +118,8 @@ See also: * [About Activity Bar and Quick View tools](../../../overview.md#about-activity-bar-and-quick-view-tools) in _Overview of DevTools_. - -### Improved Initiator tooltip in the Network panel + +#### Improved Initiator tooltip in the Network panel In Microsoft Edge 83 and 84, tooltips for the Initiator column, which shows the cause of the resource request, in the [Network Log](../../../network/index.md#log-network-activity) displayed with a horizontal scrollbar. You were only able to display the call stack that initiated the request by scrolling horizontally in the tooltip. @@ -138,8 +138,8 @@ Chromium issue [#1069404](https://crbug.com/1069404) The following sections announce additional features available in Microsoft Edge 85 that were contributed to the open source Chromium project. - -### Style editing for CSS-in-JS frameworks + +#### Style editing for CSS-in-JS frameworks The **Styles** pane now has better support for editing styles that were created with the [CSS Object Model (CSSOM)](https://drafts.csswg.org/cssom) APIs. Many CSS-in-JS frameworks and libraries use the CSSOM APIs under the hood to construct styles. @@ -154,8 +154,8 @@ Give this feature a try with a [sample that uses CSS-in-JS](https://codepen.io/z Chromium issue [#946975](https://crbug.com/946975) - -### Lighthouse 6 in the Lighthouse panel + +#### Lighthouse 6 in the Lighthouse panel The **Lighthouse** panel is now running Lighthouse 6. For a full list of all changes, see [v6.0.0 release notes](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.0.0). @@ -169,7 +169,8 @@ See also: * [Lighthouse tool](../../../lighthouse/lighthouse-tool.md) -#### First Meaningful Paint deprecation + +###### First Meaningful Paint deprecation First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. FMP has also been removed from the **Performance** panel. **Largest Contentful Paint** is the recommended replacement for FMP. @@ -182,8 +183,8 @@ See also: * [Lighthouse tool](../../../lighthouse/lighthouse-tool.md) - -### Support for new JavaScript features + +#### Support for new JavaScript features DevTools now has better support for some of the latest JavaScript language features: @@ -200,8 +201,8 @@ See also: * [JavaScript debugging features](../../../javascript/reference.md) - -### New app shortcut warnings in the Manifest pane + +#### New app shortcut warnings in the Manifest pane In the **Application** tool, **App shortcuts** help users quickly start common or recommended tasks within a web app. @@ -220,8 +221,8 @@ See also: * [The Application tool, to manage storage](../../../storage/application-tool.md) - -### Consistent display of the Computed pane + +#### Consistent display of the Computed pane The **Computed** pane in the **Elements** tool is now displayed consistently as a pane across all viewport sizes. Previously, the **Computed** pane merged inside of the **Styles** pane when DevTools was narrow. @@ -233,8 +234,8 @@ See also: * [View only the CSS that is actually applied to an element](../../../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element) in _CSS features reference_ - -### Bytecode offsets for WebAssembly files + +#### Bytecode offsets for WebAssembly files DevTools now uses bytecode offsets for displaying line numbers of Wasm disassembly. The line numbers make it clearer that you are looking at binary data, and is more consistent with how the Wasm runtime references locations. @@ -245,8 +246,8 @@ See also: - -### Line-wise copy and cut in Sources Panel + +#### Line-wise copy and cut in Sources Panel When performing copy or cut with no selection in the [Sources panel editor](../../../sources/index.md#using-the-editor-pane-to-view-or-edit-files), DevTools copies or cuts the current line of content. @@ -255,10 +256,12 @@ When performing copy or cut with no selection in the [Sources panel editor](../. Chromium issue [#800028](https://crbug.com/800028) - -### Console Settings updates + +#### Console Settings updates + -#### Ungroup same console messages + +###### Ungroup same console messages The **Group similar** toggle in Console Settings now applies to duplicate messages. Previously it just applied to similar messages. @@ -274,8 +277,8 @@ See also: * [Turn off message grouping](../../../console/reference.md#turn-off-message-grouping) in _Console features reference_ - -### Persisting Selected context only settings + +#### Persisting Selected context only settings The **Selected context only** settings in Console Settings is now persisted. Previously the settings were reset every time you closed and reopened DevTools. The change makes the setting behavior consistent with other Console Settings options. @@ -287,10 +290,12 @@ See also: * [Filter out messages from different JavaScript contexts](../../../console/reference.md#filter-out-messages-from-different-javascript-contexts) - in _Console features reference_ - -### Performance panel updates + +#### Performance panel updates + -#### JavaScript compilation cache information in **Performance** tool + +###### JavaScript compilation cache information in **Performance** tool [JavaScript compilation cache information](https://v8.dev/blog/code-caching-for-devs) is now always displayed in the **Summary** panel of the **Performance** tool. Previously, DevTools did not show anything related to code caching if code caching did not happen. @@ -302,8 +307,8 @@ See also: * [Performance features reference](../../../evaluate-performance/reference.md) - -#### Navigation timing alignment in the Performance panel + +###### Navigation timing alignment in the Performance panel Previously, the **Performance** panel showed times in the rulers based on when the recording started. The timing has now changed for recordings where the user navigates. DevTools now shows ruler times relative to the navigation, instead of when the recording started. @@ -317,8 +322,8 @@ See also: * [Performance features reference](../../../evaluate-performance/reference.md) - -### New icons for breakpoints, conditional breakpoints, and logpoints + +#### New icons for breakpoints, conditional breakpoints, and logpoints Update: As of 2022, breakpoints are now indicated by a blue rectangle, instead of a red circle. 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 b402f732c2..18affe0237 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 @@ -30,8 +30,8 @@ ms.date: 05/04/2021 ## Announcements from the Microsoft Edge DevTools team - -### Match keyboard shortcuts in DevTools to Visual Studio Code + +#### Match keyboard shortcuts in DevTools to Visual Studio Code In Microsoft Edge 86, you can match keyboard shortcuts in the DevTools to your shortcuts in [Microsoft Visual Studio Code](https://code.visualstudio.com). @@ -44,8 +44,8 @@ For example, the keyboard shortcut for pausing or continuing running a script in Chromium issue [#174309](https://crbug.com/174309) - -### Emulate Surface Duo and Samsung Galaxy Fold + +#### Emulate Surface Duo and Samsung Galaxy Fold You can now test the look and feel of your website or app on two new devices: [Surface Duo](https://www.microsoft.com/surface/devices/surface-duo) and [Samsung Galaxy Fold](https://www.samsung.com/us/mobile/galaxy-fold) in Microsoft Edge. @@ -67,8 +67,8 @@ See also: Chromium issue: [#1054281](https://crbug.com/1054281) - -### CSS grid overlay improvements and new experimental grid features + +#### CSS grid overlay improvements and new experimental grid features The Microsoft Edge DevTools team and the Chrome DevTools team collaborate on additional features. The new features include multiple overlays that are persistent and configurable from a new **Layout** pane on the **Elements** tool: @@ -83,8 +83,8 @@ See also: Chromium issue: [#1047356](https://crbug.com/1047356) - -### Table copied from the Console preserves formatting + +#### Table copied from the Console preserves formatting In Microsoft Edge 85 or earlier, in the **Console**, the formatting of a copied `console.table` was lost. If you copied the output from the [table](../../../console/api.md#table) Console API, and pasted it, only the text of the table was kept. @@ -112,8 +112,8 @@ See also: * [Console features reference](../../../console/reference.md) - -### Source Order Viewer for easier accessibility testing + +#### Source Order Viewer for easier accessibility testing The new accessibility helper displays the order in which elements reside in the source file: @@ -129,9 +129,8 @@ See also: Chromium issue: [#1094406](https://crbug.com/1094406) - - - -### Highlight all search results in Elements tool + +#### Highlight all search results in Elements tool In Microsoft Edge 84 and 85, the first search result in the **Elements** tool did not highlight. The remaining search results were highlighted correctly. @@ -175,8 +174,8 @@ See also: The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project. - -### New Media tool + +#### New Media tool DevTools now displays media players information in the [Media](../../../media-panel/index.md) tool. @@ -191,8 +190,8 @@ View live content and inspect potential issues more quickly, such as investigati * Why JavaScript is interacting with the player in an unexpected way. - -### Capture node screenshots using the Elements tool context menu + +#### Capture node screenshots using the Elements tool context menu You can now capture node screenshots using the right-click menu in the **Elements** tool. @@ -206,8 +205,8 @@ See also: * [Capture node screenshot beyond viewport](../../2021/01/devtools.md#capture-node-screenshot-beyond-viewport) in _What's New in DevTools (Microsoft Edge 89)_ - -### Issues tool updates + +#### Issues tool updates The Issues warning bar on the **Console** tool is now replaced with a regular message. @@ -218,7 +217,9 @@ The Issues warning bar on the **Console** tool is now replaced with a regular me See also: * [Find and fix problems using the Issues tool](../../../issues/index.md) -#### Third-party issues + + +###### Third-party issues Third-party issues are now hidden by default in the **Issues** tool. Select the new **Include third-party issues** checkbox to view the issues. @@ -229,8 +230,8 @@ Chromium issues: [1096481](https://crbug.com/1096481), [1068116](https://crbug.c For more information, see [Filter issues by origin](../../../issues/index.md#filter-issues-by-origin) in _Find and fix problems using the Issues tool_. - -### Emulate missing local fonts + +#### Emulate missing local fonts @@ -258,8 +259,8 @@ For more information, see [Disable local fonts](../../../evaluate-performance/re See also [Analyze rendering performance with the Rendering tool](../../../evaluate-performance/reference.md#analyze-rendering-performance-with-the-rendering-tool) in _Performance features reference_. - -### Emulate inactive users + +#### 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 in the [Quick View](../../../customize/index.md#quick-view) panel at the bottom of DevTools. @@ -271,11 +272,10 @@ See also: * [Override geolocation with the Sensors tool](../../../device-mode/geolocation.md) - -### Emulate prefers-reduced-data + +#### Emulate prefers-reduced-data -> [!NOTE] -> In Microsoft Edge 86, to enable this feature, go to `edge://flags#enable-experimental-web-platform-features` and turn on the **Experimental Web Platform features** flag. The emulation option is only displayed if the flag is enabled. +In Microsoft Edge 86, to enable this feature, go to `edge://flags#enable-experimental-web-platform-features` and turn on the **Experimental Web Platform features** flag. The emulation option is only displayed if the flag is enabled. The [prefers-reduced-data](https://drafts.csswg.org/mediaqueries-5#descdef-media-prefers-reduced-data) media query detects user content preferences for reduced data. If selected, the user receives alternate page content that uses less data. @@ -289,8 +289,8 @@ See also: * [Emulate dark or light schemes in the rendered page](../../../accessibility/preferred-color-scheme-simulation.md) - -### Support for new JavaScript features + +#### Support for new JavaScript features DevTools now has better support for the following JavaScript language features: @@ -306,8 +306,8 @@ See also: * [Using the Editor pane to view or edit files](../../../sources/index.md#using-the-editor-pane-to-view-or-edit-files) in _Sources tool overview_ - -### Lighthouse 6.2 in the Lighthouse panel + +#### Lighthouse 6.2 in the Lighthouse panel The **Lighthouse** tool is now running Lighthouse 6.2. For a full list of changes, see the [Lighthouse release notes](https://github.com/GoogleChrome/lighthouse/releases/tag/v6.2.0). @@ -316,8 +316,8 @@ Chromium issue: [#772558](https://crbug.com/772558) For more information, see [Lighthouse tool](../../../lighthouse/lighthouse-tool.md). - -### Deprecation of other origins listing in the Service workers pane + +#### Deprecation of other origins listing in the Service workers pane The **Application** tool now provides a link from the **Service workers** pane to view the full list of service workers from other origins. To access the list of service workers without opening DevTools, go to `edge://service-worker-internals/?devtools`. @@ -332,8 +332,8 @@ See also: * [Application tool, to manage storage](../../../storage/application-tool.md) - -### Show coverage summary for filtered items + +#### Show coverage summary for filtered items DevTools now recalculates and displays a summary of coverage information dynamically. The dynamic display is triggered when filters are applied in the [Coverage](../../../coverage/index.md) tool. Previously, the **Coverage** tool always displayed a summary of all coverage information. @@ -348,8 +348,8 @@ After CSS filtering is applied, the Coverage summary shows `26.8 kB of 408 kB (7 Chromium issue: [#1061385](https://crbug.com/1090802) - -### New frame details view in Application panel + +#### New frame details view in Application panel In the **Application** tool, there's now a **Frames** section that provides a detailed view for each frame. To access the detailed view, click a frame under the **Frames** menu in the **Application** tool. @@ -361,8 +361,8 @@ See also: * [Application tool, to manage storage](../../../storage/application-tool.md) - -#### Frame details for opened windows + +###### Frame details for opened windows Open windows and pop-up windows now display under the frame tree as well. The detailed view of the opened windows includes additional security information. @@ -374,8 +374,8 @@ See also: * [Application tool, to manage storage](../../../storage/application-tool.md) - -#### Security and isolation information + +###### Security and isolation information Secure context, [Cross-Origin-Embedder-Policy (COEP)](https://web.dev/coop-coep), and [Cross-Origin-Opener-Policy (COOP)](https://web.dev/coop-coep) are now displayed in the frame details. @@ -390,16 +390,16 @@ See also: * [Understand security issues using the Security tool](../../../security/index.md) - -### Elements and Network panel updates + +#### Elements and Network panel updates See also: * [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) * [Network features reference](../../../network/reference.md) - -#### Accessible color suggestion in the Styles pane + +###### Accessible color suggestion in the Styles pane DevTools now provides color suggestions for low color contrast text. @@ -414,8 +414,8 @@ See also: * [Test text-color contrast using the Color Picker](../../../accessibility/color-picker.md) - -#### Reinstate Properties pane in the Elements panel + +###### Reinstate Properties pane in the Elements panel In the **Elements** tool, the **Properties** pane is back. The **Properties** pane was [deprecated in Microsoft Edge 84](../05/devtools.md#deprecation-of-the-properties-pane-in-the-elements-panel). The Microsoft Edge DevTools team and the Chrome DevTools team are planning improvements for inspecting properties of elements. @@ -427,9 +427,8 @@ See also: * [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) - - - -#### Autocomplete custom fonts in the Styles pane + +###### Autocomplete custom fonts in the Styles pane Imported font faces are now added to the list of CSS autocompletion when editing the `font-family` property in the **Styles** pane. @@ -460,8 +459,8 @@ See also: * [CSS features reference](../../../css/reference.md) - -#### Consistently display resource type in Network panel + +###### Consistently display resource type in Network panel In the **Network** tool, DevTools now consistently displays the same resource type as the original network request. When redirection (HTTP status code 302) happens, DevTools appends **/ Redirect** to the value in the **Type** column. @@ -475,8 +474,8 @@ See also: * [Network features reference](../../../network/reference.md) - -#### Clear buttons in the Elements and Network tools + +###### Clear buttons in the Elements and Network tools The following text boxes now have **Clear** buttons: diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md index be7123a8a7..4a74c03f63 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools.md @@ -161,8 +161,8 @@ For more information, see [Microsoft Edge DevTools extension for Visual Studio C The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project. - -### New WebAuthn tool + +#### New WebAuthn tool In earlier versions of Microsoft Edge, there was no native WebAuthn debugging support. You needed physical authenticators to test your web application with the [Web Authentication API](https://w3c.github.io/webauthn). With the new **WebAuthn** tool, you can do the following without the use of any physical authenticators: @@ -183,15 +183,15 @@ The **WebAuthn** tool: For more information, see [Emulate authenticators and debug WebAuthn](../../../webauthn/index.md). - -### Elements tool updates + +#### Elements tool updates See also: * [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) - -#### View the Computed sidebar pane in the Styles pane + +###### View the Computed sidebar pane in the Styles pane Toggle the **Computed** pane in the **Styles** pane. The **Computed** pane in the **Styles** pane is collapsed by default. To display or hide the **Computed** pane within the **Styles** pane, click the **Show Computed Styles sidebar** (!['Show Computed Styles sidebar' icon](./devtools-images/show-computed-styles-sidebar-icon.png)) button. @@ -210,8 +210,8 @@ See also: * [View only the CSS that is actually applied to an element](../../../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element) in _CSS features reference_ - -#### Grouping CSS properties in the Computed pane + +###### Grouping CSS properties in the Computed pane To view your applied CSS with less scrolling, group the CSS properties by categories in the **Computed** pane. You can also selectively focus on a set of related properties while you inspect your CSS. From the **Elements** tool, select an element. To group (or ungroup) the CSS properties, toggle the **Group** checkbox. @@ -224,8 +224,8 @@ See also: * [View only the CSS that is actually applied to an element](../../../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element) in _CSS features reference_ - -### Lighthouse 6.4 in the Lighthouse tool + +#### Lighthouse 6.4 in the Lighthouse tool The **Lighthouse** tool is now running Lighthouse 6.4. For a full list of changes, see the [Lighthouse release notes](https://github.com/GoogleChrome/lighthouse/releases/v6.4.1). For real-time updates on this feature in the Chromium open-source project, see Issue [#772558](https://crbug.com/772558). @@ -233,8 +233,8 @@ See also: * [Lighthouse tool](../../../lighthouse/lighthouse-tool.md) - -### performance.mark() events in the Timings section + +#### performance.mark() events in the Timings section The **Timings section** of a recording in the [Performance](../../../evaluate-performance/reference.md) tool now marks `performance.mark()` events. To try this feature and measure the performance of your JavaScript code, add `performance.mark()` events to your code. @@ -253,8 +253,8 @@ Then, open the [Performance](../../../evaluate-performance/reference.md) tool an ![performance.mark events](./devtools-images/perf-mark.png) - -### New resource-type and url filters in the Network tool + +#### New resource-type and url filters in the Network tool Use the new `resource-type` and `url` keywords in the **Network** tool to filter network requests. For example, use `resource-type:image` to focus on the network requests that are images: @@ -265,14 +265,14 @@ To discover more special keywords such as `resource-type` and `url`, see [filter For real-time updates on this feature in the Chromium open-source project, see Issues [#1121141](https://crbug.com/1121141) and [#1104188](https://crbug.com/1104188). - -### Frame details view updates + +#### Frame details view updates In the **Application** tool, in the list of pages on the left, the bottom page is **Frames**, which often lists a frame named **top**. - -#### Display COEP and COOP reporting to endpoint + +###### Display COEP and COOP reporting to endpoint In the **Application** tool, in the list of pages on the left, the bottom page is **Frames**, which often lists a frame named **top**. Select the frame to view the frame detail view, which includes the **Security & Isolation** section. @@ -287,8 +287,8 @@ See also: * [The Application tool, to manage storage](../../../storage/application-tool.md) - -#### Display COEP and COOP report-only mode + +###### Display COEP and COOP report-only mode In the **Application** tool, in the list of pages on the left, the bottom page is **Frames**, which often lists a frame named **top**. Select the frame to view the frame detail view, which includes the **Security & Isolation** section. @@ -303,8 +303,8 @@ See also: * [The Application tool, to manage storage](../../../storage/application-tool.md) - -### View and fix color contrast issues in the CSS Overview tool + +#### View and fix color contrast issues in the CSS Overview tool The **CSS Overview** tool now displays a list of elements on your page that have color contrast issues. The [CSS Overview Accessible Colors Demo](https://css-overview-accessible-colors-demo.glitch.me) page has an example of a color contrast issue. @@ -320,7 +320,7 @@ See also: For history, in the Chromium open-source project, see Issue [#1120316](https://crbug.com/1120316). - + > [!NOTE] > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). > The original page is found [here](https://developer.chrome.com/blog/new-in-devtools-87) and is authored by [Jecelyn Yeen](https://developers.google.com/web/resources/contributors#jecelyn-yeen) (Developer advocate, Chrome DevTools). 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 5cae505789..02630b1e1d 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 @@ -125,8 +125,8 @@ See also: * [Service worker improvements](../../../service-workers/index.md) - -### Application tool + +#### Application tool @@ -154,8 +154,8 @@ See also: * [Service worker improvements](../../../service-workers/index.md) - -### Network tool + +#### Network tool In the **Network** tool, you can debug network requests that are run by service workers. (You can also open network requests from within the **Application** tool, instead of the **Network** tool.) In the **Timing** pane of the **Network** tool, for each request, DevTools displays the following information: @@ -171,8 +171,8 @@ See also: * [Service worker improvements](../../../service-workers/index.md) - -### Sources tool + +#### Sources tool In previous versions of Microsoft Edge, the level of depth in the call stack was limited to the JavaScript code in your service worker. In Microsoft Edge 88, the call stack now displays the initiator of requests that run through your service worker. @@ -250,8 +250,8 @@ In Microsoft Edge version 87, if you turned on the **Match browser language** se The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project. - -### New CSS angle visualization tools + +#### New CSS angle visualization tools DevTools now has better support for CSS angle debugging. When an HTML element on your page has CSS angle applied to it, a clock icon is displayed next to the angle in the **Styles** tool. To toggle the clock overlay, click the clock icon. To change the angle, click anywhere in the clock, drag the needle, or use mouse and keyboard shortcuts. @@ -268,8 +268,8 @@ For more information, see [Change angle value with the Angle Clock](../../../css For updates on this feature in the Chromium open-source project, see Issues [1126178](https://crbug.com/1126178) and [1138633](https://crbug.com/1138633). - -### Simulate storage quota size in the Storage pane + +#### Simulate storage quota size in the Storage pane You can now override storage quota size in the **Storage** pane. This feature allows you to simulate different devices and test the behavior of your website or app in low disk availability scenarios. To simulate the storage quota: @@ -282,8 +282,8 @@ You can now override storage quota size in the **Storage** pane. This feature a For more information, see [Emulate mobile devices (Device Emulation)](../../../device-mode/index.md). To see updates on this feature in the Chromium open-source project, see Issues [945786](https://crbug.com/945786) and [1146985](https://crbug.com/1146985). - -### Report CORS errors in the Network tool + +#### Report CORS errors in the Network tool Try out this feature by navigating to [CORS error demo](https://cors-errors.glitch.me). Open the **Network** tool, refresh the page, and observe the failed CORS network request. The status column displays the **CORS error**. When you hover on the error, the tooltip now displays the error code. In Microsoft Edge version 87 and earlier, DevTools only displayed generic **(failed)** status for CORS errors. @@ -296,8 +296,8 @@ See also: * [Network features reference](../../../network/reference.md) - -### Frame details view updates + +#### Frame details view updates In the **Application** tool, there's a **Frames** section that provides a detailed view for each frame. @@ -305,8 +305,8 @@ See also: * [Application tool, to manage storage](../../../storage/application-tool.md) - -#### Cross-origin isolation information in the Frame details view + +###### Cross-origin isolation information in the Frame details view In the **Application** tool, there's a **Frames** section that provides a detailed view for each frame. When you select a frame, the frame detail page appears, including the **Security & Isolation** section. @@ -322,8 +322,8 @@ See also: * [Application tool, to manage storage](../../../storage/application-tool.md) - -#### New Web Workers information in the Frame details view + +###### New Web Workers information in the Frame details view DevTools now organizes web workers under the relevant parent frame. For example, if the `someName` frame creates `worker.js`, then `worker.js` appears under `someName` in the **Frames** list. To view the details of the web worker: @@ -340,8 +340,8 @@ See also: * [Application tool, to manage storage](../../../storage/application-tool.md) - -#### Display opener frame details for opened windows + +###### Display opener frame details for opened windows DevTools now organizes opened [Windows](https://developer.mozilla.org/docs/Web/API/Window#Constructors) under the relevant parent [frame](https://developer.mozilla.org/docs/Web/API/Window/frames). For example, if the `top` frame opens a `Window` to `https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium`, then the `Window` appears under `top` in the **Frames** list. @@ -367,8 +367,8 @@ See also: * [Application tool, to manage storage](../../../storage/application-tool.md) - -### Copy stacktrace for network initiator + +#### Copy stacktrace for network initiator In the **Network** tool, to copy the stacktrace to your clipboard, right-click the stacktrace, and then select **Copy** > **Copy stacktrace**: @@ -380,8 +380,8 @@ See also: * [Display the stack trace that caused a request](../../../network/reference.md#display-the-stack-trace-that-caused-a-request) in _Network features reference_ - -### Preview Wasm variable value on mouseover + +#### Preview Wasm variable value on mouseover In the **Sources** tool, use this feature to see the value of a WebAssembly (Wasm) variable when your code is paused. To display the current value of a variable, hover on a variable: @@ -393,8 +393,8 @@ See also: * [Using the Debugger pane to debug JavaScript code](../../../sources/index.md#using-the-debugger-pane-to-debug-javascript-code) in _Sources tool overview_ - -### Consistent units of measurement for sizes of files and memory + +#### Consistent units of measurement for sizes of files and memory DevTools now consistently uses `kB` for displaying sizes of files and memory. Previously, DevTools mixed `kB` and `KiB`. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md index b6b7bb6ff6..a98b439789 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md @@ -190,8 +190,8 @@ Starting in Microsoft Edge 90, if you click the **Console sidebar** and hover on The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project. - -### The Console now escapes double-quote characters + +#### The Console now escapes double-quote characters Previously, the **Console** didn't output valid double-quote (`"`) characters in JavaScript strings. Starting in Microsoft Edge version 90, the **Console** outputs JavaScript strings using escaped double-quote (`"`) characters: @@ -203,8 +203,8 @@ See also: * [Console features reference](../../../console/reference.md) - -### Emulate the CSS color-gamut media feature + +#### Emulate the CSS color-gamut media feature The [color-gamut](https://www.chromestatus.com/feature/5354410980933632) media query emulates the approximate range of colors that are supported by the browser and device that you're testing. The dropdown list under **Emulate CSS media feature color-gamut** contains color spaces that DevTools can emulate. For example, to trigger a `color-gamut: p3` media query, select **color-gamut: p3** from the dropdown list. @@ -225,12 +225,12 @@ See also: * [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](../../../rendering-tools/rendering-tool.md) - -### Improved tooling for Progressive Web Apps + +#### Improved tooling for Progressive Web Apps - -#### PWA installability warning in the Console + +###### PWA installability warning in the Console The **Console** now displays a more detailed installability warning message for Progressive Web Apps (PWAs), with a link to [Improving Progressive Web App offline support detection](https://developer.chrome.com/blog/improved-pwa-offline-detection). @@ -240,8 +240,8 @@ See also: * [Overview of Progressive Web Apps (PWAs)](../../../../progressive-web-apps-chromium/index.md) - -#### PWA description length warning in the Manifest pane + +###### PWA description length warning in the Manifest pane In the **Application** tool, the **Manifest** pane now displays a warning message if the manifest description exceeds 324 characters: @@ -255,8 +255,8 @@ See also: https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/storage/application-tool --> - -### New Remote Address Space column in the Network tool + +#### New Remote Address Space column in the Network tool In the **Network** tool, the new **Remote Address Space** column displays the network IP address space of each network resource. To display the new **Remote Address Space** column: @@ -277,8 +277,8 @@ See also: * [Add or remove columns](../../../network/reference.md#add-or-remove-columns), in _Network features reference_. - -### Display allowed and disallowed features in the Frame details view + +#### Display allowed and disallowed features in the Frame details view In the **Application** tool, the **Frames** node in the lower left opens the Frame details view. The Frame details view now includes a **Permissions Policy** section, which displays a list of allowed and disallowed browser features: @@ -294,8 +294,8 @@ See also: - -### New SameParty column in the Cookies pane + +#### New SameParty column in the Cookies pane The **Cookies** pane in the **Application** tool now displays the `SameParty` attribute for each cookie: @@ -309,8 +309,8 @@ See also: * [View, edit, and delete cookies](../../../storage/cookies.md) - -### fn.displayName property in the Console tool is now deprecated + +#### fn.displayName property in the Console tool is now deprecated Previously, the `fn.displayName` property allowed you to control debug names for functions to display in `error.stack` and in DevTools stack traces. Starting in Microsoft Edge version 90, the `fn.displayName` property is now deprecated, and replaced by the `fn.name` property: @@ -326,8 +326,8 @@ See also: - -### Full accessibility tree view in the Elements tool + +#### Full accessibility tree view in the Elements tool ![Experimental feature](./devtools-images/experimental-tag.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md index f45071bca8..8dced98fd2 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md @@ -211,8 +211,8 @@ See also: The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project. - -### Visualize CSS scroll-snap + +#### Visualize CSS scroll-snap In the **Elements** tool, you can now toggle the `scroll-snap` badge to inspect the CSS scroll-snap alignment. When an HTML element on your webpage has `scroll-snap-type` applied to it, a `scroll-snap` badge is displayed next to it in the **Elements** tool. Click the `scroll-snap` badge to toggle displaying a scroll-snap overlay on the webpage. @@ -230,8 +230,8 @@ See also: - -### New Memory Inspector tool + +#### New Memory Inspector tool Use the new **Memory Inspector** tool to inspect an `ArrayBuffer` in JavaScript and Wasm memory: @@ -244,8 +244,8 @@ See: For the history of this feature in the Chromium open-source project, see Issue [1166577](https://crbug.com/1166577). - -### New Badge settings pane in the Elements tool + +#### New Badge settings pane in the Elements tool Now, use the **Badge settings** in the **Elements** tool to turn on (or off) individual badges. Use this feature to customize and stay focused on important badges while you inspect webpages. @@ -264,8 +264,8 @@ See also: - -### Enhanced image preview with aspect ratio information + +#### Enhanced image preview with aspect ratio information In the **Elements** tool, image previews have been enhanced to display more information, including the following details: @@ -288,8 +288,8 @@ See also: * [Inspect network activity](../../../network/index.md) - -### New options to configure Content-Encodings in the Network conditions tool + +#### New options to configure Content-Encodings in the Network conditions tool In the **Network** tool, click the new **More network conditions...** button next to the **Throttling** dropdown menu to open the **Network conditions** tool. To test if server responses are correctly encoded for browsers that don't support [gzip](https://www.gnu.org/software/gzip/manual), [brotli](https://www.brotli.org), or another future `Content-Encoding`: @@ -307,12 +307,12 @@ See also: For the history of this feature in the Chromium open-source project, see Issue [1162042](https://crbug.com/1162042). - -### Styles pane enhancements + +#### Styles pane enhancements - -#### New shortcut to display computed value in the Styles pane + +###### New shortcut to display computed value in the Styles pane Now, to display the computed CSS value in the **Styles** tab in the **Elements** tool: @@ -328,8 +328,8 @@ See also: To view the history of this feature in the Chromium open-source project, see Issue [1076198](https://crbug.com/1076198). - -#### Support for the accent-color keyword + +###### Support for the accent-color keyword The autocomplete UI of the **Styles** pane now detects the `accent-color` CSS keyword, which allows you to specify the accent color for UI controls generated by the element. Examples of UI controls that are generated by an element include checkboxes or radio buttons. @@ -344,8 +344,8 @@ See also: - -### Display details about blocked features in the Frame details view + +#### Display details about blocked features in the Frame details view Permissions Policy is a web platform API that gives a website the ability to allow or block the use of browser features in an individual frame or in an `iframe` that it embeds. To display the details on why a feature is blocked: @@ -368,8 +368,8 @@ See also: To view the history of this feature in the Chromium open-source project, see Issue [1158827](https://crbug.com/1158827). - -### Filter experiments in the Experiments setting + +#### Filter experiments in the Experiments setting Find experiments quicker with the new experiment filter. For example, to turn on new experiments for code issues: @@ -383,8 +383,8 @@ See also: * [Experimental features in Microsoft Edge DevTools](../../../experimental-features/index.md) - -### New Vary Header column in the Cache storage pane + +#### New Vary Header column in the Cache storage pane In the **Application** tool's **Cache Storage** pane, use the new `Vary Header` column to display the `Vary` HTTP response header values: @@ -397,12 +397,12 @@ See also: * [View Cache data](../../../storage/cache.md) - -### Sources tool improvements + +#### Sources tool improvements - -#### Support for new JavaScript features + +###### Support for new JavaScript features DevTools now supports the new **Private brand checks** a.k.a. `#foo in obj` JavaScript language feature. The **private brand checks** feature extends the `in` operator to support private (`#`) class fields on a specific object. Try it in the **Console** and **Sources** tools. @@ -422,8 +422,8 @@ See also: For the history of this feature in the Chromium open-source project, see Issue [11374](https://crbug.com/v8/11374). - -#### Enhanced support for breakpoints debugging + +###### Enhanced support for breakpoints debugging In Microsoft Edge version 90 or earlier, DevTools only set breakpoints in a single bundle. In Microsoft Edge version 91 or later, when you debug a shared component, DevTools properly sets breakpoints in multiple bundles. @@ -436,8 +436,8 @@ See also: - -#### Support hover preview with bracket notation + +###### Support hover preview with bracket notation The **Sources** tool now supports **hover preview** on JavaScript member expressions that use the `[]` notation: @@ -449,8 +449,8 @@ See also: * [JavaScript debugging features](../../../javascript/reference.md) - -#### Improved outline of HTML files + +###### Improved outline of HTML files DevTools now has better outline support for `.html` files. In the **Sources** tool, open the `.html` file. To turn on (or off) the code outline, press **Ctrl+Shift+O** on Windows/Linux or **Command+Shift+O** on macOS. Previously, DevTools only displayed some of the functions. In the following figure, DevTools now correctly list all functions in the outline: @@ -463,8 +463,8 @@ See also: * [Using the Editor pane to view or edit files](../../../sources/index.md#using-the-editor-pane-to-view-or-edit-files) in _Sources tool overview_ - -#### Proper error stack traces for Wasm debugging + +###### Proper error stack traces for Wasm debugging In Microsoft Edge version 90 or earlier, DevTools only displayed generic Wasm references in Error stack traces. In Microsoft Edge version 91 or later, DevTools resolves inline function requests and displays the source location in Error stack traces for Wasm debugging. To learn more about Error stack traces in the **Console**, see [error](../../../console/api.md#error) in _Console object API Reference_. 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 5c1c0446be..5536cf2302 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 @@ -143,8 +143,8 @@ The [Microsoft Edge Developer Tools for Visual Studio Code](https://marketplace. You can file issues and contribute to the extension on the [vscode-edge-devtools GitHub repo](https://github.com/microsoft/vscode-edge-devtools). - -### In-context documentation and UI to make it easier to use the DevTools extension + +#### In-context documentation and UI to make it easier to use the DevTools extension @@ -167,8 +167,8 @@ See also: The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project. - -### CSS Grid editor + +#### CSS Grid editor You can now preview and author CSS Grid layouts, using the new CSS Grid editor. @@ -184,8 +184,8 @@ See also: * [Inspect CSS Grid](../../../css/grid.md) - -### Support for const redeclarations in the Console + +#### Support for const redeclarations in the Console The Console now supports redeclaration of `const` variables across separate REPL scripts (such as when you run a statement in the Console), in addition to the existing `let` and `class` redeclarations. This support allows you to experiment with different declarations for `const` variables without refreshing the page. Previously, DevTools threw a syntax error if you redeclared a `const` binding. @@ -201,8 +201,8 @@ To learn how to run a single REPL script or a multi-line REPL script, see [Run J For the history of this feature in the Chromium open-source project, see Issue [1076427](https://crbug.com/1076427). - -### New shortcut to view iframe details + +#### New shortcut to view iframe details To quickly view `iframe` details, you can now right-click an `iframe` element in the **Elements** tool, and then select **Show iframe details**. @@ -221,8 +221,8 @@ See also: For the history of this feature in the Chromium open-source project, see Issue [1192084](https://crbug.com/1192084). - -### Enhanced CORS debugging support + +#### Enhanced CORS debugging support Cross-origin resource sharing (CORS) errors are now surfaced in the **Issues** tool. There are various potential causes of CORS errors. Click each issue to expand it and see potential causes and solutions. @@ -237,8 +237,8 @@ See also: For the history of this feature in the Chromium open-source project, see Issue [1141824](https://crbug.com/1141824). - -### Renamed XHR filter to Fetch\/XHR + +#### Renamed XHR filter to Fetch\/XHR In the **Network** tool, the **XHR** filter is now renamed to **Fetch/XHR**. This change makes it clearer that this filter includes both `XMLHttpRequest` and `Fetch` API network requests. @@ -252,8 +252,8 @@ See also: For the history of this feature in the Chromium open-source project, see Issue [1201398](https://crbug.com/1201398). - -### Filter Wasm resource type in the Network tool + +#### Filter Wasm resource type in the Network tool In the **Network** tool, you can now select the new **Wasm** filter to filter the WebAssembly network requests. @@ -266,8 +266,8 @@ See also: For the history of this feature in the Chromium open-source project, see Issue [1103638](https://crbug.com/1103638). - -### Compute Intersections are now included in the Performance tool + +#### Compute Intersections are now included in the Performance tool In the **Performance** tool, DevTools now displays **Compute Intersections** in the flame chart. These changes help you identify intersection observers events and debug the potential performance overhead of intersection observers. 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 341030c319..acc269f6f9 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 @@ -75,7 +75,8 @@ For general information about this extension, see [Microsoft Edge DevTools exten -### Display your web project inside the editor, and simulate different devices + +#### Display your web project inside the editor, and simulate different devices The Microsoft Edge DevTools for Visual Studio Code extension now features a dockable screencast and device emulation: @@ -88,7 +89,8 @@ You can see your web project in a dedicated tab inside of Visual Studio Code, an For details about device emulation, see [Device and state emulation](../../../../visual-studio-code/microsoft-edge-devtools-extension/device-state-emulation.md). -### Live, inline issue reporting + +#### Live, inline issue reporting The extension also now features live, inline issue reporting. Instead of finding out about issues in a separate tool, Visual Studio Code highlights the issues in your source code and reports them live while you enter your code: diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md index 14010708ae..489c88c3ad 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md @@ -47,8 +47,8 @@ See also: For general information about this extension, see [Microsoft Edge DevTools extension for Visual Studio Code](../../../../visual-studio-code/microsoft-edge-devtools-extension.md). - -### Screencast enhancements, deprecation warnings, and new launch options for Microsoft Edge + +#### Screencast enhancements, deprecation warnings, and new launch options for Microsoft Edge diff --git a/microsoft-edge/visual-studio/index.md b/microsoft-edge/visual-studio/index.md index 193b863b53..61107d6a70 100644 --- a/microsoft-edge/visual-studio/index.md +++ b/microsoft-edge/visual-studio/index.md @@ -36,7 +36,8 @@ Follow the steps in this section to use Visual Studio to do the following: The simplified workflow allows you to debug JavaScript that runs in Microsoft Edge directly from your IDE. -### Create a new ASP.NET Core web app + +#### Create a new ASP.NET Core web app First, create a new ASP.NET Core web app, as follows: @@ -53,7 +54,8 @@ This **React.js** template specifies how to integrate React.js with an ASP.NET C You've now created a project for an ASP.NET Core web app. -### Launch Microsoft Edge from Visual Studio + +#### Launch Microsoft Edge from Visual Studio Next, run and debug the ASP.NET Core web app project in Visual Studio, as follows: @@ -67,7 +69,7 @@ Next, run and debug the ASP.NET Core web app project in Visual Studio, as follow ![Turn on script debugging in Visual Studio](./index-images/enable-script-debugging.png) -1. In the same dropdown list, select **Web Browser** > the preview channel of Microsoft Edge that you want Visual Studio to launch, such as Microsoft Edge Canary, Dev, or Beta. If you aren't already using one of the Microsoft Edge preview channels, go to [Download Microsoft Edge Insider Channels](https://www.microsoft.com/edge/download/insider) to download one. +1. In the same dropdown list, select **Web Browser** > the preview channel of Microsoft Edge that you want Visual Studio to launch, such as Microsoft Edge Canary, Dev, or Beta. If you aren't already using one of the Microsoft Edge preview channels, go to [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider) to download one. ![Select the preview channel of Microsoft Edge that you want Visual Studio to launch](./index-images/set-web-browser.png) @@ -78,7 +80,8 @@ Next, run and debug the ASP.NET Core web app project in Visual Studio, as follow Continue with the steps below. -### Debug JavaScript code that's running in Microsoft Edge + +#### Debug JavaScript code that's running in Microsoft Edge 1. Switch back to Visual Studio to set a breakpoint. @@ -137,7 +140,7 @@ The Visual Studio debugger is now attached to Microsoft Edge. You can pause the ## Edge DevTools extension for Visual Studio -Debug your ASP.NET projects in Visual Studio with the Edge Developer Tools. You can embed the Microsoft Edge Developer Tools in Microsoft Visual Studio to debug your ASP.NET projects live. Download the [Microsoft Edge Developer Tools for Visual Studio](https://aka.ms/edgetools-for-vs). +Debug your ASP.NET projects in Visual Studio with the Edge Developer Tools. You can embed the Microsoft Edge Developer Tools in Microsoft Visual Studio to debug your ASP.NET projects live. Download the [Microsoft Edge Developers Tools for Visual Studio (PREVIEW)](https://aka.ms/edgetools-for-vs) from the Visual Studio Marketplace. To use the extension: @@ -161,19 +164,16 @@ The **Network** tool is also open by default: ![Microsoft Edge Developer Tools for Visual Studio: Network tool of DevTools](./index-images/devtools-extension-visual-studio-network.png) -The **Inspect tool** (![Inspect tool icon](./index-images/v-s-edge-devtools-inspect-tool-icon.png)) and **Toggle screencast** (![Toggle screencast icon](./index-images/v-s-edge-devtools-toggle-screencast-icon.png)) are available, and the **More Tools** (![More Tools icon](./index-images/more-tools-v-s-icon.png)) menu offers the [Issues](../devtools-guide-chromium/issues/index.md), [Network conditions](../devtools-guide-chromium/network-conditions/network-conditions-tool.md), and [Network request blocking](../devtools-guide-chromium/network-request-blocking/network-request-blocking-tool.md) tools: +The **Inspect tool** (![Inspect tool icon](./index-images/v-s-edge-devtools-inspect-tool-icon.png)) and **Toggle screencast** (![Toggle screencast icon](./index-images/v-s-edge-devtools-toggle-screencast-icon.png)) are available, and the **More Tools** (![More Tools icon](./index-images/more-tools-v-s-icon.png)) menu offers the **Issues** tool, the **Network conditions** tool, and the **Network request blocking** tool: ![The Edge DevTools window of Visual Studio, undocked](./index-images/edge-devtools-v-s-window-undocked.png) - -**See also:** - - -* [Edge Developer Tools for Visual Studio](https://devblogs.microsoft.com/visualstudio/?p=237066&preview=1&_ppp=7aa7aef54f), at Visual Studio DevBlogs. - - * [Microsoft Edge DevTools extension for Visual Studio](../devtools-guide-chromium/whats-new/2022/03/devtools.md#microsoft-edge-devtools-extension-for-visual-studio) in _What's New in DevTools (Microsoft Edge 99)_. ---> @@ -182,3 +182,20 @@ The **Inspect tool** (![Inspect tool icon](./index-images/v-s-edge-devtools-insp The Microsoft Visual Studio and Microsoft Edge teams wants to learn more about how you work with JavaScript in Visual Studio. To send your feedback, select the **Send Feedback** icon in Visual Studio, or tweet [@VisualStudio and @EdgeDevTools](https://twitter.com/intent/tweet?text=@VisualStudio+@EdgeDevTools). ![The Send Feedback icon in Visual Studio](./index-images/feedback-icon.png) + + + +## See also + + +* [Microsoft Edge DevTools extension for Visual Studio](../devtools-guide-chromium/whats-new/2022/03/devtools.md#microsoft-edge-devtools-extension-for-visual-studio) in _What's New in DevTools (Microsoft Edge 99)_. +* [Find and fix problems using the Issues tool](../devtools-guide-chromium/issues/index.md) +* [Network conditions tool](../devtools-guide-chromium/network-conditions/network-conditions-tool.md) +* [Network request blocking tool](../devtools-guide-chromium/network-request-blocking/network-request-blocking-tool.md) + +External: +* [Visual Studio](https://visualstudio.microsoft.com/vs) +* [Download Visual Studio](https://visualstudio.microsoft.com/downloads) +* [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider) +* [Microsoft Edge Developers Tools for Visual Studio (PREVIEW)](https://aka.ms/edgetools-for-vs) at Visual Studio Marketplace. +* [Edge Developer Tools for Visual Studio (Preview)](https://devblogs.microsoft.com/visualstudio/edge-developer-tools-for-visual-studio-preview/), at Visual Studio DevBlogs. diff --git a/microsoft-edge/web-platform/tracking-prevention.md b/microsoft-edge/web-platform/tracking-prevention.md index 164805c0e0..bb16dd5b66 100644 --- a/microsoft-edge/web-platform/tracking-prevention.md +++ b/microsoft-edge/web-platform/tracking-prevention.md @@ -11,7 +11,11 @@ ms.date: 01/07/2021 The tracking prevention feature in Microsoft Edge protects users from online tracking by restricting the ability of trackers to access browser-based storage as well as the network. -The tracking prevention feature is built to uphold the Microsoft Edge [browser privacy promise](https://microsoftedgewelcome.microsoft.com/privacy), while also ensuring that there is no impact by default to website compatibility or the economic viability of the web. +The tracking prevention feature is built to uphold the Microsoft Edge browser privacy promise, while also ensuring that there is no impact by default to website compatibility or the economic viability of the web. + +See also: +* [Welcome to Microsoft Edge - A smarter way to protect](https://www.microsoft.com/edge/welcome) +* [Microsoft Edge Privacy Whitepaper](/legal/microsoft-edge/privacy) @@ -41,23 +45,22 @@ Each of the components are explored and explained in detail on this page. ## Classification -The first component of the tracking prevention feature in Microsoft Edge is classification. To classify online trackers and group them into categories, Microsoft Edge uses the [Disconnect](https://disconnect.me) open source [tracking protection lists](https://github.com/disconnectme/disconnect-tracking-protection). The lists are delivered via the "Trust Protection Lists" component, which is viewable at `edge://components`. After being downloaded, the lists are stored on disk where you can use them to determine whether or how a particular URL is classified. +The first component of the tracking prevention feature in Microsoft Edge is classification. To classify online trackers and group them into categories, Microsoft Edge uses the [disconnect.me](https://disconnect.me) website's open source [Tracker Protection lists](https://github.com/disconnectme/disconnect-tracking-protection). The Tracker Protection lists are delivered via the **Trust Protection Lists** component, which is listed in `edge://components`. After being downloaded, the lists are stored on disk where you can use them to determine whether or how a particular URL is classified. + +To determine if a URL is considered a tracker by the classification system in Microsoft Edge, a series of host names are checked, starting with an exact match and then proceeding to check for partial matches for up to four labels beyond the top-level domain. If any of the host names in the series match with a host name on the disconnect.me website's Tracker Protection lists, Microsoft Edge proceeds with evaluating enforcement actions to prevent users from being tracked. + -To determine if a URL is considered a tracker by the classification system in Microsoft Edge, a series of host names are checked, starting with an exact match and then proceeding to check for partial matches for up to four labels beyond the top-level domain. + +#### Example -> **Example**: -> -> URL: `https://a.subdomain.of.a.known.tracker.test/some/path` -> -> Tested host names: -> -> * `a.subdomain.of.a.known.tracker.test` -> * `of.a.known.tracker.test` -> * `a.known.tracker.test` -> * `known.tracker.test` -> * `tracker.test` +For the URL `https://a.subdomain.of.a.known.tracker.test/some/path`, the tested host names are: -If any of those host names match with a host name on the [Disconnect](https://disconnect.me) [lists](https://github.com/disconnectme/disconnect-tracking-protection), Microsoft Edge proceeds with evaluating enforcement actions to prevent users from being tracked. +* `a.subdomain.of.a.known.tracker.test` +* `subdomain.of.a.known.tracker.test` +* `of.a.known.tracker.test` +* `a.known.tracker.test` +* `known.tracker.test` +* `tracker.test` @@ -79,72 +82,84 @@ How the enforcements are applied depends on what level of tracking prevention th ## Mitigations -To ensure that web compatibility is preserved as much as possible, Microsoft Edge has three mitigations to help balance enforcements in specific situations. These are the [Org Relationship mitigation](#org-relationship-mitigation), the [Org Engagement mitigation](#org-engagement-mitigation), and the [CompatExceptions List](#the-compatexceptions-list). +To ensure that web compatibility is preserved as much as possible, Microsoft Edge has three mitigations to help balance enforcements in specific situations: +* [The Org Relationship mitigation](#org-relationship-mitigation) +* [The Org Engagement mitigation](#org-engagement-mitigation) +* [The CompatExceptions list](#the-compatexceptions-list) + +About the concept of an _Organization_ (_Org_): the [disconnect.me](https://disconnect.me) website maintains an [entities.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json) list that defines groups of URLs that are owned by the same parent organization/company. The tracking prevention feature in Microsoft Edge uses this list in both [The Org Relationship mitigation](#org-relationship-mitigation) and [The Org Engagement mitigation](#org-engagement-mitigation), to minimize the occurrence of compatibility issues caused by tracking prevention affecting cross-organizational requests. + + + +#### The Org Relationship mitigation + +Several popular websites maintain both websites and Content Delivery Networks (CDNs) to serve static resources and content to those sites. To ensure that these types of scenarios aren't affected by tracking prevention, Microsoft Edge exempts a site from tracking prevention when the site is making third-party requests to other sites owned by the same parent organization (as defined in the disconnect.me [entities.json list](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json)). + + + +###### Example + +An organization named Org1 owns the domains `org1.test` and `org1-cdn.test`, as defined in the disconnect.me `entities.json` list. Imagine that `org1-cdn.test` is classified as a tracker and would normally have tracking prevention enforcements applied to it. If a user visits `https://org1.test` and the site tries to load a resource from `https://org1-cdn.test`, Microsoft Edge doesn't take any enforcement actions against requests made to `org1-cdn.test` even though it isn't a first-party URL. If another URL that isn't part of the Org1 organization tries to load that same resource, however, then the request would be subject to enforcements, because it isn't part of the same organization. + +Even though this relaxes tracking prevention enforcements for sites that belong to the same organization, it is unlikely that this introduces a high amount of privacy risk, since such organizations are able to determine which sites/resources you have accessed on `https://org1.test` as well `https://org1-cdn.test` using internal back-end data. -Before diving into the mitigations, it is worth defining the concept of an "Organization" or "Org" for short. [Disconnect](https://disconnect.me) also maintains a list called [entities.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json) that defines groups of URLs that are owned by the same parent organization/company. The tracking prevention feature in Microsoft Edge uses this list in both the [Org Relationship mitigation](#org-relationship-mitigation) and the [Org Engagement mitigation](#org-engagement-mitigation) to minimize the occurrence of compatibility issues caused by tracking prevention affecting cross-organizational requests. -### Org Relationship Mitigation + +#### The Org Engagement mitigation -Several popular websites maintain both websites and Content Delivery Networks (CDNs) to serve static resources and content to those sites. To ensure that these types of scenarios aren't affected by tracking prevention, Microsoft Edge exempts a site from tracking prevention when the site is making third-party requests to other sites owned by the same parent organization (as defined in the [Disconnect entities.json list](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json)). This is best illustrated by an example. +The Org Engagement mitigation was created to minimize compatibility risks introduced by tracking prevention by ensuring that sites owned by organizations that users sufficiently engage with continue to work as expected across the web. It makes use of the [Site Engagement](https://www.chromium.org/developers/design-documents/site-engagement) Service to relax enforcements whenever a user has established an ongoing relationship (currently defined by a site engagement score of 4.1 or greater) with a given site. -> **Example:** -> -> An organization named Org1 owns the domains `org1.test` and `org1-cdn.test`, as defined in the [Disconnect entities.json list](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json). Imagine that `org1-cdn.test` is classified as a tracker and would normally have tracking prevention enforcements applied to it. If a user visits `https://org1.test` and the site tries to load a resource from `https://org1-cdn.test`, Microsoft Edge doesn't take any enforcement actions against requests made to `org1-cdn.test` even though it isn't a first-party URL. If another URL that isn't part of the Org1 organization tries to load that same resource, however, then the request would be subject to enforcements, because it isn't part of the same organization. -> -> Even though this relaxes tracking prevention enforcements for sites that belong to the same organization, it is unlikely that this introduces a high amount of privacy risk, since such organizations are able to determine which sites/resources you have accessed on `https://org1.test` as well `https://org1-cdn.test` using internal back-end data. +The org engagement mitigation is currently only applied in Balanced mode, so that Microsoft Edge is offering the highest possible protections for users who have opted into Strict. -### Org Engagement Mitigation -The org engagement mitigation was created to minimize compatibility risks introduced by tracking prevention by ensuring that sites owned by organizations that users sufficiently engage with continue to work as expected across the web. It makes use of [site engagement](https://www.chromium.org/developers/design-documents/site-engagement) to relax enforcements whenever a user has established an ongoing relationship (currently defined by a site engagement score of 4.1 or greater) with a given site. This again is best illustrated by an example: + +###### Example -> **Example:** -> -> An organization named Social Org owns the domains `social.example` and `social-videos.example`. -> -> Users are considered to have a relationship with Social Org if they have established a site engagement score of 4.1 or greater with any one of domains owned by Social Org. -> -> If another site, `https://content-embedder.example`, includes third-party content (say an embedded video from `social-videos.example`) from any of the domains owned by Social Org that would normally be restricted by tracking prevention enforcements, the site is exempt from tracking prevention enforcements as long as the user's site engagement score with domains owned by Social Org is maintained above the threshold. -> -> If a site doesn't belong to an organization, a user must establish a site engagement score of 4.1 or greater with it directly before any storage access/resource load blocks imposed by tracking prevention are relaxed. +An organization named Social Org owns the domains `social.example` and `social-videos.example`. -The org engagement mitigation is currently only applied in Balanced mode so that Microsoft Edge is offering the highest possible protections for users who have opted into Strict. +Users are considered to have a relationship with Social Org if they have established a site engagement score of 4.1 or greater with any one of domains owned by Social Org. -### The CompatExceptions List +If another site, `https://content-embedder.example`, includes third-party content (say an embedded video from `social-videos.example`) from any of the domains owned by Social Org that would normally be restricted by tracking prevention enforcements, the site is exempt from tracking prevention enforcements as long as the user's site engagement score with domains owned by Social Org is maintained above the threshold. + +If a site doesn't belong to an organization, a user must establish a site engagement score of 4.1 or greater with it directly before any storage access/resource load blocks imposed by tracking prevention are relaxed. + + + +#### The CompatExceptions list Based on recent user feedback Microsoft received, Microsoft Edge maintains a small list of sites (most of which are in the Disconnect Content category) that were breaking due to tracking prevention despite having the above two mitigations in place. Sites on this list are exempt from tracking prevention enforcements. The list can be found on disk at the [locations](#determining-whetherhow-a-particular-url-is-classified) described below. Users may override entries on it using the **Block** option in `edge://settings/content/cookies`. -To avoid maintaining this list moving forwards, Microsoft is currently working on the [Storage Access API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/StorageAccessAPI/explainer.md) in the open-source codebase. The [Storage Access API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/StorageAccessAPI/explainer.md) gives site developers a way to request storage access from users directly, providing users with more transparency into how their privacy settings are affecting their browsing experience, and giving site developers controls to quickly and intuitively unblock themselves. +To avoid maintaining this list moving forwards, Microsoft is currently working on the [Storage Access API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/StorageAccessAPI/explainer.md) in the open-source codebase. The Storage Access API gives site developers a way to request storage access from users directly, providing users with more transparency into how their privacy settings are affecting their browsing experience, and giving site developers controls to quickly and intuitively unblock themselves. -After the [Storage Access API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/StorageAccessAPI/explainer.md) is implemented, Microsoft will deprecate the CompatExceptions list and reach out to the affected sites both to make them aware of the issues, and to request that they use the [Storage Access API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/StorageAccessAPI/explainer.md) moving forward. +After the Storage Access API is implemented, Microsoft will deprecate the CompatExceptions list and reach out to the affected sites both to make them aware of the issues, and to request that they use the Storage Access API moving forward. ## Current tracking prevention behavior -The following table shows the enforcement actions and mitigations that are applied to each category of classified tracker in Microsoft Edge. - -* Along the top are the categories of trackers as defined by [Disconnect tracking protection list categories](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json). -* Along the left side are the three levels of tracking prevention in Microsoft Edge (Basic, Balanced, and Strict). -* The letter `S` indicates that storage access is blocked. -* The letter `B` indicates that both storage access and resource loads (such as network requests) are blocked. -* A hyphen (`-`) indicates that no block is applied to either storage access or resource loads. +The following are the enforcement actions and mitigations that are applied to each category of classified tracker in Microsoft Edge: -| | Advertizing | Analytics | Content | Cryptomining | Fingerprinting | Social | Other | Same Org Mitigation | Org Engagement Mitigation | +| Level | Advertizing | Analytics | Content | Cryptomining | Fingerprinting | Social | Other | Same Org Mitigation | Org Engagement Mitigation | | - | - | - | - | - | - | - | - | - | - | - | | **Basic** | - | - | - | B | B | - | - | Enabled | N/A | | **Balanced** | S | - | S | B | B | S | S | Enabled | Enabled | | **Strict** | B | B | S | B | B | B | B | Enabled | Disabled | -> [!NOTE] -> The org engagement mitigation doesn't apply to the Cryptomining or Fingerprinting categories. +* The column headers are the categories of trackers as defined by the tracking protection list categories that are listed in disconnect.me [services.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json). +* The left column lists the three levels of tracking prevention in Microsoft Edge (Basic, Balanced, and Strict). +* `S` indicates that storage access is blocked. +* `B` indicates that both storage access and resource loads (such as network requests) are blocked. +* A hyphen (`-`) indicates that no block is applied to either storage access or resource loads. + +The org engagement mitigation doesn't apply to the Cryptomining or Fingerprinting categories. + +Strict mode blocks more resource loads than Balanced. The blocking of more resource loads may result in Strict mode appearing to block less tracking requests than Balanced since the trackers making the requests are never loaded. -> [!TIP] -> Strict mode blocks more resource loads than Balanced. The blocking of more resource loads may result in Strict mode appearing to block less tracking requests than Balanced since the trackers making the requests are never loaded. +The Fingerprinting column in [Current tracking prevention behavior](#current-tracking-prevention-behavior) refers to trackers that are on the Fingerprinting list in addition to another list. Trackers that appear on solely on the Fingerprinting list are considered non-malicious fingerprinters and aren't blocked. -> [!NOTE] -> The Fingerprinting column in [Current tracking prevention behavior](#current-tracking-prevention-behavior) refers to trackers that are on the Fingerprinting list in addition to another list. Trackers that appear on solely on the Fingerprinting list are considered non-malicious fingerprinters and aren't blocked. -### InPrivate behavior + +#### InPrivate behavior By default, InPrivate windows in Microsoft Edge use the same tracking prevention settings as regular windows. @@ -167,9 +182,11 @@ To determine whether a specific URL is classified as a known tracker: 1. Look for any messages that read `Tracking Prevention blocked access to storage for `. You can expand the messages to see the individual URLs that were blocked. -1. If you need to determine which category a specific blocked site is in, the easiest way to do this is to search for it on the [Disconnect services.json list](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json). The entries are alphabetized, so scrolling to the top of a block of site entries enables you to find the specific category for a particular site. +1. If you need to determine which category a specific blocked site is in, the easiest way to do this is to search for it in the disconnect.me [services.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json) list. The entries are alphabetized, so scrolling to the top of a block of site entries enables you to find the specific category for a particular site. -### Access tracking prevention lists stored on disk + + +#### Access tracking prevention lists stored on disk If you need to access the tracking prevention lists that are stored on disk, each may be found in one of two locations: @@ -187,12 +204,23 @@ macOS: `/Applications/Microsoft Edge.app/Contents/Frameworks/Microsoft Edge Fram -## Frequently Asked Questions +## Blocking or allowing specific trackers for debugging purposes -The following section contains answers to frequently asked questions about the tracking prevention feature in Microsoft Edge. +Microsoft Edge only exposes an option to disable tracking prevention enforcements from running on a specified site. This option is accessed via the page info flyout, or through the `edge://settings/privacy/trackingPreventionExceptions` page. -**Is there a way to block or allow specific trackers for debugging purposes?** +The **Block** and **Allow** options on the `edge://settings/content/cookies` page can be used to allow or deny specific domains access to storage such as cookies and other browser storage mechanisms. This is useful for debugging site issues that are caused by tracking prevention enforcements blocking access to storage for a specific site. -Currently, Microsoft Edge only exposes an option to disable tracking prevention enforcements from running on a specified site. This option is accessed via the page info flyout or through the `edge://settings/privacy/trackingPreventionExceptions` page. -That being said, the **Block** and **Allow** options on the `edge://settings/content/cookies` page may be used to allow or deny specific domains access to storage such as cookies and other browser storage mechanisms. This is useful for debugging site issues that are caused by tracking prevention enforcements blocking access to storage for a specific site. + +## See also + + +* [Welcome to Microsoft Edge - A smarter way to protect](https://www.microsoft.com/edge/welcome) +* [Microsoft Edge Privacy Whitepaper](/legal/microsoft-edge/privacy) +* [Storage Access API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/StorageAccessAPI/explainer.md) + +disconnect.me: +* [disconnect.me](https://disconnect.me) +* [Tracker Protection lists](https://github.com/disconnectme/disconnect-tracking-protection) +* [entities.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json) list - defines groups of URLs that are owned by the same parent organization/company. +* [services.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json) - tracking protection list categories. diff --git a/microsoft-edge/webdriver-chromium/ie-mode.md b/microsoft-edge/webdriver-chromium/ie-mode.md index 64bbf5dac2..4dc4e25b8b 100644 --- a/microsoft-edge/webdriver-chromium/ie-mode.md +++ b/microsoft-edge/webdriver-chromium/ie-mode.md @@ -31,7 +31,8 @@ To begin automating tests in IE mode in Microsoft Edge, [download IEDriver](http To configure IEDriver, Windows, and Microsoft Edge correctly, complete the requirements for [Selenium's required configuration](https://www.selenium.dev/documentation/ie_driver_server/#required-configuration). -### Place the driver executable in the PATH + +#### Place the driver executable in the PATH The driver executable needs to be placed in the PATH; see [IE Driver Server](https://www.selenium.dev/documentation/ie_driver_server/). The top of that page reads: "The standalone server executable must be downloaded from the Downloads page and placed in your PATH." @@ -59,7 +60,7 @@ The next section shows the complete sample, and then the subsequent sections foc The following sample launches Microsoft Edge in IE mode, navigates to [bing.com](https://www.bing.com/), and then searches for "WebDriver". -### [C#](#tab/c-sharp/) +##### [C#](#tab/c-sharp/) ```csharp using System; @@ -88,7 +89,7 @@ namespace IEDriverSample } ``` -### [Python](#tab/python/) +##### [Python](#tab/python/) ```python from selenium import webdriver @@ -108,7 +109,7 @@ elem.send_keys('WebDriver' + Keys.RETURN) driver.quit() ``` -### [Java](#tab/java/) +##### [Java](#tab/java/) ```java import org.openqa.selenium.By; @@ -135,7 +136,7 @@ public class IEDriverSample { } ``` -### [JavaScript](#tab/javascript/) +##### [JavaScript](#tab/javascript/) ```javascript const {Builder, By, Key, until} = require('selenium-webdriver'); @@ -161,16 +162,17 @@ const {Options} = require('selenium-webdriver/ie'); })(); ``` -* * * +--- The following sections explain the steps in this sample in more detail. + ## Define InternetExplorerOptions with additional properties for Microsoft Edge Define `InternetExplorerOptions` with additional properties that point to the Microsoft Edge browser. -### [C#](#tab/c-sharp/) +##### [C#](#tab/c-sharp/) 1. Define a new variable, `ieOptions`, by calling `InternetExplorerOptions()`. @@ -183,7 +185,7 @@ ieOptions.AttachToEdgeChrome = true; ieOptions.EdgeExecutablePath = "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"; ``` -### [Python](#tab/python/) +##### [Python](#tab/python/) 1. Define a new variable, `ie_options`, by calling `webdriver.IeOptions()`. @@ -195,7 +197,7 @@ ie_options.attach_to_edge_chrome = True ie_options.edge_executable_path = "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" ``` -### [Java](#tab/java/) +##### [Java](#tab/java/) 1. Define a new variable `ieOptions` of type `InternetExplorerOptions`, by calling `new InternetExplorerOptions()`. @@ -207,7 +209,7 @@ ieOptions.attachToEdgeChrome(); ieOptions.withEdgeExecutablePath("C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"); ``` -### [JavaScript](#tab/javascript/) +##### [JavaScript](#tab/javascript/) 1. Define a new variable, `ieOptions`, by calling `Options()`. @@ -219,7 +221,7 @@ ieOptions.setEdgeChromium(true); ieOptions.setEdgePath('C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe'); ``` -* * * +--- @@ -227,7 +229,7 @@ ieOptions.setEdgePath('C:/Program Files (x86)/Microsoft/Edge/Application/msedge. Start IEDriver. IEDriver launches Microsoft Edge and then loads your web content in IE mode. -### [C#](#tab/c-sharp/) +##### [C#](#tab/c-sharp/) Start `InternetExplorerDriver` and pass it the previously defined `ieOptions`. IEDriver launches Microsoft Edge in IE mode. All page navigation and subsequent interactions occur in IE mode. @@ -235,7 +237,7 @@ Start `InternetExplorerDriver` and pass it the previously defined `ieOptions`. var driver = new InternetExplorerDriver(ieOptions); ``` -### [Python](#tab/python/) +##### [Python](#tab/python/) Start IEDriver by calling `webdriver.Ie` and passing it the previously defined `ie_options`. IEDriver launches Microsoft Edge in IE mode. All page navigation and subsequent interactions occur in IE mode. @@ -243,7 +245,7 @@ Start IEDriver by calling `webdriver.Ie` and passing it the previously defined ` driver = webdriver.Ie(options=ie_options) ``` -### [Java](#tab/java/) +##### [Java](#tab/java/) Start IEDriver by calling `new InternetExplorerDriver()` and passing it the previously defined `ieOptions`. IEDriver launches Microsoft Edge in IE mode. All page navigation and subsequent interactions occur in IE mode. @@ -251,7 +253,7 @@ Start IEDriver by calling `new InternetExplorerDriver()` and passing it the prev WebDriver driver = new InternetExplorerDriver(ieOptions); ``` -### [JavaScript](#tab/javascript) +##### [JavaScript](#tab/javascript) Start IEDriver by calling `Builder.forBrowser('ie')` and `setIeoptions(ieOptions)`. IEDriver launches Microsoft Edge in IE mode. All page navigation and subsequent interactions occur in IE mode. @@ -262,7 +264,7 @@ let driver = await new Builder(). build(); ``` -* * * +--- @@ -270,7 +272,9 @@ let driver = await new Builder(). This section covers known scenarios that previously worked with IEDriver and the IE11 desktop application but require workarounds when using IEDriver with Microsoft Edge in IE mode. -### Opening new windows + + +#### Opening a new window If your test code creates a new browser window using one of the following methods, you may need to add a short wait operation afterwards to ensure that IEDriver has detected the new window: @@ -281,7 +285,7 @@ To ensure the new window has been created successfully and IEDriver has detected The following sample demonstrates a possible way to wait for new window handles to be detected when opening new windows. -### [C#](#tab/c-sharp/) +##### [C#](#tab/c-sharp/) After the `Click` method is called on a button that opens a new window, the test code must wait until `driver.WindowHandles` contains the new window handle. @@ -295,7 +299,7 @@ while (newHandles.Count == initialHandleCount) } ``` -### [Python](#tab/python/) +##### [Python](#tab/python/) After the `click` method is called on a button that opens a new window, the test code must wait until `driver.window_handles` contains the new window handle. @@ -307,7 +311,7 @@ while len(new_handles) == initial_handle_count: new_handles = driver.window_handles ``` -### [Java](#tab/java/) +##### [Java](#tab/java/) After the `click` method is called on a button that opens a new window, the test code must wait until `driver.getWindowHandles()` contains the new window handle. @@ -320,7 +324,7 @@ while (newHandles.size() == initialHandleCount) { } ``` -### [JavaScript](#tab/javascript/) +##### [JavaScript](#tab/javascript/) After the `click` method is called on a button that opens a new window, IEDriver must wait with `await driver.getAllWindowHandles()`. @@ -334,9 +338,11 @@ while (newHandles.length == initialHandleCount) { } ``` -* * * +--- + -### Creating and switching between tabs + +#### Creating tabs and switching between tabs If your test code switches between multiple tabs in the same Microsoft Edge window, tabs that become inactive may not be included in the list of handles returned by [Get Window Handles](https://www.w3.org/TR/webdriver2/#get-window-handles). In the Internet Explorer 11 desktop application, IEDriver will return handles for all of the tabs in IE, regardless of activation state. diff --git a/microsoft-edge/webview2/concepts/basic-authentication.md b/microsoft-edge/webview2/concepts/basic-authentication.md index db3fe7c643..9880ab9f10 100644 --- a/microsoft-edge/webview2/concepts/basic-authentication.md +++ b/microsoft-edge/webview2/concepts/basic-authentication.md @@ -14,6 +14,15 @@ _Basic authentication_ is an [authentication](https://developer.mozilla.org/docs Basic authentication for WebView2 apps includes a sequence of authentication and navigation steps to retrieve a webpage from an HTTP server. The WebView2 control acts as an intermediary for communication between the host app and the HTTP server. + + ## Use HTTPS for sending credentials @@ -109,9 +118,7 @@ This example isn't realistic, because: For more realistic code, see the subsequent section. - - -# [C#](#tab/csharp) +##### [C#](#tab/csharp) ```csharp // Prerequisite: Before using this code, make sure you read the section "Use HTTPS @@ -126,13 +133,11 @@ For more realistic code, see the subsequent section. ``` **APIs:** - * [CoreWebView2.BasicAuthenticationRequested Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.basicauthenticationrequested) * [CoreWebView2BasicAuthenticationRequestedEventArgs Class](/dotnet/api/microsoft.web.webview2.core.corewebview2basicauthenticationrequestedeventargs) - -# [C++](#tab/cpp) +##### [C++](#tab/cpp) ```cpp // Prerequisite: Before using this code, make sure you read the section "Use HTTPS @@ -162,7 +167,6 @@ else ``` **APIs:** - * [ICoreWebView2BasicAuthenticationRequestedEventHandler](/microsoft-edge/webview2/reference/win32/icorewebview2basicauthenticationrequestedeventhandler) * [ICoreWebView2BasicAuthenticationRequestedEventArgs](/microsoft-edge/webview2/reference/win32/icorewebview2basicauthenticationrequestedeventargs) * `get_Cancel` @@ -184,9 +188,7 @@ This example builds upon the above sample, by adding the following features: * Displays a dialog to prompt the user for their username and password. * Calls the `GetDeferral` method on the `event` argument. - - -# [C#](#tab/csharp) +##### [C#](#tab/csharp) ```csharp // Prerequisite: Before using this code, make sure you read the section "Use HTTPS @@ -251,7 +253,6 @@ webView.CoreWebView2.BasicAuthenticationRequested += delegate ( ``` **APIs:** - * [CoreWebView2BasicAuthenticationRequestedEventArgs Class](/dotnet/api/microsoft.web.webview2.core.corewebview2basicauthenticationrequestedeventargs) * Properties: * `Cancel` @@ -261,9 +262,7 @@ webView.CoreWebView2.BasicAuthenticationRequested += delegate ( * Methods: * `GetDeferral()` - - -# [C++](#tab/cpp) +##### [C++](#tab/cpp) ```cpp // Prerequisite: Before using this code, make sure you read the section "Use HTTPS @@ -368,7 +367,6 @@ else ``` **APIs:** - * [ICoreWebView2BasicAuthenticationRequestedEventArgs](/microsoft-edge/webview2/reference/win32/icorewebview2basicauthenticationrequestedeventargs) * `get_Cancel` * `put_Cancel` @@ -394,7 +392,8 @@ As a part of navigation, the WebView2 control renders the corresponding page (th For more information, see [Navigation events for WebView2 apps](navigation-events.md). -### Navigations for basic authentication + +#### Navigations for basic authentication There are two kinds of navigations in the flow: * A "server requested authentication" navigation. @@ -420,17 +419,13 @@ Navigation `event args` has a property: the `NavigationId`. The `NavigationId` ## API Reference overview - - -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * [CoreWebView2BasicAuthenticationRequestedEventArgs Class](/dotnet/api/microsoft.web.webview2.core.corewebview2basicauthenticationrequestedeventargs) * [CoreWebView2.BasicAuthenticationRequested Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.basicauthenticationrequested) * [CoreWebView2Deferral Class](/dotnet/api/microsoft.web.webview2.core.corewebview2deferral) - - -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * [ICoreWebView2BasicAuthenticationRequestedEventArgs interface](/microsoft-edge/webview2/reference/win32/icorewebview2basicauthenticationrequestedeventargs) * [add_BasicAuthenticationRequested method](/microsoft-edge/webview2/reference/win32/icorewebview2_10#add_basicauthenticationrequested) @@ -444,12 +439,3 @@ Navigation `event args` has a property: the `NavigationId`. The `NavigationId` ## See also * [HTTP authentication](https://developer.mozilla.org/docs/Web/HTTP/Authentication) at MDN. - - diff --git a/microsoft-edge/webview2/concepts/browser-features.md b/microsoft-edge/webview2/concepts/browser-features.md index 021f83b18e..1936f3a7c2 100644 --- a/microsoft-edge/webview2/concepts/browser-features.md +++ b/microsoft-edge/webview2/concepts/browser-features.md @@ -115,14 +115,16 @@ To stay up-to-date on the latest discussion, in the WebView2Feedback repo, see [ Keyboard shortcuts or key bindings are supported in Microsoft Edge and WebView2. -### Preventing shortcuts from changing during update + +#### Preventing shortcuts from changing during update When Microsoft Edge is updated, the default key bindings might change. Furthermore, a keyboard shortcut that is turned off by default might instead be turned on, if the feature is now supported in WebView2. To avoid such changes to your keyboard shortcuts, you can set `AreBrowserAcceleratorKeysEnabled` to `FALSE`, which turns off all keys that access browser features, but keeps all basic text-editing and movement shortcuts turned on. -### Shortcuts that are turned off + +#### Shortcuts that are turned off The following shortcuts are always turned off in WebView2, or are effectively turned off. An asterisk (`*`) indicates that the shortcut isn't turned off, but the feature that it accesses is turned off, or the feature doesn't apply to WebView2. @@ -168,7 +170,8 @@ The following shortcuts are always turned off in WebView2, or are effectively tu | Show Collections `*` | **Ctrl+Shift+Y** | -### Shortcuts turned off except when event not handled + +#### Shortcuts turned off except when event not handled The following keyboard shortcuts are always turned off, except in windows that display when the `NewWindowRequested` event isn't handled: @@ -179,7 +182,8 @@ The following keyboard shortcuts are always turned off, except in windows that d | Fullscreen | **F11** | -### Shortcuts turned off if AcceleratorEnabled is False + +#### Shortcuts turned off if AcceleratorEnabled is False If you set `AreBrowserAcceleratorKeysEnabled` to `FALSE`, the following additional keyboard shortcuts are turned off: @@ -206,6 +210,7 @@ If you set `AreBrowserAcceleratorKeysEnabled` to `FALSE`, the following addition | Show Downloads | **Ctrl+J** | -### Customizing an individual key + +#### Customizing an individual key To customize any of the keys individually, use the [AcceleratorKeyPressed](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.acceleratorkeypressed?view=webview2-dotnet-1.0.774.44&preserve-view=true) event. diff --git a/microsoft-edge/webview2/concepts/enterprise.md b/microsoft-edge/webview2/concepts/enterprise.md index d67be4ae39..fd06d204a3 100644 --- a/microsoft-edge/webview2/concepts/enterprise.md +++ b/microsoft-edge/webview2/concepts/enterprise.md @@ -21,7 +21,9 @@ Feedback from IT admins and developers is welcome, through the [WebView2 Feedbac IT admins can use group policy objects (GPO) to configure policy settings for WebView2. The following policies are relevant to WebView2. -### Update policies + + +#### Update policies [Microsoft Edge - Update policies](/deployedge/microsoft-edge-update-policies) are available for IT admins to manage the installing and updating aspects of the WebView2 Runtime. The Microsoft Edge browser and WebView2 Runtime are updated using the same update mechanism. Unless a policy, such as `Update`, is channel-specific, it applies to both the browser and WebView2 Runtime. @@ -29,13 +31,17 @@ For example, `UpdateSuppressed` allows IT admins to set the time during each day IT admins can follow [Microsoft Edge's guide](/deployedge/configure-microsoft-edge) to configure Microsoft Edge - Update policies. -### Browser policies + + +#### Browser policies [Microsoft Edge - Browser policies](/deployedge/microsoft-edge-policies) doesn't apply to WebView2 applications. This is by design, because apps and browsers have different use cases, and IT admins might not be aware of what applications use WebView2. Applying browser policies on WebView2 would have unintended consequences. For example, IT admins can block JavaScript in the browser, and that would break WebView2 apps that use JavaScript. To prevent that, browser policies are separate from WebView2 policies. -### WebView2-specific policies + + +#### WebView2-specific policies [WebView2-specific policies](/deployedge/microsoft-edge-webview-policies) are available to for you to manage WebView2 directly. However, we recommend that WebView2 app developers implement their own group policies to manage the use of WebView2, because it's easier for administrators to manage the app instead of managing WebView2 directly. @@ -45,10 +51,11 @@ Applying browser policies on WebView2 would have unintended consequences. For e [Windows Server Update Services (WSUS)](/windows-server/administration/windows-server-update-services/get-started/windows-server-update-services-wsus) enables information technology administrators to deploy the latest Microsoft product updates. You can use WSUS to fully manage the distribution of updates of WebView2 that are released through Microsoft Update to computers on your network. -> [!NOTE] -> The recommended way of receiving WebView2 updates is by using the default Microsoft Edge updater. Any modification of update and servicing paths should be done with caution. +The recommended way of receiving WebView2 updates is by using the default Microsoft Edge updater. Any modification of update and servicing paths should be done with caution. + -### WebView2 Deployment and Update using WSUS + +#### WebView2 Deployment and Update using WSUS WebView2 options in Configuration Manager exist under the Microsoft Edge Management node. For more information, visit [Update Microsoft Edge](/mem/configmgr/apps/deploy-use/deploy-edge). diff --git a/microsoft-edge/webview2/concepts/threading-model.md b/microsoft-edge/webview2/concepts/threading-model.md index 8cd5b497dc..6f09e8c18d 100644 --- a/microsoft-edge/webview2/concepts/threading-model.md +++ b/microsoft-edge/webview2/concepts/threading-model.md @@ -84,7 +84,9 @@ Some WebView2 events read values that are set on the related event arguments, or For instance, you can use the `NewWindowRequested` event to provide a `CoreWebView2` to connect as a child window when the event handler completes. But if you need to asynchronously create the `CoreWebView2`, you should call the `GetDeferral` method on the `NewWindowRequestedEventArgs`. After you've asynchronously created the `CoreWebView2` and set the `NewWindow` property on the `NewWindowRequestedEventArgs`, call `Complete` on the `Deferral` object that's returned by the `GetDeferral` method. -### Deferrals in C# + + +#### Deferrals in C# When using a `Deferral` in C#, the best practice is to use it with a `using` block. The `using` block ensures that the `Deferral` is completed even if an exception is thrown in the middle of the `using` block. If instead, you have code to explicitly call `Complete`, but an exception is thrown before your `Complete` call occurs, then the deferral isn't completed until some time later, when the garbage collector eventually collects and disposes of the deferral. In the interim, the WebView2 waits for the app code to handle the event. diff --git a/microsoft-edge/webview2/concepts/user-data-folder.md b/microsoft-edge/webview2/concepts/user-data-folder.md index 6d51a0028a..e9c77d7113 100644 --- a/microsoft-edge/webview2/concepts/user-data-folder.md +++ b/microsoft-edge/webview2/concepts/user-data-folder.md @@ -28,6 +28,8 @@ WebView2 creates the UDF in the default location for the platform, or in the cus By default, WebView2 creates a UDF in the default location for the particular platform. This works well on some platforms, but not others. If your app has specific needs, you can specify a custom UDF location. + + #### Suitable custom UDF locations If you specify a custom UDF location, it should meet the following requirements: @@ -642,14 +644,16 @@ Your host app or the uninstaller can delete the user data folder (UDF). You mig * If you want to change the UDF location. If you change the UDF location, the previous UDF will not be automatically cleaned up. -### End the WebView2 session before deleting the UDF + +#### End the WebView2 session before deleting the UDF To delete a user data folder (UDF), you must first end the WebView2 session. You cannot delete a UDF if the WebView2 session is currently active. - + -### Wait for browser processes to exit before deleting the UDF + +#### Wait for browser processes to exit before deleting the UDF If files are still in use after your WebView2 host app closes, wait for browser processes to exit before deleting the user data folder (UDF). diff --git a/microsoft-edge/webview2/concepts/win32-api-conventions.md b/microsoft-edge/webview2/concepts/win32-api-conventions.md index 4f221c07d2..aca5604c49 100644 --- a/microsoft-edge/webview2/concepts/win32-api-conventions.md +++ b/microsoft-edge/webview2/concepts/win32-api-conventions.md @@ -77,7 +77,9 @@ void ScriptComponent::InjectScript() Events in the WebView2 Win32 C++ API use the `add_EventName` and `remove_EventName` method pair to subscribe and unsubscribe from events. The `add_EventName` method takes an event handler delegate interface and gives back an `EventRegistrationToken` token as an output parameter. The `remove_EventName` method takes an `EventRegistrationToken` token and unsubscribes the corresponding event subscription. -### Event handler delegate interfaces + + +#### Event handler delegate interfaces Event handler delegate interfaces work similarly to the async method completed handler delegate interfaces. You implement the event handler delegate interface and `CoreWebView2` sends a callback whenever the event runs. diff --git a/microsoft-edge/webview2/get-started/win32.md b/microsoft-edge/webview2/get-started/win32.md index e0e106e588..f066440da6 100644 --- a/microsoft-edge/webview2/get-started/win32.md +++ b/microsoft-edge/webview2/get-started/win32.md @@ -25,6 +25,7 @@ This tutorial starts by opening an existing Win32 app project that has WebView2 This tutorial does not have you create a new project; you don't use a project template in Visual Studio to create a new project. Instead, you start with the completed project that's in the repo. + #### Completed project The completed tutorial project is available in the **WebView2Samples** repo: @@ -90,7 +91,8 @@ If Visual Studio Installer prompts you to install a Workload: The Installer closes. -### Retarget Projects + +#### Retarget Projects The Visual Studio **Review Solution Actions** dialog might appear, prompting you whether you want to **Retarget Projects**: @@ -119,7 +121,8 @@ The above screenshot shows some WebView2 code (`#include "WebView2.h"`), that's -### Set the solution to use the Win10 SDK and Visual Studio toolset + +#### Set the solution to use the Win10 SDK and Visual Studio toolset This step is only needed for older versions of Visual Studio, so it's likely you can skip it. But you can take a look at this UI in any case: @@ -422,7 +425,8 @@ Now to do the above, in the callback, you'll: 1. Select **File** > **Save All** (**Ctrl+Shift+S**) to save the project. -### Build your Bing sample app + +#### Build your Bing sample app 1. Press **F5** to build and run the project. @@ -506,7 +510,8 @@ The injected JavaScript is run with specific timing: -### If code must be run in order, use callbacks + +#### If code must be run in order, use callbacks The script injection APIs (and some other WebView2 APIs) are asynchronous. So, if code must be run in a specific order, you should use callbacks. diff --git a/microsoft-edge/webview2/get-started/wpf.md b/microsoft-edge/webview2/get-started/wpf.md index f602b6f95d..4d6a7956e6 100644 --- a/microsoft-edge/webview2/get-started/wpf.md +++ b/microsoft-edge/webview2/get-started/wpf.md @@ -15,6 +15,7 @@ This article covers how to set up your development tools and create an initial W In this tutorial, you use the **WPF Application** or **WPF App (.NET Framework)** project template to create a WPF app, and then install the WebView2 SDK for the project to add WebView2. + #### Completed project A completed version of this tutorial project is available in the **WebView2Samples** repo: @@ -65,6 +66,7 @@ Start by creating a basic desktop project that contains a single main window. 1. Follow the applicable section below. + #### Creating a .NET Core/5/6 project If you are creating a .NET Core/5/6 project, do the following steps. Otherwise, skip to [Creating a WPF App (.NET Framework) project](#creating-a-wpf-app-net-framework-project). @@ -110,8 +112,9 @@ If you are creating a .NET Core/5/6 project, do the following steps. Otherwise, Skip to [Step 3 - Build and run the initial project without WebView2](#step-3---build-and-run-the-initial-project-without-webview2) below. - + #### Creating a WPF App (.NET Framework) project + If you are creating a WPF App (.NET Framework) project, do the following steps. Otherwise, skip to [Step 3 - Build and run the initial project without WebView2](#step-3---build-and-run-the-initial-project-without-webview2). @@ -376,7 +379,9 @@ During webpage navigation, the WebView2 control raises events. The app that host The above diagram shows the event sequence. Navigation events start with a new document. -### Success path + + +#### Success path A successful path includes the full sequence of events: 1. Navigation starting. @@ -388,7 +393,8 @@ A successful path includes the full sequence of events: For more information, see [Navigation events for WebView2 apps](../concepts/navigation-events.md). -### Failure path + +#### Failure path If theres a failure, the failure path proceeds directly from navigation starting, to navigation completed, skipping the intervening events. @@ -399,12 +405,14 @@ When an error occurs, the following events are raised, and may depend on navigat * `HistoryChanged` -### Redirection + +#### Redirection If an HTTP redirect occurs, there are multiple `NavigationStarting` events in a row. -### Example demonstrating navigation events + +#### Example demonstrating navigation events To demonstrate how to use the events, register a handler for `NavigationStarting` that cancels any non-HTTPS requests, as follows. diff --git a/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md b/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md index deb3f6c0ed..aecfe261e3 100644 --- a/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md +++ b/microsoft-edge/webview2/how-to/communicate-btwn-web-native.md @@ -31,7 +31,9 @@ For detailed steps about cloning the repo, see [WebView2 samples](../code-sample WebView2 controls let you exchange simple messages between web and native sides of an application. You can use data types such as `JSON` or `String` to send messages between the host application and WebView2. -### Send Messages from the host app to WebView2 + + +#### Send messages from the host app to WebView2 This example shows how the sample app changes the color of text in the front end, based on a message from the host app. @@ -124,7 +126,8 @@ To see messaging in action: That completes the example showing how WebView2 communicates through simple messages. -### Receive message strings via postMessage + +#### Receive message strings via postMessage This example follows the `Receiving Messages` section of the webpage, to change the text of the title bar. The host app receives a message from WebView2 with the new title bar text. @@ -191,7 +194,9 @@ The C++ file handles the title text and communicates it to the host app as a str }).Get(), &m_webMessageReceivedToken)); ``` -### Round-trip messages + + +#### Round-trip messages This example follows the `

    Round trip

    ` section of the WebMessage sample page, [ScenarioWebMessage.html](https://github.com/MicrosoftEdge/WebView2Samples/blob/a12bfcc2bc8a1155529c35c7bd4645036f492ca0/SampleApps/WebView2APISample/assets/ScenarioWebMessage.html). This example shows a round-trip message from WebView2 to the host app and back. The host app receives a request from WebView2 and returns the bounds of the active window. diff --git a/microsoft-edge/webview2/how-to/context-menus.md b/microsoft-edge/webview2/how-to/context-menus.md index 83b801d531..05d621476f 100644 --- a/microsoft-edge/webview2/how-to/context-menus.md +++ b/microsoft-edge/webview2/how-to/context-menus.md @@ -373,7 +373,8 @@ You can: * Add custom menu items to a default context menu, as shown below in "Adding custom menu items to a default context menu". -### Adding custom menu items to a default context menu + +#### Adding custom menu items to a default context menu To add custom menu items to the default context menu, use the following API items. @@ -726,8 +727,9 @@ When the user selects a WebView2 context menu command (a default menu item that' --- + -### Custom menu items +#### Custom menu items If your host app reports a custom menu item as the selected menu item, then the `CustomMenuItemSelected` event will be fired for the custom menu item. diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-code.md b/microsoft-edge/webview2/how-to/debug-visual-studio-code.md index 392537384f..031088ffd3 100644 --- a/microsoft-edge/webview2/how-to/debug-visual-studio-code.md +++ b/microsoft-edge/webview2/how-to/debug-visual-studio-code.md @@ -38,7 +38,9 @@ The following code demonstrates launching the app from Visual Studio Code (rathe "webRoot": "${workspaceFolder}/path/to/your/assets" ``` -### Command-line URL parameter passed in + + +#### Command-line URL parameter passed in Visual Studio Code source path mapping now requires an URL, so your app now receives a `url` command-line parameter when it starts. You can safely ignore the `url` parameter, if needed. @@ -88,7 +90,8 @@ Open `launch.json` and complete the following actions to use targeted WebView2 d When debugging your app, you might need to step through the code from the beginning of the rendering process. If you are rendering webpages on sites and you don't have access to the source code, you can use the `?=value` option, because webpages ignore unrecognized parameters. -### Cannot debug two WebView2 controls at the same time + +#### Cannot debug two WebView2 controls at the same time After the first match is found in the URL, the debugger stops. You cannot debug two WebView2 controls at the same time, because the CDP port is shared by all WebView2 controls, and uses a single port number. @@ -222,14 +225,16 @@ If you're debugging Office Add-ins, open the add-in source code in a separate in You might encounter these scenarios when using the debugger. -### Doesn't stop at breakpoint + +#### Doesn't stop at breakpoint If the debugger doesn't stop at the breakpoint, and you have debug output: To solve the issue, confirm that the file with the breakpoint is the same file that's used by the WebView2 control. The debugger doesn't perform source path mapping. -### Can't attach to running process + +#### Can't attach to running process If you can't attach to a running process, and you get a timeout error: diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio.md b/microsoft-edge/webview2/how-to/debug-visual-studio.md index 7e12fe2622..80458998be 100644 --- a/microsoft-edge/webview2/how-to/debug-visual-studio.md +++ b/microsoft-edge/webview2/how-to/debug-visual-studio.md @@ -93,7 +93,9 @@ After doing the above setup, debug your WebView2 app, as follows. ## Troubleshooting -### Virtual source path mapping not supported in Visual Studio 2019 + + +#### Virtual source path mapping not supported in Visual Studio 2019 If you use the WebView2 [SetVirtualHostNameToFolderMapping](/dotnet/api/microsoft.web.webview2.core.corewebview2.setvirtualhostnametofoldermapping) method, the debugger in Visual Studio 2019 doesn't understand the virtual source path mapping, so breakpoints don't work correctly. diff --git a/microsoft-edge/webview2/how-to/machine-setup.md b/microsoft-edge/webview2/how-to/machine-setup.md index 473289bd62..9abc39bd19 100644 --- a/microsoft-edge/webview2/how-to/machine-setup.md +++ b/microsoft-edge/webview2/how-to/machine-setup.md @@ -96,12 +96,15 @@ You can download the repo as a `.zip` file, or clone the repo. To clone the `WebView2Samples` repo (or the `WebView2Browser` repo), you must first install git. You can download the repo, as described above, or clone it. -### Install git + + +#### Install git 1. If you want to clone the `WebView2Samples` repo (instead of downloading it), and if git isn't not already installed, [download git](https://git-scm.com/downloads) and install it. -### Obtain the URL for cloning the WebView2Samples repo + +#### Obtain the URL for cloning the WebView2Samples repo 1. Open the [WebView2Samples repo](https://github.com/MicrosoftEdge/WebView2Samples) in a new window or tab. @@ -117,7 +120,8 @@ To clone the `WebView2Samples` repo (or the `WebView2Browser` repo), you must fi Next, clone the GitHub repo to your local drive. To do that, follow the appropriate steps below, for the tool you want to use. -### Cloning the repo by using Visual Studio + +#### Cloning the repo by using Visual Studio If you want to use Visual Studio to clone the GitHub repo to your local drive: @@ -132,7 +136,8 @@ If you want to use Visual Studio to clone the GitHub repo to your local drive: You've cloned the repo to your local drive. Skip to the next major section below. -### Cloning the repo by using GitHub Desktop + +#### Cloning the repo by using GitHub Desktop If you want to use GitHub Desktop to clone the GitHub repo to your local drive: @@ -149,7 +154,8 @@ If you want to use GitHub Desktop to clone the GitHub repo to your local drive: You've cloned the repo to your local drive. Skip to the next major section below. -### Cloning the repo by using Git Bash shell or a command prompt + +#### Cloning the repo by using Git Bash shell or a command prompt If you instead want to clone the repo by using a Git Bash shell or command prompt: diff --git a/microsoft-edge/webview2/how-to/publish-uwp-app-store.md b/microsoft-edge/webview2/how-to/publish-uwp-app-store.md index 9085008bbe..16ee5da163 100644 --- a/microsoft-edge/webview2/how-to/publish-uwp-app-store.md +++ b/microsoft-edge/webview2/how-to/publish-uwp-app-store.md @@ -89,34 +89,40 @@ Once you're satisfied that your packaged app works, run the Windows App Certific 1. After a few minutes, the Windows App Certification Kit (WACK) shows a results page. If the app failed, click the link to review the results. -### Resolving tests + +#### Resolving tests The results page of the Windows App Certification Kit (WACK) app shows any tests that need to be resolved. -#### Restricted name-space + +###### Restricted name-space If your app failed the **Restricted name-space** check, edit the `package.appxmanifest` file and remove the `restrictedcapabilities` line and any capabilities that use `rescap`. WebView2 shouldn't require any restricted capabilities, to operate. If your app needs restricted capabilities, you'll need to either ask for a store exception through [Partner Center](https://partner.microsoft.com), or only distribute the app through non-Store avenues. -#### Branding + +###### Branding If your app failed the **Branding** checks, update all the Visual Assets in the manifest as described above. -#### App Capabilities + +###### App Capabilities If your app failed the **App Capabilities** tests, turn off any unneeded capabilities. If you need a special use capability you will need to get Microsoft Store approval or use non-Store distribution methods. -#### General metadata correctness + +###### General metadata correctness If your app failed the **General metadata correctness** tests with an error in `IPopup4`, update the **microsoft.UI.xaml** NuGet package to version **Microsoft.UI.Xaml.2.8.0-prerelease.220118001** or higher. There was a bug in the manifests, prior to that version. -#### Supported API + +###### Supported API In this test, WACK checks the Windows APIs that your host app is calling, to make sure they're supported. diff --git a/microsoft-edge/webview2/samples/webview2browser.md b/microsoft-edge/webview2/samples/webview2browser.md index 4f8c0a8fad..8825547f07 100644 --- a/microsoft-edge/webview2/samples/webview2browser.md +++ b/microsoft-edge/webview2/samples/webview2browser.md @@ -55,6 +55,8 @@ This sample is built as a Win32 [Visual Studio 2019](https://visualstudio.micros 1. Make the changes listed below, if you're using a Windows version below Windows 10. + + #### Using versions below Windows 10 If you want to build and run the browser in versions of Windows before Windows 10, make the following changes. This is required because of how DPI is handled in Windows 10 vs previous versions of Windows. @@ -189,15 +191,14 @@ ICoreWebView2Controller API | Feature(s) ## Implementing the features -The sections below describe how some of the features in WebView2Browser were implemented. You can look at the source code for more details about how everything works here. - -**Contents:** +The sections below describe how some of the features in WebView2Browser were implemented. You can look at the source code for more details about how everything works here. Outline: -* [The basics](#the-basics) - * [Set up the environment, create a WebView](#set-up-the-environment-create-a-webview) +* [The basics](#the-basics) + * [Set up the environment, create a WebView](#set-up-the-environment-create-a-webview) * [Navigate to web page](#navigate-to-web-page) * [Updating the address bar](#updating-the-address-bar) * [Going back, going forward](#going-back-going-forward) + * [Reloading, stop navigation](#reloading-stop-navigation) * [Some interesting features](#some-interesting-features) * [Communicating the WebViews](#communicating-the-webviews) * [Tab handling](#tab-handling) @@ -209,7 +210,9 @@ The sections below describe how some of the features in WebView2Browser were imp ## The basics -### Set up the environment, create a WebView + + +#### Set up the environment, create a WebView WebView2 allows you to host web content in your Windows app. It exposes the globals [CreateCoreWebView2Environment](/microsoft-edge/webview2/reference/win32/webview2-idl#createcorewebview2environment) and [CreateCoreWebView2EnvironmentWithOptions](/microsoft-edge/webview2/reference/win32/webview2-idl#createcorewebview2environmentwithoptions) from which we can create the two separate environments for the browser's UI and content. @@ -308,6 +311,7 @@ HRESULT BrowserWindow::CreateBrowserControlsWebView() We're setting up a few things here. The [ICoreWebView2Settings](/microsoft-edge/webview2/reference/win32/icorewebview2settings) interface is used to disable DevTools in the WebView powering the browser controls. We're also adding a handler for received web messages. This handler will enable us to do something when the user interacts with the controls in this WebView. + #### Navigate to web page You can navigate to a web page by entering its URI in the address bar. When pressing Enter, the controls WebView will post a web message to the host app so it can navigate the active tab to the specified location. Code below shows how the host Win32 application will handle that message. @@ -348,6 +352,7 @@ You can navigate to a web page by entering its URI in the address bar. When pres WebView2Browser will check the URI against browser pages (i.e. favorites, settings, history) and navigate to the requested location or use the provided URI to search Bing as a fallback. + #### Updating the address bar The address bar is updated every time there is a change in the active tab's document source and along with other controls when switching tabs. Each WebView will fire an event when the state of the document changes, we can use this event to get the new source on updates and forward the change to the controls WebView (we'll also update the go back and go forward buttons). @@ -425,6 +430,7 @@ We have sent the `MG_UPDATE_URI` message along with the URI to the controls WebV ``` + #### Going back, going forward Each WebView will keep a history for the navigations it has performed so we only need to connect the browser UI with the corresponding methods. If the active tab's WebView can be navigated back/forward, the buttons will post a web message to the host application when clicked. @@ -469,6 +475,7 @@ The host application side: ``` + #### Reloading, stop navigation We use the `NavigationStarting` event fired by a content WebView to update its associated tab loading state in the controls WebView. Similarly, when a WebView fires the `NavigationCompleted` event, we use that event to instruct the controls WebView to update the tab state. The active tab state in the controls WebView will determine whether to show the reload or the cancel button. Each of those will post a message back to the host application when clicked, so that the WebView for that tab can be reloaded or have its navigation canceled, accordingly. @@ -515,6 +522,7 @@ function reloadActiveTabContent() { ## Some interesting features + #### Communicating the WebViews We need to communicate the WebViews that power the tabs and UI, so that user interactions in one tab's WebView have the desired effect in the other WebView. WebView2Browser makes use of set of very useful WebView2 APIs for this purpose, including [PostWebMessageAsJson](/microsoft-edge/webview2/reference/win32/icorewebview2#postwebmessageasjson), [add_WebMessageReceived](/microsoft-edge/webview2/reference/win32/icorewebview2#add_webmessagereceived) and [ICoreWebView2WebMessageReceivedEventHandler](/microsoft-edge/webview2/reference/win32/icorewebview2webmessagereceivedeventhandler). @@ -580,6 +588,8 @@ function reloadActiveTabContent() { } ``` + + #### Tab handling A new tab will be created whenever the user clicks on the **new tab** button to the right of the open tabs. The control's WebView will post a message to the host application to create the WebView for that tab and create an object tracking its state. @@ -732,6 +742,8 @@ HRESULT BrowserWindow::SwitchToTab(size_t tabId) } ``` + + #### Updating the security icon We use the [CallDevToolsProtocolMethod](/microsoft-edge/webview2/reference/win32/icorewebview2#calldevtoolsprotocolmethod) to enable listening for security events. Whenever a `securityStateChanged` event is fired, we will use the new state to update the security icon on the controls WebView. @@ -781,6 +793,8 @@ HRESULT BrowserWindow::HandleTabSecurityUpdate(size_t tabId, ICoreWebView2* webv break; ``` + + #### Populating the history WebView2Browser uses IndexedDB in the controls WebView to store history items, just an example of how WebView2 enables you to access standard web technologies as you would in the browser. The item for a navigation will be created as soon as the URI is updated. These items are then retrieved by the history UI in a tab making use of `window.chrome.postMessage`. From f6cb938e6d752ba6b77d464c042dca9ef1df7855 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Mon, 16 Sep 2024 09:40:56 -0700 Subject: [PATCH 3/9] linkfix --- microsoft-edge/web-platform/tracking-prevention.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/microsoft-edge/web-platform/tracking-prevention.md b/microsoft-edge/web-platform/tracking-prevention.md index bb16dd5b66..c3fc406a05 100644 --- a/microsoft-edge/web-platform/tracking-prevention.md +++ b/microsoft-edge/web-platform/tracking-prevention.md @@ -83,11 +83,14 @@ How the enforcements are applied depends on what level of tracking prevention th ## Mitigations To ensure that web compatibility is preserved as much as possible, Microsoft Edge has three mitigations to help balance enforcements in specific situations: -* [The Org Relationship mitigation](#org-relationship-mitigation) -* [The Org Engagement mitigation](#org-engagement-mitigation) +* [The Org Relationship mitigation](#the-org-relationship-mitigation) +* [The Org Engagement mitigation](#the-org-engagement-mitigation) * [The CompatExceptions list](#the-compatexceptions-list) -About the concept of an _Organization_ (_Org_): the [disconnect.me](https://disconnect.me) website maintains an [entities.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json) list that defines groups of URLs that are owned by the same parent organization/company. The tracking prevention feature in Microsoft Edge uses this list in both [The Org Relationship mitigation](#org-relationship-mitigation) and [The Org Engagement mitigation](#org-engagement-mitigation), to minimize the occurrence of compatibility issues caused by tracking prevention affecting cross-organizational requests. + +#### The concept of an _Organization_ (_Org_) + +The [disconnect.me](https://disconnect.me) website maintains an [entities.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/entities.json) list that defines groups of URLs that are owned by the same parent organization/company. The tracking prevention feature in Microsoft Edge uses the `entities.json` list in both the Org Relationship mitigation and the Org Engagement mitigation, to minimize the occurrence of compatibility issues caused by tracking prevention affecting cross-organizational requests. From e2cb4ce1fa1d2f434679046fb4f430464bb521f3 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Mon, 16 Sep 2024 10:41:00 -0700 Subject: [PATCH 4/9] change h5 to h6, change tab h1 to h5 --- .../accessibility/navigation.md | 14 +++---- .../devtools-guide-chromium/console/api.md | 26 ++++++------ .../console/console-debug-javascript.md | 4 +- .../publish/create-dev-account.md | 8 +++- .../publish/verify-microsoft-edge-program.md | 18 +++++++-- .../web-platform/tracking-prevention.md | 4 +- microsoft-edge/webdriver-chromium/index.md | 32 +++++++-------- .../webview2/concepts/clear-browsing-data.md | 20 +++++----- .../webview2/concepts/process-model.md | 4 +- .../webview2/concepts/user-data-folder.md | 30 +++++++------- .../concepts/working-with-local-content.md | 21 ++++++++++ .../webview2/how-to/context-menus.md | 40 +++++++++---------- .../webview2/how-to/winrt-from-js.md | 11 +++++ 13 files changed, 140 insertions(+), 92 deletions(-) diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md index bb14d2a1de..e5a4708ede 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md @@ -208,7 +208,7 @@ You might find it faster to use the [Inspect](#inspect-an-element-on-the-page) w -##### Navigate the Styles pane +###### Navigate the Styles pane Because all of the style tools connect in one way or another back to the **Styles** pane, it makes sense to become an expert in this tool first. @@ -232,7 +232,7 @@ Known issues: -##### Toggle element state +###### Toggle element state To toggle the state of an element, such as `:active` or `:focus`: @@ -248,7 +248,7 @@ To toggle the state of an element, such as `:active` or `:focus`: -##### Add an existing class +###### Add an existing class The **Element Classes** button is next to the **Toggle Element State** button. To move the focus to the **Element Classes** button, press **Tab**, and then press **Enter**. Focus moves into an edit text field labeled **Add new class**. @@ -256,7 +256,7 @@ The **Element Classes** button is primarily used for adding existing classes to -##### Add a new style rule +###### Add a new style rule Adjacent to the **Element Classes** button is the **New Style Rule** button. To move the focus to it, press **Tab** and then press **Enter**. Focus moves into an editable text field inside of the style inspector. The initial text content of the field is the tag name of the element that is selected in the **DOM Tree**. You can type any class name you want into this field and then press **Tab** to assign CSS properties to it. @@ -270,7 +270,7 @@ With focus on the **Computed** tab, press **Tab** to move focus inside and explo -##### Explore all computed styles +###### Explore all computed styles Press **Tab** until you reach the collection of computed styles. Computed styles are presented as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree). Expanding a listbox reveals which CSS selectors are applying the computed style. These selectors are organized by specificity. A screen reader announces the computed value, which CSS selector is currently matching, the file name of the stylesheet that contains the selector, and the line number for the selector. @@ -288,7 +288,7 @@ When focus is on the **Styles** tab, press **Right Arrow** to navigate to the ** -##### Explore event listeners +###### Explore event listeners Event listeners are presented as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree). You can use the arrow keys to navigate them. A screen reader announces the name of the DOM object that the event listener is attached to, as well as the file name where the event listener is defined and the line number. @@ -302,7 +302,7 @@ The **Accessibility** tab is near the **Styles** tab. On the Accessibility tab, -##### Accessibility Tree +###### Accessibility Tree The **Accessibility Tree** is presented as an [ARIA tree](https://www.w3.org/TR/wai-aria-1.1/#tree) where each `treeitem` corresponds to an element in the DOM. The tree announces the computed role for the selected node. Generic elements like `div` and `span` are announced as "GenericContainer" in the tree. Use the arrow keys to traverse the tree and explore parent-child relationships. diff --git a/microsoft-edge/devtools-guide-chromium/console/api.md b/microsoft-edge/devtools-guide-chromium/console/api.md index 6cd6a19fda..ad131650c4 100644 --- a/microsoft-edge/devtools-guide-chromium/console/api.md +++ b/microsoft-edge/devtools-guide-chromium/console/api.md @@ -66,7 +66,7 @@ console.assert(x < y, {x, y, reason}); -##### Output +###### Output ![The result of the console.assert() example](./api-images/console-demo-assert-button.png) @@ -121,7 +121,7 @@ console.count(); -##### Output +###### Output ![The result of the console.count() example](./api-images/console-demo-count-button.png) @@ -174,7 +174,7 @@ console.debug('debug'); -##### Output +###### Output ![The result of the console.debug() example](./api-images/console-demo-debug-button.png) @@ -204,7 +204,7 @@ console.dir(document.head); -##### Output +###### Output ![The result of the console.dir() example](./api-images/console-demo-dir-button.png) @@ -234,7 +234,7 @@ console.dirxml(document); -##### Output +###### Output ![The result of the console.dirxml() example](./api-images/console-demo-dirxml-button.png) @@ -264,7 +264,7 @@ console.error("I'm sorry, Dave. I'm afraid I can't do that."); -##### Output +###### Output ![The result of the console.error() example](./api-images/console-demo-error-button.png) @@ -298,7 +298,7 @@ console.groupEnd(label); -##### Output +###### Output ![The result of the console.group() example](./api-images/console-demo-group-button.png) @@ -356,7 +356,7 @@ console.info('info'); -##### Output +###### Output ![The result of the console.info() example](./api-images/console-demo-info-button.png) @@ -386,7 +386,7 @@ console.log('log'); -##### Output +###### Output ![The result of the console.log() example](./api-images/console-demo-log-button.png) @@ -430,7 +430,7 @@ console.table([ -##### Output +###### Output ![The result of the console.table() example](./api-images/console-demo-table-button.png) @@ -462,7 +462,7 @@ console.timeEnd(); -##### Output +###### Output ![The result of the console.time() example](./api-images/console-demo-time-button.png) @@ -512,7 +512,7 @@ first(); -##### Output +###### Output ![The result of the console.trace() example](./api-images/console-demo-trace-button.png) @@ -542,7 +542,7 @@ console.warn('warn'); -##### Output +###### Output ![The result of the console.warn() example](./api-images/console-demo-warn-button.png) diff --git a/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md b/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md index 6ecca3b3ac..544fb0b462 100644 --- a/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md +++ b/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md @@ -102,7 +102,7 @@ Next, we'll look at the resulting page when there are no errors in the **Console -##### Demo page: Fixed network error reported in Console +###### Demo page: Fixed network error reported in Console 1. Open the demo webpage [Fixed network error reported in Console](https://microsoftedge.github.io/Demos/devtools-console/network-error-fixed.html) in a new window or tab. @@ -112,7 +112,7 @@ Next, we'll look at the resulting page when there are no errors in the **Console -##### Demo page: Network error reporting in Console and UI +###### Demo page: Network error reporting in Console and UI Use defensive coding techniques to avoid the previous user experiences. Make sure your code catches errors and displays each error in the **Console**, as follows: diff --git a/microsoft-edge/extensions-chromium/publish/create-dev-account.md b/microsoft-edge/extensions-chromium/publish/create-dev-account.md index 17fbf483e6..8fce7e858b 100644 --- a/microsoft-edge/extensions-chromium/publish/create-dev-account.md +++ b/microsoft-edge/extensions-chromium/publish/create-dev-account.md @@ -94,11 +94,15 @@ The Microsoft Edge program in [Partner Center](https://partner.microsoft.com/das > [!IMPORTANT] > After enrollment, you aren't able to change the value of this field. -##### Individual account + + +###### Individual account An individual account is appropriate for a developer not associated with a company. The account verification process is shorter and involves verifying that the publisher display name is available. -##### Company account + + +###### Company account A company account is associated with an organization or business. The account verification process is longer and involves confirmation that you're authorized to create the account for your company. The duration of the process can range from a few days to a few weeks. Your company might receive phone calls from Microsoft verification partners. diff --git a/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md index 773c7259cc..b944098605 100644 --- a/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md +++ b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md @@ -26,6 +26,8 @@ Verification usually takes three to five business days. If more than five days This section describes the types of verification, what is verified, and suggestions for meeting verification requirements. + + #### Verify Email ownership Email ownership verifies that the primary contact (primary email) address is valid. @@ -34,12 +36,16 @@ Email ownership verifies that the primary contact (primary email) address is val * Don't use a personal email address. You must use an email address associated with a company domain, such as \@contoso.com. * Don't use a tenant user credential that's not associated with email, such as \@contoso on microsoft.com. -##### Suggestions + + +###### Suggestions Be sure to flag email from Microsoft.com as a **safe** domain, and check your junk email folders. If you don't receive the email ownership verification email message within one business day, you can ask us to send the email again. On to your Partner Center account, go to **Home > Account settings**. On the **Account settings | My profile** page, select **Resend verification email**. + + #### Verify Employment Employment verification confirms that your primary contact is an employee of the enrolling company and that the domain entered in the registration form belongs to the enrolling company. The following information is used to verify employment: @@ -47,7 +53,9 @@ Employment verification confirms that your primary contact is an employee of the * The company's public website has the same domain that was entered in the registration form. * The contact has an active email address on an email domain owned by the company. -##### Suggestions + + +###### Suggestions For verification proof, you can submit a screenshot of the website showing the name, address, contact information, and domain of the organization. @@ -57,11 +65,15 @@ If employment verification is rejected, or if the domain of the registered email * Domain ownership records, such as [whois](https://www.whois.com/whois). * Domain purchase invoices or registry confirmation records. + + #### Verify Business Business verification confirms that the enrolling company is a legitimate business entity and at the address in the application. -##### Suggestions + + +###### Suggestions Submit one of the following documents for business verification: diff --git a/microsoft-edge/web-platform/tracking-prevention.md b/microsoft-edge/web-platform/tracking-prevention.md index c3fc406a05..38434324f7 100644 --- a/microsoft-edge/web-platform/tracking-prevention.md +++ b/microsoft-edge/web-platform/tracking-prevention.md @@ -112,7 +112,7 @@ Even though this relaxes tracking prevention enforcements for sites that belong The Org Engagement mitigation was created to minimize compatibility risks introduced by tracking prevention by ensuring that sites owned by organizations that users sufficiently engage with continue to work as expected across the web. It makes use of the [Site Engagement](https://www.chromium.org/developers/design-documents/site-engagement) Service to relax enforcements whenever a user has established an ongoing relationship (currently defined by a site engagement score of 4.1 or greater) with a given site. -The org engagement mitigation is currently only applied in Balanced mode, so that Microsoft Edge is offering the highest possible protections for users who have opted into Strict. +The Org Engagement mitigation is currently only applied in Balanced mode, so that Microsoft Edge is offering the highest possible protections for users who have opted into Strict. @@ -154,7 +154,7 @@ The following are the enforcement actions and mitigations that are applied to ea * `B` indicates that both storage access and resource loads (such as network requests) are blocked. * A hyphen (`-`) indicates that no block is applied to either storage access or resource loads. -The org engagement mitigation doesn't apply to the Cryptomining or Fingerprinting categories. +The Org Engagement mitigation doesn't apply to the Cryptomining or Fingerprinting categories. Strict mode blocks more resource loads than Balanced. The blocking of more resource loads may result in Strict mode appearing to block less tracking requests than Balanced since the trackers making the requests are never loaded. diff --git a/microsoft-edge/webdriver-chromium/index.md b/microsoft-edge/webdriver-chromium/index.md index bea79ceba5..50741a5dcd 100644 --- a/microsoft-edge/webdriver-chromium/index.md +++ b/microsoft-edge/webdriver-chromium/index.md @@ -111,7 +111,7 @@ Selenium uses the `EdgeDriver` class to manage a Microsoft Edge session. The fo To get started automating Microsoft Edge with WebDriver, copy and paste the code snippet for your preferred language: -# [C#](#tab/c-sharp) +##### [C#](#tab/c-sharp) ```csharp using OpenQA.Selenium; @@ -144,7 +144,7 @@ namespace EdgeDriverSample } ``` -# [Python](#tab/python) +##### [Python](#tab/python) ```python from selenium import webdriver @@ -163,7 +163,7 @@ time.sleep(5) driver.quit() ``` -# [Java](#tab/java) +##### [Java](#tab/java) ```java import org.openqa.selenium.By; @@ -188,7 +188,7 @@ public class EdgeDriverSample { } ``` -# [JavaScript](#tab/javascript) +##### [JavaScript](#tab/javascript) ```javascript const { Builder, By } = require('selenium-webdriver'); @@ -223,7 +223,7 @@ You can also use `EdgeDriverService` to configure command-line options for the M The following snippet creates a new `EdgeDriverService` and enables verbose log output: -# [C#](#tab/c-sharp) +##### [C#](#tab/c-sharp) ```csharp var service = EdgeDriverService.CreateDefaultService(); @@ -232,7 +232,7 @@ service.UseVerboseLogging = true; var driver = new EdgeDriver(service); ``` -# [Python](#tab/python) +##### [Python](#tab/python) ```python from selenium import webdriver @@ -243,7 +243,7 @@ service = Service(verbose = True) driver = webdriver.Edge(service = service) ``` -# [Java](#tab/java) +##### [Java](#tab/java) ```java System.setProperty("webdriver.edge.verboseLogging", "true"); @@ -252,7 +252,7 @@ EdgeDriverService service = EdgeDriverService.createDefaultService(); EdgeDriver driver = new EdgeDriver(service); ``` -# [JavaScript](#tab/javascript) +##### [JavaScript](#tab/javascript) ```javascript const edge = require('selenium-webdriver/edge'); @@ -275,7 +275,7 @@ You can pass an `EdgeOptions` object to the `EdgeDriver` constructor to configur You can start a WebDriver session with specific Microsoft Edge binaries. For example, you can run tests using the [Microsoft Edge preview channels](https://www.microsoft.com/edge/download/insider), such as Microsoft Edge Beta, Dev, or Canary. -# [C#](#tab/c-sharp) +##### [C#](#tab/c-sharp) ```csharp var options = new EdgeOptions(); @@ -284,7 +284,7 @@ options.BinaryLocation = @"C:\Program Files (x86)\Microsoft\Edge Beta\Applicatio var driver = new EdgeDriver(options); ``` -# [Python](#tab/python) +##### [Python](#tab/python) ```python from selenium import webdriver @@ -296,7 +296,7 @@ options.binary_location = r"C:\Program Files (x86)\Microsoft\Edge Beta\Applicati driver = webdriver.Edge(options = options) ``` -# [Java](#tab/java) +##### [Java](#tab/java) ```java EdgeOptions options = new EdgeOptions(); @@ -305,7 +305,7 @@ options.setBinary("C:\\Program Files (x86)\\Microsoft\\Edge Beta\\Application\\m EdgeDriver driver = new EdgeDriver(options); ``` -# [JavaScript](#tab/javascript) +##### [JavaScript](#tab/javascript) ```javascript const edge = require('selenium-webdriver/edge'); @@ -322,7 +322,7 @@ let driver = edge.Driver.createSession(options); You can use `EdgeOptions` to configure command-line arguments that will be passed to the Microsoft Edge browser process when a session is created. For example, you can configure the browser to run in headless mode. -# [C#](#tab/c-sharp) +##### [C#](#tab/c-sharp) ```csharp var options = new EdgeOptions(); @@ -331,7 +331,7 @@ options.AddArgument("headless"); var driver = new EdgeDriver(options); ``` -# [Python](#tab/python) +##### [Python](#tab/python) ```python from selenium import webdriver @@ -343,7 +343,7 @@ options.add_argument("headless") driver = webdriver.Edge(options = options) ``` -# [Java](#tab/java) +##### [Java](#tab/java) ```java EdgeOptions options = new EdgeOptions(); @@ -352,7 +352,7 @@ options.addArguments("headless"); EdgeDriver driver = new EdgeDriver(options); ``` -# [JavaScript](#tab/javascript) +##### [JavaScript](#tab/javascript) ```javascript const edge = require('selenium-webdriver/edge'); diff --git a/microsoft-edge/webview2/concepts/clear-browsing-data.md b/microsoft-edge/webview2/concepts/clear-browsing-data.md index 0944b01f9f..797e1e3d8f 100644 --- a/microsoft-edge/webview2/concepts/clear-browsing-data.md +++ b/microsoft-edge/webview2/concepts/clear-browsing-data.md @@ -28,14 +28,14 @@ This method clears all the kinds of browsing data that are listed in the data ki -# [C#](#tab/csharp) +##### [C#](#tab/csharp) [CoreWebView2Profile.ClearBrowsingDataAsync() Method](/dotnet/api/microsoft.web.webview2.core.corewebview2profile.clearbrowsingdataasync#microsoft-web-webview2-core-corewebview2profile-clearbrowsingdataasync) -# [C++](#tab/cpp) +##### [C++](#tab/cpp) [ICoreWebView2Profile::ClearBrowsingDataAll() method](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile4#clearbrowsingdataall) @@ -53,7 +53,7 @@ This method clears the specified kinds of browsing data, regardless of when the -# [C#](#tab/csharp) +##### [C#](#tab/csharp) [CoreWebView2Profile.ClearBrowsingDataAsync(dataKinds) Method](/dotnet/api/microsoft.web.webview2.core.corewebview2profile.clearbrowsingdataasync#microsoft-web-webview2-core-corewebview2profile-clearbrowsingdataasync(microsoft-web-webview2-core-corewebview2browsingdatakinds)) @@ -62,7 +62,7 @@ This method clears the specified kinds of browsing data, regardless of when the -# [C++](#tab/cpp) +##### [C++](#tab/cpp) [ICoreWebView2Profile::ClearBrowsingData(dataKinds) method](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile4#clearbrowsingdata) @@ -81,7 +81,7 @@ This method clears the specified kinds of browsing data that was created between -# [C#](#tab/csharp) +##### [C#](#tab/csharp) [CoreWebView2Profile.ClearBrowsingDataAsync(dataKinds, startTime, endTime) Method](/dotnet/api/microsoft.web.webview2.core.corewebview2profile.clearbrowsingdataasync#microsoft-web-webview2-core-corewebview2profile-clearbrowsingdataasync(microsoft-web-webview2-core-corewebview2browsingdatakinds-system-datetime-system-datetime)) @@ -90,7 +90,7 @@ This method clears the specified kinds of browsing data that was created between -# [C++](#tab/cpp) +##### [C++](#tab/cpp) [ICoreWebView2Profile::ClearBrowsingDataInTimeRange(dataKinds, startTime, endTime) method](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile4#clearbrowsingdataintimerange) @@ -115,7 +115,7 @@ The following parameter values are passed to the Clear Browsing Data API method: -# [C#](#tab/csharp) +##### [C#](#tab/csharp) ```csharp // Clears autofill data. @@ -147,7 +147,7 @@ private void ClearAutofillData() -# [C++](#tab/cpp) +##### [C++](#tab/cpp) ```cpp // Clears the autofill data from the last hour. @@ -200,7 +200,7 @@ void ClearAutofillData() -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * [CoreWebView2.Profile Property](/dotnet/api/microsoft.web.webview2.core.corewebview2.profile) * [CoreWebView2Profile Class](/dotnet/api/microsoft.web.webview2.core.corewebview2profile) @@ -212,7 +212,7 @@ void ClearAutofillData() -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * [ICoreWebView2Profile::ClearBrowsingDataAll() method](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile4#clearbrowsingdataall) * [ICoreWebView2Profile::ClearBrowsingData(dataKinds) method](/microsoft-edge/webview2/reference/win32/icorewebview2experimentalprofile4#clearbrowsingdata) diff --git a/microsoft-edge/webview2/concepts/process-model.md b/microsoft-edge/webview2/concepts/process-model.md index 824406cd5d..6357de5ecc 100644 --- a/microsoft-edge/webview2/concepts/process-model.md +++ b/microsoft-edge/webview2/concepts/process-model.md @@ -72,14 +72,14 @@ To open the **Browser Task Manager**, call the `OpenTaskManagerWindow` method. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) [OpenTaskManagerWindow](/dotnet/api/microsoft.web.webview2.core.corewebview2.opentaskmanagerwindow#microsoft-web-webview2-core-corewebview2-opentaskmanagerwindow) -# [C++](#tab/cpp) +##### [C++](#tab/cpp) [OpenTaskManagerWindow](/microsoft-edge/webview2/reference/win32/icorewebview2_6#opentaskmanagerwindow) diff --git a/microsoft-edge/webview2/concepts/user-data-folder.md b/microsoft-edge/webview2/concepts/user-data-folder.md index e9c77d7113..2e7d08b1c2 100644 --- a/microsoft-edge/webview2/concepts/user-data-folder.md +++ b/microsoft-edge/webview2/concepts/user-data-folder.md @@ -108,7 +108,7 @@ The default user data folder (UDF) location varies per platform. -# [Win32](#tab/win32) +##### [Win32](#tab/win32) -# [.NET (WPF/WinForms)](#tab/dotnet) +##### [.NET (WPF/WinForms)](#tab/dotnet) -# [ClickOnce](#tab/clickonce) +##### [ClickOnce](#tab/clickonce) -# [WinUI 2 (UWP)](#tab/uwp) +##### [WinUI 2 (UWP)](#tab/uwp) -# [WinUI 3](#tab/winui3) +##### [WinUI 3](#tab/winui3) -# [Win32](#tab/win32) +##### [Win32](#tab/win32) -# [.NET (WPF/WinForms)](#tab/dotnet) +##### [.NET (WPF/WinForms)](#tab/dotnet) -# [ClickOnce](#tab/clickonce) +##### [ClickOnce](#tab/clickonce) -# [WinUI 2 (UWP)](#tab/uwp) +##### [WinUI 2 (UWP)](#tab/uwp) -# [WinUI 3](#tab/winui3) +##### [WinUI 3](#tab/winui3) -# [Win32](#tab/win32) +##### [Win32](#tab/win32) Use the Win32 [ICoreWebView2Environment7.get_UserDataFolder property getter](/microsoft-edge/webview2/reference/win32/icorewebview2environment7#get_userdatafolder). That API Reference page contains example code showing how to read the `UserDataFolder` property. @@ -466,7 +466,7 @@ For examples of reading the `UserDataFolder` property, see the Win32 samples in -# [.NET (WPF/WinForms)](#tab/dotnet) +##### [.NET (WPF/WinForms)](#tab/dotnet) @@ -485,7 +485,7 @@ For examples of reading the `UserDataFolder` property, see the .NET (WPF/WinForm -# [ClickOnce](#tab/clickonce) +##### [ClickOnce](#tab/clickonce) Use the .NET [CoreWebView2Environment.UserDataFolder Property](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.userdatafolder). @@ -502,7 +502,7 @@ For examples of reading the `UserDataFolder` property, see [WebView2Samples repo -# [WinUI 2 (UWP)](#tab/uwp) +##### [WinUI 2 (UWP)](#tab/uwp) Use the WinRT [CoreWebView2Environment.UserDataFolder Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2environment#userdatafolder). @@ -523,7 +523,7 @@ For examples of reading the `UserDataFolder` property, see the WinUI 2 (UWP) sam -# [WinUI 3](#tab/winui3) +##### [WinUI 3](#tab/winui3) Use the .NET [CoreWebView2Environment.UserDataFolder Property](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.userdatafolder). diff --git a/microsoft-edge/webview2/concepts/working-with-local-content.md b/microsoft-edge/webview2/concepts/working-with-local-content.md index 9aea25725c..f42cad42a9 100644 --- a/microsoft-edge/webview2/concepts/working-with-local-content.md +++ b/microsoft-edge/webview2/concepts/working-with-local-content.md @@ -62,31 +62,37 @@ file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html ``` + ###### Cross-origin resources When specifying a file URL, the app navigates to a file on disk, not to a domain on the network. As a result, it's not possible to use cross-origin resources in the resulting document. + ###### Origin-based DOM APIs A document loaded via a file URL has an origin that is unique to its file path, just like in the browser. Web APIs that require an origin such as `localStorage` or `indexedDB` will work. However, different documents loaded from different file URLs are not considered to be from the same origin, and will not have access to the same stored data. + ###### DOM APIs requiring secure context Some web APIs are limited to secure HTTPS URLs only and are not available to documents loaded by file URLs. This includes APIs such as `navigator.mediaDevices.getUserMedia()` to acquire video or sound, `navigator.geolocation.getCurrentPosition()` to access the device's location, or `Notification.requestPermission()` to request the user's permission to display notifications. See [Secure contexts](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts) on MDN for more information. + ###### Dynamic content When loading a document via a file URL, the document's content comes from a static files on disk. This means that it's not possible to dynamically modify this local content. This is different from loading documents from a web server, where each response can be dynamically generated. + ###### Additional web resources Relative URL resolution also work for documents loaded via a file URL. This means that the loaded document can have references to additional web resources such as CSS, script, or image files which are also served via file URLs. + ###### Additional web resources resolved in WebView2 process File URLs are resolved in WebView2 processes. This is a faster option than `WebResourceRequested`, which resolves in the host app process UI thread. @@ -194,26 +200,31 @@ Another scenario where navigating to a string might be useful is if you want to The HTML content string that's passed into the `NavigateToString` method has a size limit of 2MB. This size limit may be easy to exceed, when the string includes inlined additional resources. If this size limit is exceeded, an error is returned: "Value does not fall within the expected range". + ###### Origin-based DOM APIs A document loaded by using the `NavigateToString` method has its location set to `about:blank` and its origin set to `null`. This means that web APIs that depend on an origin being defined, such as `localStorage` or `indexedDB`, can't be used. + ###### DOM APIs requiring secure context Some web APIs are limited to secure HTTPS URLs only and are not available to documents loaded via the `NavigateToString` method because their location is set to `about:blank`. This includes APIs such as `navigator.mediaDevices.getUserMedia()` to acquire video or sound, `navigator.geolocation.getCurrentPosition()` to access the device's location, or `Notification.requestPermission()` to request the user's permission to display notifications. See [Secure contexts](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts) on MDN for more information. + ###### Dynamic content When loading local content via the `NavigateToString` method, you're directly providing the content as a parameter to the method. This means you are in control of the content at runtime, and you can dynamically generate it if needed. + ###### Additional web resources Loading local content by using the `NavigateToString` method doesn't make it possible for the resulting document to reference additional web resources such as CSS, image, or script files. The method only lets you specify the string content of the HTML document. To reference additional web resources from your HTML document, use one of the other approaches described in this article, or represent those additional web resources inline in the HTML document. + ###### Additional web resources resolved in WebView2 process `NavigateToString` does not support additional web resources, as mentioned above. @@ -321,26 +332,31 @@ Due to a current limitation, media files that are accessed using a virtual host #### Considerations for loading local content by using virtual host name mapping + ###### Origin-based DOM APIs Local content loaded via virtual host name mapping results in a document that has an HTTP or HTTPS URL and a corresponding origin. This means that web APIs that require an origin such as `localStorage` or `indexedDB` will work, and other documents that belong to the same origin will be able to use the stored data. For more information, see [Same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy) on MDN. + ###### DOM APIs requiring secure context Some web APIs are limited to secure HTTPS URLs only. Using virtual host name mapping provides an HTTPS URL for your local content. This means that APIs such as `navigator.mediaDevices.getUserMedia()` to acquire video or sound, `navigator.geolocation.getCurrentPosition()` to access the device's location, or `Notification.requestPermission()` to request the user's permission to display notifications are available. See [Secure contexts](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts) on MDN for more information. + ###### Dynamic content When loading local content via a virtual host name mapping, you are mapping a virtual host name to a local folder that contains static files on disk. This means that it's not possible to dynamically modify this local content. This is different from loading documents from a web server, where each response can be dynamically generated. + ###### Additional web resources Local content that's loaded via virtual host name mapping has an HTTP or HTTPS URL which supports relative URL resolution. This means that the loaded document can have references to additional web resources such as CSS, script, or image files which are also served via virtual host name mapping. + ###### Additional web resources resolved in WebView2 process Virtual host name URLs are resolved in WebView2 processes. This is a faster option than `WebResourceRequested`, which resolves in the host app process UI thread. @@ -425,26 +441,31 @@ If you want to use a custom scheme to make the Web Resource Request that generat #### Considerations for loading local content by handling the WebResourceRequested event + ###### Origin-based DOM APIs Local content loaded via `WebResourceRequested` results in a document that has an HTTP or HTTPS URL and a corresponding origin. This means that web APIs that require an origin such as `localStorage` or `indexedDB` will work, and other documents that belong to the same origin will be able to use the stored data. For more information, see [Same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy) on MDN. + ###### DOM APIs requiring secure context Some web APIs are limited to secure HTTPS URLs only. Using `WebResourceRequested` allows you to replace HTTPS URL web resource requests with your own local content. This means that APIs such as `navigator.mediaDevices.getUserMedia()` to acquire video or sound, `navigator.geolocation.getCurrentPosition()` to access the device's location, or `Notification.requestPermission()` to request the user's permission to display notifications are available. See [Secure contexts](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts) on MDN for more information. + ###### Dynamic content When loading local content via `WebResourceRequested`, you specify the local content to load in your event handler. This means you are in control of the content at runtime, and you can dynamically generate it if needed. + ###### Additional web resources `WebResourceRequested` modifies the content that's loaded via HTTP or HTTPS URLs, which support relative URL resolution. This means that the resulting document can have references to additional web resources such as CSS, script, or image files that are also served via `WebResourceRequested`. + ###### Additional web resources resolved in WebView2 process When loading content via a file URL or a virtual host name mapping, the resolution happens in the WebView2 processes. However, the `WebResourceRequested` event is raised on the WebView2 UI thread of your host app process, which may lead to slower loading of the resulting document. diff --git a/microsoft-edge/webview2/how-to/context-menus.md b/microsoft-edge/webview2/how-to/context-menus.md index 05d621476f..642fce52c3 100644 --- a/microsoft-edge/webview2/how-to/context-menus.md +++ b/microsoft-edge/webview2/how-to/context-menus.md @@ -46,7 +46,7 @@ When the user selects a command from your custom context menu, your app needs to You can add default menu items and/or custom menu items to a custom context menu. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) To display a custom context menu that contains your desired menu items, use the data provided in the `CoreWebView2ContextMenuRequestedEventArgs` of the `CoreWebView2` [ContextMenuRequested Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.contextmenurequested). For this case, you specify `Handled` to be `true`, and request a deferral. @@ -89,7 +89,7 @@ The `MenuItems` property of `CoreWebView2ContextMenuRequestedEventArgs` provides * `Submenu` -# [C++](#tab/cpp) +##### [C++](#tab/cpp) To display a custom context menu that contains your desired menu items, use the data provided in [ICoreWebView2ContextMenuRequestedEventArgs](/microsoft-edge/webview2/reference/win32/icorewebview2contextmenurequestedeventargs). For this case, you specify `Handled` to be `true`, and request a deferral. @@ -140,7 +140,7 @@ Iterate through a list of `ICoreWebView2ContextMenuItem` items, adding an `ICore The following sample presents the WebView2 context menu in the Win32/WPF context menu format. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) ```csharp webView.CoreWebView2.ContextMenuRequested += delegate (object sender, @@ -195,7 +195,7 @@ IList menuList, ItemsControl cm) } ``` -# [C++](#tab/cpp) +##### [C++](#tab/cpp) ```cpp m_webView2_4 = m_webView.try_query(); @@ -379,7 +379,7 @@ You can: To add custom menu items to the default context menu, use the following API items. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * **[CoreWebView2 Class](/dotnet/api/microsoft.web.webview2.core.corewebview2)** * [ContextMenuRequested Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.contextmenurequested) @@ -401,7 +401,7 @@ To add custom menu items to the default context menu, use the following API item * [CreateContextMenuItem Method](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.createcontextmenuitem) -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * **[ICoreWebView2_11](/microsoft-edge/webview2/reference/win32/icorewebview2_11)** * [add_ContextMenuRequested](/microsoft-edge/webview2/reference/win32/icorewebview2_11#add_contextmenurequested) @@ -432,7 +432,7 @@ To add custom menu items to the default context menu, use the following API item The following example adds a **Display Page Uri** command to the WebView2 context menu. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) ```csharp webView.CoreWebView2.ContextMenuRequested += delegate (object sender, @@ -455,7 +455,7 @@ webView.CoreWebView2.ContextMenuRequested += delegate (object sender, ``` -# [C++](#tab/cpp) +##### [C++](#tab/cpp) ```cpp m_webView2_4 = m_webView.try_query(); @@ -513,7 +513,7 @@ webview2_4->add_ContextMenuRequested( You can remove default or custom menu items from the default context menu. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * **[CoreWebView2ContextMenuItem Class](/dotnet/api/microsoft.web.webview2.core.corewebview2contextmenuitem)** * [Name Property](/dotnet/api/microsoft.web.webview2.core.corewebview2contextmenuitem.name) @@ -528,7 +528,7 @@ You can remove default or custom menu items from the default context menu. * `Image` -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * [COREWEBVIEW2_CONTEXT_MENU_TARGET_KIND enum](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_context_menu_target_kind) * `COREWEBVIEW2_CONTEXT_MENU_TARGET_KIND_IMAGE` @@ -562,7 +562,7 @@ You can remove default or custom menu items from the default context menu. The following example removes the **Save image as** command from the WebView2 context menu. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) ```csharp webView.CoreWebView2.ContextMenuRequested += delegate (object sender, @@ -585,7 +585,7 @@ webView.CoreWebView2.ContextMenuRequested += delegate (object sender, ``` -# [C++](#tab/cpp) +##### [C++](#tab/cpp) ```cpp m_webView2_4 = m_webView.try_query(); @@ -662,7 +662,7 @@ When the user selects a custom menu item on a context menu, the WebView2 control When your host app indicates to WebView2 that a user selected a menu item on a context menu, WebView2 then runs the selected command. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * **[CoreWebView2 Class](/dotnet/api/microsoft.web.webview2.core.corewebview2)** * [ContextMenuRequested Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.contextmenurequested) @@ -671,7 +671,7 @@ When your host app indicates to WebView2 that a user selected a menu item on a c * [AreDefaultContextMenusEnabled Property](/dotnet/api/microsoft.web.webview2.core.corewebview2settings.aredefaultcontextmenusenabled) -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * **[ICoreWebView2_11](/microsoft-edge/webview2/reference/win32/icorewebview2_11)** * [add_ContextMenuRequested](/microsoft-edge/webview2/reference/win32/icorewebview2_11#add_contextmenurequested) @@ -706,7 +706,7 @@ If the user selects a custom menu item, the `CustomMenuItemSelected` event is ra When the user selects a WebView2 context menu command (a default menu item that's in a custom context menu), the host app can optionally report that selection to WebView2 so that WebView2 will invoke the command. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * **[CoreWebView2ContextMenuItemKind Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2contextmenuitemkind)** * `CheckBox` @@ -716,7 +716,7 @@ When the user selects a WebView2 context menu command (a default menu item that' * `Submenu` -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * [COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND enum](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_context_menu_item_kind) * `COREWEBVIEW2_CONTEXT_MENU_ITEM_KIND_CHECK_BOX` @@ -740,13 +740,13 @@ If your host app reports a custom menu item as the selected menu item, then the The `AreDefaultContextMenusEnabled` property controls whether any context menu can be opened. If the WebView2 `AreDefaultContextMenusEnabled` setting is set to `False`, that disables context menus, and the `ContextMenuRequested` event won't be raised, such as when the user right-clicks. -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * **[CoreWebView2Settings Class](/dotnet/api/microsoft.web.webview2.core.corewebview2settings)** * [AreDefaultContextMenusEnabled Property](/dotnet/api/microsoft.web.webview2.core.corewebview2settings.aredefaultcontextmenusenabled) -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * **[ICoreWebView2Settings](/microsoft-edge/webview2/reference/win32/icorewebview2settings)** * [get_AreDefaultContextMenusEnabled](/microsoft-edge/webview2/reference/win32/icorewebview2settings#get_aredefaultcontextmenusenabled) @@ -761,7 +761,7 @@ The `AreDefaultContextMenusEnabled` property controls whether any context menu c -# [C#](#tab/csharp) +##### [C#](#tab/csharp) * **[WebView2 Class](/dotnet/api/microsoft.web.webview2.wpf.webview2)** * [ContextMenu Property](/dotnet/api/microsoft.web.webview2.wpf.webview2.contextmenu) @@ -820,7 +820,7 @@ The `AreDefaultContextMenusEnabled` property controls whether any context menu c -# [C++](#tab/cpp) +##### [C++](#tab/cpp) * **[ICoreWebView2](/microsoft-edge/webview2/reference/win32/icorewebview2)** * **[ICoreWebView2_4](/microsoft-edge/webview2/reference/win32/icorewebview2_4)** diff --git a/microsoft-edge/webview2/how-to/winrt-from-js.md b/microsoft-edge/webview2/how-to/winrt-from-js.md index f59c42227e..48ef9a7193 100644 --- a/microsoft-edge/webview2/how-to/winrt-from-js.md +++ b/microsoft-edge/webview2/how-to/winrt-from-js.md @@ -81,6 +81,7 @@ First, we'll pick some WinRT APIs that we're interested in calling from JavaScri In the WebView2 host app, the web-side JavaScript code can then access methods and properties on the `Language` object that's in the native-side code. + ###### Access projected APIs via DevTools Console At the end of this example walkthrough, you'll use the **Console** of Microsoft Edge DevTools to test reading the host's `displayName` property of the `Language` class: @@ -98,6 +99,7 @@ You can similarly access [Windows.System.UserProfile Namespace](/uwp/api/windows + ###### Access projected APIs via source code files Similarly, in source code files rather than in the DevTools Console, you can access the projected host object. First, you run setup code for the script: @@ -123,16 +125,23 @@ Let's get started! ## Step 1: Create or obtain a basic WebView2 project + ##### [WinUI 2 (UWP)](#tab/winui2) + + #### Install Visual Studio * If Visual Studio 2015 or later isn't already installed, in a separate window or tab, see [Install Visual Studio](../how-to/machine-setup.md#install-visual-studio) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue the steps below. The present article shows screenshots for Visual Studio Community Edition 2022. + + #### Install a preview channel of Microsoft Edge * If a preview channel of Microsoft Edge (Beta, Dev, or Canary) isn't already installed, in a separate window or tab, see [Install a preview channel of Microsoft Edge](../how-to/machine-setup.md#install-a-preview-channel-of-microsoft-edge) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue the steps below. + + #### Create or open a basic WebView2 project 1. Do any of the following approaches to obtain a baseline starter project that contains a couple lines of WebView2 code that embeds the WebView2 control: @@ -772,6 +781,7 @@ The host app's web-side code (and the DevTools Console) can now call methods and ## Step 9: Call methods and properties on the host object from web-side JavaScript + #### Access projected APIs via DevTools Console Next, use the DevTools Console to demonstrate that web-side code can call the host-side APIs that were specified in the **wv2winrt** tool (the WebView2 WinRT JS Projection tool): @@ -833,6 +843,7 @@ Congratulations! You've finished the sample demonstration of calling WinRT code --- + #### Access projected APIs via source code files Above, we used the DevTools console to run JavaScript statements that access the projected host object. Similarly, you can access the projected host object from within source code files. To do this, first you run setup code for the script: From cda8a6b465a06ad9727b9286c057a6e729b825a7 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Tue, 17 Sep 2024 09:10:01 -0700 Subject: [PATCH 5/9] table key leadin --- microsoft-edge/web-platform/tracking-prevention.md | 1 + 1 file changed, 1 insertion(+) diff --git a/microsoft-edge/web-platform/tracking-prevention.md b/microsoft-edge/web-platform/tracking-prevention.md index 38434324f7..2caa7bfcd8 100644 --- a/microsoft-edge/web-platform/tracking-prevention.md +++ b/microsoft-edge/web-platform/tracking-prevention.md @@ -148,6 +148,7 @@ The following are the enforcement actions and mitigations that are applied to ea | **Balanced** | S | - | S | B | B | S | S | Enabled | Enabled | | **Strict** | B | B | S | B | B | B | B | Enabled | Disabled | +About the table: * The column headers are the categories of trackers as defined by the tracking protection list categories that are listed in disconnect.me [services.json](https://github.com/disconnectme/disconnect-tracking-protection/blob/master/services.json). * The left column lists the three levels of tracking prevention in Microsoft Edge (Basic, Balanced, and Strict). * `S` indicates that storage access is blocked. From f4219cf8a276fe43d9d156c28ba5f720eca3853c Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Fri, 20 Sep 2024 10:17:37 -0700 Subject: [PATCH 6/9] cmt to preserve heading wording anchor --- microsoft-edge/webview2/concepts/end-user-faq.md | 1 + 1 file changed, 1 insertion(+) diff --git a/microsoft-edge/webview2/concepts/end-user-faq.md b/microsoft-edge/webview2/concepts/end-user-faq.md index cb2f31e594..3ff2af3d6a 100644 --- a/microsoft-edge/webview2/concepts/end-user-faq.md +++ b/microsoft-edge/webview2/concepts/end-user-faq.md @@ -15,6 +15,7 @@ This Frequently Asked Questions (FAQ) page is for end users, to explain the **We ## What is WebView2? + WebView2 is a way for app developers to embed web content (such as HTML, JavaScript, and CSS) in Windows applications. By including the WebView2 control in an app, a developer can write code for a website or web app, and then reuse that web code in their Windows application, saving time and effort. See [Introduction to Microsoft Edge WebView2](../index.md). From 148319a7c3316a9f431890ca3d46aa1f563442b2 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Sat, 21 Sep 2024 07:14:11 -0700 Subject: [PATCH 7/9] note to incl aka/fwlink in .md file --- microsoft-edge/webview2/concepts/end-user-faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsoft-edge/webview2/concepts/end-user-faq.md b/microsoft-edge/webview2/concepts/end-user-faq.md index 3ff2af3d6a..a02fbca9fa 100644 --- a/microsoft-edge/webview2/concepts/end-user-faq.md +++ b/microsoft-edge/webview2/concepts/end-user-faq.md @@ -15,7 +15,7 @@ This Frequently Asked Questions (FAQ) page is for end users, to explain the **We ## What is WebView2? - + WebView2 is a way for app developers to embed web content (such as HTML, JavaScript, and CSS) in Windows applications. By including the WebView2 control in an app, a developer can write code for a website or web app, and then reuse that web code in their Windows application, saving time and effort. See [Introduction to Microsoft Edge WebView2](../index.md). From 631492154290528730246855d3d0a2a37042bb82 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Mon, 23 Sep 2024 08:43:19 -0700 Subject: [PATCH 8/9] not aka link --- microsoft-edge/webview2/concepts/end-user-faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsoft-edge/webview2/concepts/end-user-faq.md b/microsoft-edge/webview2/concepts/end-user-faq.md index a02fbca9fa..31e56640a1 100644 --- a/microsoft-edge/webview2/concepts/end-user-faq.md +++ b/microsoft-edge/webview2/concepts/end-user-faq.md @@ -15,7 +15,7 @@ This Frequently Asked Questions (FAQ) page is for end users, to explain the **We ## What is WebView2? - + WebView2 is a way for app developers to embed web content (such as HTML, JavaScript, and CSS) in Windows applications. By including the WebView2 control in an app, a developer can write code for a website or web app, and then reuse that web code in their Windows application, saving time and effort. See [Introduction to Microsoft Edge WebView2](../index.md). From 6ef1062ee2678e97437adb2b6cdd09300e6fa6a1 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Mon, 23 Sep 2024 09:42:03 -0700 Subject: [PATCH 9/9] update & specify "(?)" links in DevTools Experiments --- .../experimental-features/index.md | 106 ++++++++++-------- 1 file changed, 57 insertions(+), 49 deletions(-) diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index c1b21939c1..4917496877 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -138,7 +138,7 @@ The experiments checkboxes that appear in the latest version of the Canary previ ## Allow extensions to load custom stylesheets - + Some Microsoft Edge Add-ons can define custom color themes for DevTools. If you install an add-on that defines a custom color theme for DevTools, you need to enable the **Allow extensions to load custom stylesheets** experiment to view the add-on themes. @@ -152,7 +152,7 @@ Status: ## Capture node creation stacks - + To capture JavaScript stack traces when DOM nodes are added to the DOM at runtime, enable this experiment. This experiment adds the **Stack Trace** tab in the **Elements** tool, grouped with the **Styles** tab: @@ -175,7 +175,7 @@ Status: ## Protocol Monitor - + Makes the **Protocol monitor** tool available in DevTools: @@ -207,7 +207,7 @@ Status: ## Show option to expose internals in heap snapshots - _new as of Microsoft Edge 105_ @@ -225,7 +225,7 @@ Status: ## Disable indentation markers temporarily - + _new as of Microsoft Edge 122_ @@ -243,7 +243,7 @@ Status: ## Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines - + The [Advanced Perceptual Contrast Algorithm (APCA)](https://w3c.github.io/silver/guidelines/methods/Method-font-characteristic-contrast.html) replaces the [AA](https://www.w3.org/WAI/WCAG21/quickref#contrast-minimum)/[AAA](https://www.w3.org/WAI/WCAG21/quickref#contrast-enhanced) guidelines contrast ratio in the Color Picker. The Color Picker is used in the **Styles** tab in the **Elements** tool. @@ -265,7 +265,7 @@ Status: ## Enable full accessibility tree view in the Elements panel - + Adds a **Switch to Accessibility Tree view** button in the **Elements** tool that toggles between the DOM tree and the accessibility tree. The button label toggles to **Switch to DOM Tree view**. @@ -292,7 +292,7 @@ Status: ## Enable new font editor within the Styles Pane - + You can use the visual [Font Editor](../inspect-styles/edit-fonts.md) to edit fonts. Use it define fonts and font characteristics. The visual **Font Editor** helps you do the following: @@ -323,7 +323,7 @@ Status: ## Enable automatic contrast issue reporting via the Issues panel - + Enables automatic contrast issue reporting in the **Issues** tool. @@ -338,7 +338,7 @@ Status: ## Enable experimental cookie features - + Enables experimental cookie features. @@ -358,7 +358,9 @@ non-Edge --> ## Sync CSS changes in the Styles tab - + Whether to sync CSS changes in the **Styles** tab in the **Elements** tool. @@ -371,16 +373,9 @@ Status: * This checkbox is present in Microsoft Edge Stable 128. - -#### Sync CSS changes in the Styles pane - - -This was a previous label of the checkbox. See the above section. - - ## Highlights a violating node or attribute in the Elements panel DOM tree - + _new as of Microsoft Edge 106_ @@ -397,7 +392,9 @@ Status: ## Group sources into authored and deployed trees - + _new as of Microsoft Edge 104_ @@ -416,7 +413,7 @@ Status: ## Hide ignore-listed code in Sources tree view - + _new as of Microsoft Edge 106_ @@ -434,7 +431,7 @@ Status: ## Highlight important DOM properties in the Properties tab - + _new as of Microsoft Edge 105_ @@ -487,7 +484,7 @@ Status: ## Enable background page selector (for prerendering) - + _new as of Microsoft Edge 114, new label for checkbox as of Microsoft Edge 128_ @@ -505,7 +502,7 @@ Status: ## Redesign of the filter bar in the Network panel - + _new as of Microsoft Edge 120_ @@ -532,7 +529,7 @@ Status: ## Autofill panel - + _new as of Microsoft Edge 125_ @@ -555,7 +552,7 @@ Status: - + _new as of Microsoft Edge 124_ @@ -585,7 +582,7 @@ Status: ## Performance panel: enable live metrics landing page - + _new as of Microsoft Edge 127_ @@ -604,14 +601,16 @@ Status: #### Enable new Performance panel landing page which includes live metrics and field data - + This is the older label for the checkbox. See the above section. ## Log DevTools uncaught exceptions to Console - + Controls whether to log DevTools uncaught exceptions in the **Console** tool. @@ -626,7 +625,9 @@ Status: ## Enable webhint - + [webhint](https://webhint.io) is an open-source tool that provides real-time feedback for websites and local webpages. The type of feedback provided by [webhint](https://webhint.io) includes: @@ -651,7 +652,9 @@ Status: ## Show issues in Elements - + Displays syntax errors as wavy underlines under DOM nodes in the **Elements** tool. @@ -665,7 +668,9 @@ Status: ## Open source files in Visual Studio Code - + The **Open source files in Visual Studio Code** experiment replaces the code editor of the Sources tool with Visual Studio Code, for editing local files. When you turn on this experiment, Developer Tools detects when you edit a local file, and prompts you to select a folder to use as your Workspace. @@ -686,8 +691,9 @@ Status: ## Enable Adaptive CPU throttling - + _new as of Microsoft Edge 114_ @@ -721,7 +727,9 @@ Status: ## Enable CSS Copilot - + Enables using Copilot in the Microsoft Edge Sidebar to explain HTML elements and CSS styles to help you better understand a particular element or style rule that's displayed in the **Elements** tool. To ask Copilot about an element or style rule, click the **Copilot** button next to it, and then ask follow-up questions. @@ -744,7 +752,7 @@ Status: ## Live heap profile - + Controls whether to live-update the heap profile. @@ -759,7 +767,7 @@ Status: ## Sampling heap profiler timeline - + Controls whether to show the sampling heap profiler timeline in the **Performance** tool. @@ -777,7 +785,7 @@ Status: - + Adds an **Invalidations** section for **Recalculate Style** events in the **Summary** tab of the **Performance** tool. The **Invalidations** section provides information about the root cause for a **Recalculate Style** event, which might be helpful when investigating long-running **Recalculate Style** events that are causing performance issues. @@ -796,7 +804,7 @@ Status: - + Controls whether to show all events in the **Performance** tool. @@ -813,7 +821,7 @@ Status: - + Controls whether to show V8 runtime call statistics in the **Performance** tool. V8 is the JavaScript engine that's used by Microsoft Edge. @@ -827,7 +835,7 @@ Status: ## Performance panel: Enable collecting enhanced traces - + _new as of Microsoft Edge 128_ @@ -845,7 +853,7 @@ See also: ## Performance panel: Enable collecting source text for compiled script - + _new as of Microsoft Edge 128_ @@ -865,7 +873,7 @@ See also: ## Performance panel: Enable debug mode (trace event details, etc) - + _new as of Microsoft Edge 128_ @@ -883,7 +891,7 @@ See also: ## Enable instrumentation breakpoints - + Whether to halt at test breakpoints. This experiment makes breakpoints more reliable. @@ -898,7 +906,7 @@ Status: ## Use scope information from source maps - + _new as of Microsoft Edge 118_ @@ -916,7 +924,7 @@ Status: ## Enable speculative loads panel in Application panel - + _new as of Microsoft Edge 121_ @@ -964,7 +972,7 @@ Status: ## Performance panel: enable sidebar - + _new as of Microsoft Edge 128_ @@ -982,7 +990,7 @@ Status: #### Enable the experimental, WIP sidebar for the Performance Panel. - + This is an older label for the checkbox. See the above section.