diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ad0e063f6d..37218122ce 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,7 +16,7 @@ If you are a Microsoft Employee, follow the internal guidance. To suggest a change to the docs: -1. If you are viewing the [docs.microsoft.com/microsoft-edge](https://docs.microsoft.com/microsoft-edge) page, click the **Edit** button in the upper right of the page. You are redirected to the corresponding Markdown source file in the [GitHub repository](https://github.com/MicrosoftDocs/edge-developer). If you are already in the GitHub repo, navigate to the source file that you are changing. +1. If you are viewing the [Microsoft Edge documentation](https://docs.microsoft.com/microsoft-edge) page, click the **Edit** button in the upper right of the page. You are redirected to the corresponding Markdown source file in the [GitHub repository](https://github.com/MicrosoftDocs/edge-developer). If you are already in the GitHub repo, navigate to the source file that you are changing. 1. If you don't already have a GitHub account, click **Sign Up** in the upper-right corner and create a new account. diff --git a/microsoft-edge/dev-videos/images/devtools-whatsnew-103.png b/microsoft-edge/dev-videos/images/devtools-whatsnew-103.png new file mode 100644 index 0000000000..feab030353 Binary files /dev/null and b/microsoft-edge/dev-videos/images/devtools-whatsnew-103.png differ diff --git a/microsoft-edge/dev-videos/images/devtools-whatsnew-104.png b/microsoft-edge/dev-videos/images/devtools-whatsnew-104.png new file mode 100644 index 0000000000..37432cf9f6 Binary files /dev/null and b/microsoft-edge/dev-videos/images/devtools-whatsnew-104.png differ diff --git a/microsoft-edge/dev-videos/images/devtools-whatsnew-105.png b/microsoft-edge/dev-videos/images/devtools-whatsnew-105.png new file mode 100644 index 0000000000..8b8d471b4b Binary files /dev/null and b/microsoft-edge/dev-videos/images/devtools-whatsnew-105.png differ diff --git a/microsoft-edge/dev-videos/images/learn-devtools-ui.png b/microsoft-edge/dev-videos/images/learn-devtools-ui.png new file mode 100644 index 0000000000..40feb1713e Binary files /dev/null and b/microsoft-edge/dev-videos/images/learn-devtools-ui.png differ diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index 12d5d2f81f..ee6e8e9a0f 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -29,6 +29,48 @@ To add a new video: --> + +## DevTools - What's new in DevTools 105 + +_Published on 6 September 2022._ + +[![Thumbnail image for the DevTools What's New in 105 video](./images/devtools-whatsnew-105.png)](https://www.youtube.com/watch?v=h0XJH_iLoUk) + +Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 105](../devtools-guide-chromium/whats-new/2022/09/devtools-105.md). + + + +## DevTools - Understand the DevTools user interface + +_Published on 1 September 2022._ + +[![Thumbnail image for the Understand the DevTools UI video](./images/learn-devtools-ui.png)](https://www.youtube.com/watch?v=ayemJLeE55c) + +Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable. + +In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools. + + + +## DevTools - What's new in DevTools 104 + +_Published on 5 August 2022._ + +[![Thumbnail image for the DevTools What's New in 104 video](./images/devtools-whatsnew-104.png)](https://www.youtube.com/watch?v=0_ZprFX8x0I) + +Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 104](../devtools-guide-chromium/whats-new/2022/08/devtools-104.md). + + + +## DevTools - What's new in DevTools 103 + +_Published on 5 July 2022._ + +[![Thumbnail image for the DevTools What's New in 103 video](./images/devtools-whatsnew-103.png)](https://www.youtube.com/watch?v=aa0C6BRdaPA) + +Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 103](../devtools-guide-chromium/whats-new/2022/06/devtools-103.md). + + ## DevTools - Debug the web in 3D diff --git a/microsoft-edge/develop-web-microsoft-edge.md b/microsoft-edge/develop-web-microsoft-edge.md index 7c3e731818..9777641aaa 100644 --- a/microsoft-edge/develop-web-microsoft-edge.md +++ b/microsoft-edge/develop-web-microsoft-edge.md @@ -157,7 +157,7 @@ See [The Web We Want initiative](web-we-want/index.md). ## How to use this documentation -These are tips for using the documentation UI at docs.microsoft.com. +These are tips for using the documentation UI of Microsoft Docs. @@ -186,9 +186,9 @@ If the desired article isn't found, select **Search for "_search-term_" in all M ![If title word or index term isn't found, an option is provided to full-text search all Microsoft Edge documentation.](media/full-text-search-fallback.png) -The full-text search page initially searches all _Microsoft Edge_ docs. Or, click the **View all results on Microsoft Docs** link for a broader search: +The full-text search page initially searches all _Microsoft Edge_ docs. Or, click the **View all results** link for a broader search: -![The full-text search page initially searches all Microsoft Edge docs, or click the link 'View all results on Microsoft Docs' for a broader search.](media/full-text-search-page.png) +![The full-text search page initially searches all Microsoft Edge docs, or click the link 'View all results' for a broader search.](media/full-text-search-page.png) diff --git a/microsoft-edge/developer/index.yml b/microsoft-edge/developer/index.yml index 79f6abbf0e..8282ea0aec 100644 --- a/microsoft-edge/developer/index.yml +++ b/microsoft-edge/developer/index.yml @@ -6,13 +6,13 @@ summary: Development using Microsoft Edge DevTools, Microsoft Edge extensions, P metadata: # title: default to root title above. # Required; page title displayed in search results. Include the brand. < 60 chars. # description: default to root title above. # Required; article description that is displayed in search results. < 160 chars. - ms.service: websites #Required; service per approved list. service slug assigned to your service by ACOM. - # ms.subservice: subservice # Optional; Remove if no subservice is used. + ms.service: app-service#Required; service per approved list. service slug assigned to your service by ACOM. ms.topic: landing-page # Required # ms.collection: collection # Optional; Remove if no collection is used. author: MSEdgeTeam #Required; your GitHub user alias, with correct capitalization. ms.author: msedgedevrel #Required; microsoft alias of author; optional team alias. ms.date: 09/02/2021 #Required; mm/dd/yyyy format. + ms.subservice: web-apps # - linkListType: architecture # - linkListType: concept diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index 2d6e4d606d..462943b1fc 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -44,9 +44,9 @@ Microsoft Edge DevTools includes the following tools. | **CSS Overview** tool | Help you better understand your page's CSS and identify potential improvements. | [CSS Overview tool](css/css-overview-tool.md) | | **Detached Elements** tool | To increase the performance of your page, this tool finds detached elements that the browser cannot garbage-collect, and identifies the JavaScript object that is still referencing the detached element. By changing your JavaScript to release the element, you reduce the number of detached elements on your page, increasing page performance and responsiveness. | [Debug DOM memory leaks with the Detached Elements tool](memory-problems/dom-leaks.md) | | **Developer Resources** | Shows resource URLs for the webpage. | [Developer Resources tool](developer-resources/developer-resources.md) | -| **Device Emulation** | Use the **Device Emulation** tool, sometimes called _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | +| **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | | **Elements** tool | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) | -| **Inspect** tool | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay information and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | +| **Inspect** tool | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | | **Issues** tool | The **Issues** tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues. | [Find and fix problems using the Issues tool](issues/index.md) | | **JavaScript Profiler** tool | This tool has been replaced by the **Performance** tool and the **Memory** tool. | [JavaScript Profiler tool](javascript-profiler/javascript-profiler-tool.md) | | **Lighthouse** tool | Use the Lighthouse tool to identify and fix common problems that affect your site's performance, accessibility, and user experience. | [Lighthouse tool](lighthouse/lighthouse-tool.md) | diff --git a/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md b/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md index ef6efd31c6..8faec41a5c 100644 --- a/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md +++ b/microsoft-edge/devtools-guide-chromium/css/css-overview-tool.md @@ -1,49 +1,161 @@ --- -title: CSS Overview tool +title: Optimize CSS styles with the CSS Overview tool description: The CSS Overview tool in Microsoft Edge DevTools. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge ms.technology: devtools -ms.date: 02/15/2022 +ms.date: 09/07/2022 --- - -# CSS Overview tool + +## Open the CSS Overview tool + +To open the **CSS Overview** tool: + +1. Navigate to the [TODO list demo app](https://microsoftedge.github.io/Demos/demo-to-do/) in Microsoft Edge, or to your own webpage. + +1. Open DevTools by pressing `F12` or `Ctrl`+`Shift`+`I` (Windows, Linux) or `Command`+`Option`+`I` (macOS). + +1. In the main toolbar, click **More Tools** and select **CSS Overview** from the list. + + ![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the list of tools from the More Tools button](images/css-overview-tool-open.png) + +1. The **CSS Overview** tool opens and shows a welcome screen. + + ![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the CSS Overview welcome screen](images/css-overview-tool-welcome.png) + + + +## Capture a CSS overview report + +Start using the tool by capturing a new report. Click **Capture overview**, the overview report appears. + +![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing the CSS Overview report for that site](images/css-overview-tool-report.png) + +If you make changes to your webpage and want to view a new report, click **Clear overview** and then capture a new overview. + +![Microsoft Edge, with the TODO list demo app, and DevTools next to it, showing a CSS Overview report with the Clear overview button at the top](images/css-overview-tool-clear.png) + + + +## Understand the report + +The overview report contains information organized in several sections: + +* **Summary**: statistics about key CSS rules, selectors, and media queries on the page. +* **Colors**: colors used on the page. +* **Font info**: list of fonts on the page. +* **Unused declarations**: list of unused CSS declarations. +* **Media queries**: list of media queries. + +To review the above sections, scroll through the report, or use the table of content sidebar. + +![Microsoft Edge, with the TODO list demo app and DevTools, showing the table of content and scrollbar in the CSS Overview report](images/css-overview-tool-scroll.png) + +### Summary + +The **Summary** section is useful to get a quick overview of your CSS code. It provides the number of external and inline stylesheets, the number of CSS rules, the number of selectors and their various types, and the number of media queries. + +This can be used to assess the volume and consistency of your CSS codebase on a given webpage. For example, if you decided to only use class selectors, the **Summary** section will make it quick to detect other types of selectors like ID or attribute. + +### Colors + +The **Colors** section lists all the colors used on the webpage, and groups them by background, text, fill, and border categories. + +This can be useful to discover cases when several similar colors are used instead of one common color. CSS custom properties (also known as CSS variables) can be used to avoid repeating colors throughout a CSS file and therefore avoid this problem. Learn more about CSS variables on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)). + +The **Colors** section also contains a list of color contrast issues on the page. To learn more, see [View elements with color contrast issues](#view-elements-with-color-contrast-issues). + +### Font info - +The **Font info** section lists all the font families used on the webpage and provides details about which sizes, weights, and line heights are used for each. -The **CSS Overview** tool displays a summary of CSS-related information about the webpage. This tool lists the colors, fonts, and media queries the webpage uses. The tool also lists the elements on your page that have color contrast issues, and the unused CSS declarations. The [CSS Overview Accessible Colors Demo](https://css-overview-accessible-colors-demo.glitch.me) page has an example of a color contrast issue. +When designing a webpage, using consistent typography settings can help reach a more aesthetically-pleasing result. The **Font info** section can be useful to detect when too many different fonts or font styles are used. -To view a list of elements that have a color contrast issue, on **Contrast issues**, click **Text**. +Each font in the **Font info** section contains links to the DOM elements they apply to. To reveal the elements a given font applies to: -To open the element in the **Elements** tool, click an element in the list. To help fix contrast issues, DevTools [automatically provides color suggestions](../whats-new/2020/08/devtools.md#accessible-color-suggestion-in-the-styles-pane). +1. On the overview report, click **Font info** in the sidebar to scroll to the relevant section of the report. +1. Find the font family and the size, weight, or line-height you are interested in. -For updates on this feature in the Chromium open-source project, see Issue [#1120316](https://crbug.com/1120316). +1. Click the **X occurrences** link next to it to reveal the list of elements. -![Low color contrast issues.](../whats-new/media/2020/10/css-overview.msft.png) +1. Move your mouse over the elements in the list to highlight them in the rendered page. + + ![Microsoft Edge, with the TODO list demo app and DevTools, showing the list of elements for a given font-size, and a highlighted element on hover](images/css-overview-tool-font-element.png) + +1. Click an element to automatically open the **Elements** tool with that element selected. + + ![Microsoft Edge, with the TODO list demo app and DevTools, showing Elements tool, with the right node selected](images/css-overview-tool-elements-tool.png) + +### Unused declarations + +The **Unused declarations** section lists some of the CSS declarations that don't have an effect on their target elements. + +CSS declarations are key/value pairs such as `top: 42px`. CSS declarations are contained in CSS rules, and rules target specific elements on the webpage. Depending on other styles applied to an element, a CSS declaration may not have any effect. + +As an example, the `top: 42px` declaration will not have any effect if the element it targets is not positioned with `position: absolute` or `position: relative` for example. + +These cases may be hard to find and the **Unused declarations** section helps by listing some of them. Note that not all possible cases are listed. For now, the following cases are reported: + + +* When the `top`, `right`, `bottom`, or `left` properties are used on statically positioned elements. +* When the `width` or `height` properties are used on inline elements. +* When the `vertical-align` property is used on elements that are not inline or table cells. + +### Media queries + +The **Media queries** section lists the CSS media queries found on the webpage. + +CSS media queries can be used to apply specific styles depending on the media type (for example `print` or `screen`) or depending on the viewport size. This is often used to make webpages respond to the available space. + +When a CSS codebase becomes complex, keeping track of all the CSS media queries can be hard. The **Media queries** section makes this easier. Each media query in the section also contains a link to the CSS file it's defined in. To reveal that file: + +1. On the overview report, click **Media queries** in the sidebar to scroll to the relevant section of the report. + +1. In the report, find the media query you are interested in. + +1. Click the **X occurrences** link next to it to reveal the corresponding files. + + ![Microsoft Edge, with the TODO list demo app and DevTools, showing the media queries section of the Overview tool, and the list of files that contain a given media query](images/css-overview-tool-media-query.png) + +1. Click one of the files to automatically open the **Sources** tool with that file opened. + + ![Microsoft Edge, with the TODO list demo app and DevTools, showing the Sources tool, with the file that contains a media query opened, at the right line](images/css-overview-tool-sources-tool.png) -> [!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/docs/devtools/css-overview/) and is authored by [Jecelyn Yeen](https://developers.google.com/web/resources/contributors#jecelyn-yeen) (Developer advocate, Chrome DevTools). +## View elements with color contrast issues + +The **Colors** section of the overview report can also be used to find color contrast issues on a webpage. If the current webpage contains elements where the contrast between the font color and the background color is insufficient, the **Contrast issues** sub-section will be displayed. + +To find color contrast issues: + +1. Navigate to the [Animal Shelter](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) demo website, which has color contrast issues, in Microsoft Edge. Or navigate to your own website. + +1. Open DevTools by pressing `Ctrl`+`Shift`+`I` (Windows, Linux) or `Command`+`Option`+`I` (macOS). + +1. In the main toolbar, click **More Tools** and select **CSS Overview** from the list. + +1. In the **CSS Overview** tool, click **Capture overview** and then click **Colors** in the overview report sidebar. + +1. Scroll down to the **Contrast issues** sub-section to view all issues. + + ![Microsoft Edge, with the TODO list demo app and DevTools, showing a list of contrast issues in the CSS Overview report](images/css-overview-tool-contrast-issues.png) + +1. To view the elements that have a particular color contrast issue, choose the issue you want to fix and click **Text**. The corresponding elements are listed. + + ![Microsoft Edge, with the TODO list demo app and DevTools, showing a list of elements with a color contrast issue](images/css-overview-tool-contrast-issues-elements.png) + +1. To open the corresponding element in the **Elements** tool, click an element in the list. + + ![Microsoft Edge, with the TODO list demo app and DevTools, showing the Elements tool, with the color-contrast issue element selected](images/css-overview-tool-contrast-issues-elements-tool.png) -[![Creative Commons License.](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) -This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +To help fix contrast issues, check out the [Text contrast](../accessibility/reference.md#text-contrast) section of the accessibility-testing DevTools features. diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-clear.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-clear.png new file mode 100644 index 0000000000..31a993ca01 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-clear.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues-elements-tool.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues-elements-tool.png new file mode 100644 index 0000000000..4d1d75fc21 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues-elements-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues-elements.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues-elements.png new file mode 100644 index 0000000000..c1f6ad26be Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues-elements.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues.png new file mode 100644 index 0000000000..6d8b6a4f61 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-contrast-issues.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-elements-tool.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-elements-tool.png new file mode 100644 index 0000000000..9f2e0bf4b7 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-elements-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-font-element.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-font-element.png new file mode 100644 index 0000000000..af2918af4d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-font-element.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-media-query.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-media-query.png new file mode 100644 index 0000000000..ebfd0f7919 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-media-query.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-open.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-open.png new file mode 100644 index 0000000000..ca6b4b01ef Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-open.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-report.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-report.png new file mode 100644 index 0000000000..1346e6a537 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-report.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-scroll.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-scroll.png new file mode 100644 index 0000000000..d17b5ee5e2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-scroll.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-sources-tool.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-sources-tool.png new file mode 100644 index 0000000000..4e302386bf Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-sources-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-welcome.png b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-welcome.png new file mode 100644 index 0000000000..a32f66aa2a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/images/css-overview-tool-welcome.png differ diff --git a/microsoft-edge/devtools-guide-chromium/customize/index-images/customize-devtools.png b/microsoft-edge/devtools-guide-chromium/customize/index-images/customize-devtools.png new file mode 100644 index 0000000000..6a5e547031 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/customize/index-images/customize-devtools.png differ diff --git a/microsoft-edge/devtools-guide-chromium/customize/index-images/learn-devtools-ui.png b/microsoft-edge/devtools-guide-chromium/customize/index-images/learn-devtools-ui.png new file mode 100644 index 0000000000..40feb1713e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/customize/index-images/learn-devtools-ui.png differ diff --git a/microsoft-edge/devtools-guide-chromium/customize/index.md b/microsoft-edge/devtools-guide-chromium/customize/index.md index e21d3460d5..2618285db0 100644 --- a/microsoft-edge/devtools-guide-chromium/customize/index.md +++ b/microsoft-edge/devtools-guide-chromium/customize/index.md @@ -5,7 +5,7 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 05/04/2021 +ms.date: 09/08/2022 --- +## Videos about Customizing the DevTools UI + + +#### Customizing Microsoft Edge Developer Tools and quick feature access + +_Published on 5 May 2022._ + +[![Thumbnail image for the DevTools customization video](./index-images/customize-devtools.png)](https://www.youtube.com/watch?v=ypRzEBYNptQ) + +Learn how to customize DevTools to fit your needs. + +This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the bottom drawer and customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools. + + +#### Understand the DevTools user interface + +_Published on 1 September 2022._ + +[![Thumbnail image for the Understand the DevTools UI video](./index-images/learn-devtools-ui.png)](https://www.youtube.com/watch?v=ayemJLeE55c) + +Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable. + +In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools. + + + +Check out this video to learn about the main parts of the DevTools UI, how to customize it to meet your needs, learn about the different tools that are available, and where to go for help. + + +#### See also + +* [Videos about web development with Microsoft Edge](../../dev-videos/index.md) + + > [!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). diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index 3eb10568cf..f660a32531 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge no-loc: ["Enable webhint"] -ms.date: 08/03/2022 +ms.date: 08/30/2022 --- # Experimental features @@ -18,21 +18,21 @@ Policies to keep this page comprehensive and maintainable: * Don't change h2 text, that might break a link from UI. * When a checkbox is removed from all the channels, delete its section. -Steps to maintain this page monthly: For latest Stable, and for latest Canary: +Steps to maintain this page monthly: For latest Canary, and for latest Stable: 1. Go to edge://settings/help, update if needed. 1. In DevTools, select Settings > Preferences > Restore Defaults > Reload DevTools. 1. In DevTools, go to Settings > Experiments. -1. In the "Experiments which are turned on by default" section below, update the Edge Stable & Edge Canary list at top. +1. In the "Experiments which are turned on by default" section below, update the Edge Canary list & Edge Stable list at top. * In that section, link down to the h2; do not link to a different article. 1. Make sure the article has an h2 for each checkbox. 1. In each h2 section, update the presence or absence of "not", and update the version #: -This checkbox is|is not present in Microsoft Edge Stable v123. This checkbox is|is not present in Microsoft Edge Canary v123. +This checkbox is|is not present in Microsoft Edge Stable v123. --> -Microsoft Edge DevTools provide access to experimental features that are still in development. This article lists and describes the experimental features which are in either: +Microsoft Edge DevTools provide access to experimental features that are still in development. This article lists and describes the experimental features that are in either: * The latest version of the Canary preview channel of Microsoft Edge. -* The latest version of the Stable version of Microsoft Edge. +* The latest version of the Stable release of Microsoft Edge. All [channels of Microsoft Edge](/deployedge/microsoft-edge-channels) have experimental features. You can get the latest experimental features by using the [Microsoft Edge Canary channel](https://www.microsoftedgeinsider.com/welcome?channel=canary). To view the full list available in your version of Microsoft Edge, see the **Settings** > **Experiments** page in DevTools. @@ -47,7 +47,9 @@ The following experimental features are turned on by default. You can use these -**Turned on by default in Microsoft Edge Stable v103:** +**Turned on by default in Microsoft Edge Canary v106:** +* [Source order viewer](#source-order-viewer) +* [Emulation: Support dual screen mode](#emulation-support-dual-screen-mode) * [Enable Reporting API panel in the Application panel](#enable-reporting-api-panel-in-the-application-panel) * [Display more precise changes in the Changes tab](#display-more-precise-changes-in-the-changes-tab) * [Use Lighthouse panel with timespan and snapshot modes](#use-lighthouse-panel-with-timespan-and-snapshot-modes) @@ -57,8 +59,9 @@ The following experimental features are turned on by default. You can use these * [Show issues in Elements](#show-issues-in-elements) * [Focus Mode](#focus-mode) * [Open source files in Visual Studio Code](#open-source-files-in-visual-studio-code) +* [Enable keyboard shortcut editor](#enable-keyboard-shortcut-editor) -**Turned on by default in Microsoft Edge Canary v105:** +**Turned on by default in Microsoft Edge Stable v104:** * [Enable Reporting API panel in the Application panel](#enable-reporting-api-panel-in-the-application-panel) * [Display more precise changes in the Changes tab](#display-more-precise-changes-in-the-changes-tab) * [Use Lighthouse panel with timespan and snapshot modes](#use-lighthouse-panel-with-timespan-and-snapshot-modes) @@ -135,7 +138,7 @@ One of the UI experiments adds a new way to provide feedback: when the **Focus M ## List of experiments -Most of the experiments that appear in the latest version of the Canary preview channel of Microsoft Edge are listed below. +The experiments checkboxes that appear in the latest version of the Canary preview channel of Microsoft Edge are listed below. The Stable release is also noted, following behind the addition or removal of checkboxes in Canary. @@ -149,8 +152,8 @@ Most of the experiments that appear in the latest version of the Canary preview Some Microsoft Edge Add-ons can define custom color themes for DevTools. If you install an add-on with a theme, you need to enable the **Allow extensions to load custom stylesheets** experiment to view the add-on themes. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -159,8 +162,24 @@ Status: To capture JavaScript stack traces when DOM nodes are added to the DOM at runtime, enable this experiment. The captured stack traces are displayed in the **Stack Trace** pane of the **Elements** panel. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Automatically pretty print in the Sources Panel + + +When this experiment is turned on, when you display a minified file in the Sources panel, the file is opened in a single tab in the Sources panel, pretty-printed. + +When this experiment is turned off, a UI prompt with a button asks you whether to pretty-print the file. The file is opened in an additional tab which has an appended suffix of **:formatted**. + +* A _minified_ file is concatenated into a single long line. +* In contrast, _pretty print_ presents the contents of a file in an indented, more human-readable format. + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. Instead see [Automatically pretty print in the Microsoft Edge Sources Panel](#automatically-pretty-print-in-the-microsoft-edge-sources-panel), below. @@ -187,8 +206,8 @@ To monitor the messages sent and received by DevTools to debug the inspected pag 1. The **Protocol monitor** tool is displayed in the **Drawer** at the bottom of DevTools. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -199,8 +218,8 @@ Adds the **CSP Violations** tool, which displays any Content Security Policy (CS ![The CSP Violations tool.](index-images/csp-violations-tool.png) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -210,28 +229,14 @@ Records coverage while performance tracing. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. - - - -## Show option to take heap snapshot where globals are not treated as root - - -Shows the option to take a heap snapshot where globals are not treated as root. - - -See also: -* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) - -Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is not present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Show option to expose internals in heap snapshots - + +_new as of v105_ Whether to display a checkbox to expose internals in heap snapshots in the **Memory** tool. @@ -240,8 +245,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -253,8 +258,8 @@ See also: * [Test keyboard support using the Source Order Viewer](../accessibility/test-tab-key-source-order-viewer.md) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -264,8 +269,8 @@ Whether to include event initiators in the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -275,8 +280,8 @@ Whether to use a WebGL-based flamechart in the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -286,8 +291,8 @@ Enables DWARF support for WebAssembly debugging. See [Improved WebAssembly debu Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -298,8 +303,22 @@ Uses source maps to automatically map original variable names to minified variab See [Map the processed code to your original source code, for debugging](../javascript/source-maps.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Emulation: Support dual screen mode + +_new as of v106_ + +Whether to show the UI to emulate dual-screen mode in device emulation. + +See [Emulate dual-screen and foldable devices](../device-mode/dual-screen-and-foldables.md). + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. @@ -319,8 +338,8 @@ See also: * [Test text-color contrast using the Color Picker](../accessibility/color-picker.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -329,8 +348,8 @@ Status: Adds a button in the **Elements** tool which toggles between the DOM tree and the accessibility tree. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -360,8 +379,8 @@ For more information about the visual **Font Editor**, see [Edit CSS font styles For more information, see [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -371,8 +390,8 @@ Enables automatic contrast issue reporting in the **Issues** tool. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -382,8 +401,8 @@ Enables experimental cookie features. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -392,8 +411,8 @@ Status: Use the Reporting API to catch certain errors such as security violations or deprecated API calls. These errors happen when users visit your site and are sent to a server endpoint. Enable this experiment to add the **Reporting API** section in the **Application** panel, which lists all of the reports sent to the endpoint. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -402,8 +421,8 @@ Status: See [More precise changes in the Changes tab](https://developer.chrome.com/blog/new-in-devtools-98/#changes). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -413,8 +432,8 @@ Whether to sync CSS changes in the **Styles** tab in the **Elements** tool. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -424,22 +443,23 @@ Whether to use local overrides for response headers. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Enable CSS Authoring hints for inactive rules, deprecated properties, etc. - + +_new as of v105_ Whether to enable CSS authoring hints in the **Styles** panel of the **Elements** tool to display information tooltips next to inactive or deprecated properties. -In Canary v105, this checkbox has no effect. When this feature is implemented, this feature will provide help when writing or inspecting CSS in the **Styles** panel. Small information icons will appear next to CSS properties that are inactive (or deprecated). +This feature provides help when writing or inspecting CSS in the **Styles** panel. Small information icons appear next to CSS properties that are inactive or deprecated. An inactive property is one that applies correctly to an element but has no effect on it (for example, `width:100px` applied to an inline element has no effect). Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. @@ -451,8 +471,8 @@ See also: * [Lighthouse tool](../lighthouse/lighthouse-tool.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -461,8 +481,8 @@ Status: Adds increased support for the `@layer` CSS rule in the **Styles** pane. CSS rules in the **Styles** pane are grouped by the layers they belong to. A layer overview widget is displayed, which shows the layer tree for the currently inspected element. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -478,21 +498,35 @@ See also: * [Change colors with the Color Picker](../css/reference.md#change-colors-with-the-color-picker) in _CSS features reference_ Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Group sources into Authored and Deployed trees - -Controls whether to group sources into **Authored** and **Deployed** trees in the **Page**, **Filesystem**, and **Overrides** tabs of the **Sources** tool. This feature in the **Sources** tool allows you to group source files in two folders depending on whether these are: +_new as of v104_ + + +Controls whether to group resources into separate **Authored** and **Deployed** trees in the **Page** tab of the **Sources** tool. This feature in the **Sources** tool allows you to group source files in two folders depending on whether these are: * Original source files (authored, that is, files with your local edits). * Production files (deployed files that are on the web server after compiling and bundling the source files). Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Hide ignore-listed code in sources tree view + +_new as of v106_ + +Whether to hide or display code that's in the ignore list, in the **Sources** tool's tree view, such as the **Page** tab. + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. @@ -502,8 +536,8 @@ Controls whether to log DevTools uncaught exceptions in the **Console** tool. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -523,8 +557,8 @@ The [webhint](https://webhint.io) experiment displays the webhint feedback in th ![webhint feedback in the Issues panel.](../media/experiments-webhint.msft.png) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -533,8 +567,8 @@ Status: Enable this experiment to view syntax errors under HTML in the **DOM** view of the **Elements** tool. For more information, see [Wavy underlines highlight code issues and improvements in Elements tool](../whats-new/2021/04/devtools.md#wavy-underlines-highlight-code-issues-and-improvements-in-elements-tool). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -549,8 +583,8 @@ Focus Mode also provides a **Quick View** list, to open a second tool alongside See [Reduce the complexity of DevTools with Focus Mode](focus-mode.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -565,23 +599,19 @@ When you select a folder to use as your Workspace, selecting any link to a file Any edits that you make in DevTools now change the file on the hard drive and sync live with Visual Studio Code. You can read about setting up your workspace in [Opening source files in Visual Studio Code](../sources/opening-sources-in-vscode.md). Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. ## Automatically pretty print in the Microsoft Edge Sources Panel -When this experiment is turned on, when you display a minified file in the Sources panel, the file is opened in a single tab in the Sources panel, pretty-printed. - -When this experiment is turned off, a UI prompt with a button asks you whether to pretty-print the file. The file is opened in an additional tab which has an appended suffix of **:formatted**. + -* A _minified_ file is concatenated into a single long line. -* In contrast, _pretty print_ presents the contents of a file in an indented, more human-readable format. +In v106, this checkbox has been moved to the top and renamed to **Automatically pretty print in the Sources Panel**. -Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is not present in Microsoft Edge Canary v106. Instead see [Automatically pretty print in the Sources Panel](#automatically-pretty-print-in-the-sources-panel), above. +* This checkbox is present in Microsoft Edge Stable v104. @@ -596,8 +626,8 @@ Whether to include the Ignore list for JavaScript frames on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -607,8 +637,8 @@ Controls whether to include Input events on the Timeline overview. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -621,8 +651,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -635,8 +665,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -648,8 +678,8 @@ See also: * [Customize keyboard shortcuts](../customize/shortcuts.md) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -658,8 +688,8 @@ Status: Controls whether to show invalidation tracking on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -668,8 +698,8 @@ Status: Controls whether to show all events on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -678,8 +708,8 @@ Status: Controls whether to show v8 runtime call stats on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -688,8 +718,8 @@ Status: Controls whether to replay input events on the Timeline. Status: -* This checkbox is present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. @@ -702,5 +732,21 @@ See also: * [The first time source files are loaded, breakpoints might not trigger](https://bugs.chromium.org/p/chromium/issues/detail?id=1133307&q=%22instrumentation%20breakpoints%22&can=2) Status: -* This checkbox is not present in Microsoft Edge Stable v103. -* This checkbox is present in Microsoft Edge Canary v105. +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is present in Microsoft Edge Stable v104. + + + +## Enable re-designed Breakpoint Sidebar Pane in the Sources Panel + + +_new as of v106_ + +Whether to show the re-designed version of the **Breakpoint Sidebar** pane in the **Sources** tool. + +See also: +* [Pause code with breakpoints](../javascript/breakpoints.md) + +Status: +* This checkbox is present in Microsoft Edge Canary v106. +* This checkbox is not present in Microsoft Edge Stable v104. diff --git a/microsoft-edge/devtools-guide-chromium/landing/index.yml b/microsoft-edge/devtools-guide-chromium/landing/index.yml index 6f38b86d03..089622ccf2 100644 --- a/microsoft-edge/devtools-guide-chromium/landing/index.yml +++ b/microsoft-edge/devtools-guide-chromium/landing/index.yml @@ -6,13 +6,13 @@ summary: Development using Microsoft Edge DevTools. # < 160 chars metadata: # title: default to root title above. # Required; page title displayed in search results. Include the brand. < 60 chars. # description: default to root title above. # Required; article description that is displayed in search results. < 160 chars. - ms.service: websites #Required; service per approved list. service slug assigned to your service by ACOM. - # ms.subservice: subservice # Optional; Remove if no subservice is used. + ms.service: app-service#Required; service per approved list. service slug assigned to your service by ACOM. ms.topic: landing-page # Required # ms.collection: collection # Optional; Remove if no collection is used. author: MSEdgeTeam #Required; your GitHub user alias, with correct capitalization. ms.author: msedgedevrel #Required; microsoft alias of author; optional team alias. ms.date: 01/07/2022 #Required; mm/dd/yyyy format. + ms.subservice: web-apps # ============================================================================= # Valid article types (sections of a card) diff --git a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png index 2a72cc9f9a..69cf973574 100644 Binary files a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png and b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-and-resend.png differ diff --git a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png index 0886e53ca6..a4e275cb83 100644 Binary files a/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png and b/microsoft-edge/devtools-guide-chromium/network-console/images/edit-then-send.png differ diff --git a/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png b/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png index e5cd813a8b..7f9ae89fa3 100644 Binary files a/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png and b/microsoft-edge/devtools-guide-chromium/network-console/images/entering-key-value-pairs.png differ diff --git a/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/protocol-handlers-defined.png b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/protocol-handlers-defined.png new file mode 100644 index 0000000000..ab13ab981c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/protocol-handlers-defined.png differ diff --git a/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/protocol-handlers-not-defined.png b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/protocol-handlers-not-defined.png new file mode 100644 index 0000000000..5e9a5f299b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/protocol-handlers-not-defined.png differ diff --git a/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/test-protocol-handlers.png b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/test-protocol-handlers.png new file mode 100644 index 0000000000..48b34bd854 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/images/test-protocol-handlers.png differ diff --git a/microsoft-edge/devtools-guide-chromium/progressive-web-apps/protocol-handlers.md b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/protocol-handlers.md new file mode 100644 index 0000000000..fed0386799 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/progressive-web-apps/protocol-handlers.md @@ -0,0 +1,67 @@ +--- +title: Test Progressive Web App (PWA) protocol handling +description: Use the Application tool to test protocols you've defined in your PWA web app manifest. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.prod: microsoft-edge +ms.date: 08/23/2022 +--- + +# Test Progressive Web App (PWA) protocol handling + +This article assumes that you have already defined protocol handlers in your PWA web app manifest and are debugging your app with the DevTools. To learn about how to define and register protocols in your PWA, see [Handle protocols in Progressive Web Apps](../../progressive-web-apps-chromium/how-to/handle-protocols.md). + +Use the **Application** tool to verify and test that Microsoft Edge has successfully registered your app as a handler for protocols defined in your web app manifest. + + + +## Verify that protocol handlers are defined correctly + +If you haven't already defined handlers for protocols in your PWA web app manifest, the **Application** tool will note that protocols haven't been defined and will provide additional information on how to update your web app manifest. + +If you have defined protocols correctly in your web app manifest, the **Application** tool will report that Microsoft Edge has found valid protocol handler registrations and that you can test these protocol handlers with your installed PWA. + +To verify that you have correctly defined protocol handlers: + +1. Navigate to your PWA in Microsoft Edge. You can use [the PWAmp demo application](https://microsoftedge.github.io/Demos/pwamp/). +1. Open DevTools (`F12`). +1. Open the **Application** tool. +1. Click **Manifest** to expand the dropdown list. +1. Click **Protocol Handlers**. + +If protocol handlers haven't been defined in the web app manifest, or have been defined incorrectly, the following message will be displayed: + +![The Protocol Handlers section of the Manifest pane without protocols defined.](./images/protocol-handlers-not-defined.png) + +If protocol handlers have been defined successfully in the web app manifest, the following message will be displayed: + +![The Protocol Handlers section of the Manifest pane with protocols defined.](./images/protocol-handlers-defined.png) + +The **Protocol Handlers** section also makes it possible to test the protocol handlers you've defined. + + + +## Test protocols from the Application tool + +To test your protocol handlers from the **Application** tool, you must have already installed your PWA. To learn how to install your PWA, see [Installing a PWA](../../progressive-web-apps-chromium/ux.md#installing-a-pwa). + +The **Application** tool detects all the protocol handlers from your web app manifest. To test a handler: + +1. Navigate to your PWA in Microsoft Edge and open DevTools (`F12`). You can use [the PWAmp demo application](https://microsoftedge.github.io/Demos/pwamp/). +1. Open the **Application** tool and click **Manifest** > **Protocol Handlers**. +1. Select the protocol you want to test by choosing from the dropdown list. +1. Enter the rest of the URI in the text and click **Test protocol**. This will launch your PWA. Depending on your operating system (OS), you may need to allow Microsoft Edge to open your PWA and accept any OS-level permissions for registering your app as a handler for your protocol. + +In the following screenshot, the `web+amp://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Kevin_MacLeod/Jazz_Sampler/Kevin_MacLeod_-_AcidJazz.mp3` URI is being tested. + +![Testing the custom web+amp protocol from the Application tool.](./images/test-protocol-handlers.png) + + + +## See also + +* [Debug Progressive Web Apps (PWAs)](./index.md) +* [Handle protocols in Progressive Web Apps](../../progressive-web-apps-chromium/how-to/handle-protocols.md) +* [Getting started with Protocol Handlers for your web app](https://blogs.windows.com/msedgedev/2022/01/20/getting-started-url-protocol-handlers-microsoft-edge/) +* [URL protocol handler registration for PWAs](https://web.dev/url-protocol-handler/) diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/clear-all-cookies-icon.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/clear-all-cookies-icon.png new file mode 100644 index 0000000000..001387d495 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/clear-all-cookies-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/clear-all-cookies.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/clear-all-cookies.png new file mode 100644 index 0000000000..354ac75564 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/clear-all-cookies.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/delete-cookie-icon.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/delete-cookie-icon.png new file mode 100644 index 0000000000..d295e9c773 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/delete-cookie-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/delete-selected-cookie.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/delete-selected-cookie.png new file mode 100644 index 0000000000..9715ea9ea7 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/delete-selected-cookie.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/filter-cookies-name.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/filter-cookies-name.png new file mode 100644 index 0000000000..c9e0e5ff73 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/filter-cookies-name.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/open-cookies-select-source.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/open-cookies-select-source.png new file mode 100644 index 0000000000..0da7fa1890 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/open-cookies-select-source.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/pick-application-no-manifest.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/pick-application-no-manifest.png new file mode 100644 index 0000000000..6f105fa3eb Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/pick-application-no-manifest.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies-images/rename-cookie.png b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/rename-cookie.png new file mode 100644 index 0000000000..0e68fda51b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/storage/cookies-images/rename-cookie.png differ diff --git a/microsoft-edge/devtools-guide-chromium/storage/cookies.md b/microsoft-edge/devtools-guide-chromium/storage/cookies.md index 1647954a1c..4e3db6c1f8 100644 --- a/microsoft-edge/devtools-guide-chromium/storage/cookies.md +++ b/microsoft-edge/devtools-guide-chromium/storage/cookies.md @@ -5,7 +5,7 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 05/04/2021 +ms.date: 09/09/2022 --- ## Open the Cookies pane -1. [Open DevTools](/microsoft-edge/devtools-guide-chromium/open). +1. Open DevTools on the webpage you want to edit. For example, right-click the page and then select **Inspect**, or press `F12`. For additional ways, see [Open DevTools](/microsoft-edge/devtools-guide-chromium/open). -1. Click the **Application** tab to open the **Application** panel. The **Manifest** pane opens: +2. Click the **Application** tab to open the **Application** tool. The **Manifest** pane opens: - ![The Manifest pane.](../media/storage-application-manifest-empty.msft.png) + ![The Manifest pane](cookies-images/pick-application-no-manifest.png) -1. Under **Storage**, expand **Cookies**, then select an origin: - - ![The Cookies pane.](../media/storage-application-storage-cookies-selected.msft.png) +3. Under **Storage**, expand **Cookies**, then select an origin: + ![The Cookies pane](cookies-images/open-cookies-select-source.png) ## Fields @@ -58,13 +57,17 @@ The **Cookies** table contains the following fields: * **Size**. The size, in bytes, of the cookie. -* **HTTP**. If true, this field indicates that the cookie should only be used over HTTP, and JavaScript modification isn't allowed. See [HttpOnly cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies). +* **HttpOnly**. If `true`, this field indicates that the cookie should only be used over HTTP, and JavaScript modification isn't allowed. See [HttpOnly cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies). -* **Secure**. If true, this field indicates that the cookie must be sent to the server only over a secure, HTTPS connection. See [Secure cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies). +* **Secure**. If `true`, this field indicates that the cookie must be sent to the server only over a secure, HTTPS connection. See [Secure cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies). * **SameSite**. Contains `strict` or `lax` if the cookie is using the experimental [Samesite](https://developer.mozilla.org/docs/Web/HTTP/Cookies#SameSite_cookies) attribute. -* **Priority**. Contains `low`, `medium` (default), or `high` if the cookie is using the deprecated [cookie Priority](https://bugs.chromium.org/p/chromium/issues/detail?id=232693) attribute. +* **SameParty**. This attribute provides web developers a means to annotate cookies that are allowed to be set or sent in same-party, cross-site contexts. + +* **Partition Key**. A _partition key_ is a property or path within a document that can be used to distribute data within a document yet store the data together. Multiple pieces of data that are spread throughout a document and that have the same partition key value are logically grouped together and stored in the same physical partition. + +* **Priority**. Contains `low`, `medium` (default), or `high` if the cookie is using the deprecated [Cookie Priority](https://bugs.chromium.org/p/chromium/issues/detail?id=232693) attribute. @@ -72,29 +75,28 @@ The **Cookies** table contains the following fields: To filter cookies by **Name** or **Value**, use the **Filter** text box: -![Filtering out any cookies that don't contain the text ID.](../media/storage-application-storage-cookies-filter-id.msft.png) - -Filtering by other fields isn't supported. +![Filtering out any cookies that don't contain the text ID](cookies-images/filter-cookies-name.png) +**Note:** Filtering by other fields isn't supported. ## Edit a cookie The **Name**, **Value**, **Domain**, **Path**, and **Expires / Max-Age** fields are editable. Double-click a field to edit it: -![Setting the name of a cookie to 'DEVTOOLS!'](../media/storage-application-storage-cookies-rename.msft.png) - +![Setting the name of a cookie to 'DEVTOOLS!'](cookies-images/rename-cookie.png) ## Delete cookies -To delete a specific cookie, click a cookie and then click **Delete Selected** (![Delete Selected.](../media/delete-icon.msft.png)): +To delete a specific cookie, click a cookie and then click **Delete Selected** (![Delete Selected](cookies-images/delete-cookie-icon.png)): + +![Deleting a specific cookie.](cookies-images/delete-selected-cookie.png) -![Deleting a specific cookie.](../media/storage-application-storage-cookies-delete-selected.msft.png) +To delete all cookies, click **Clear all cookies** (![Clear all cookies icon](cookies-images/clear-all-cookies-icon.png)): -To delete all cookies, click **Clear All** (![Clear All.](../media/clear-icon.msft.png)): +![Clearing all cookies](cookies-images/clear-all-cookies.png) -![Clearing all cookies.](../media/storage-application-storage-cookies-clear-all.msft.png) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/after-docking-menu.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/after-docking-menu.png new file mode 100644 index 0000000000..904d9868d2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/after-docking-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/before-docking-menu.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/before-docking-menu.png new file mode 100644 index 0000000000..229247be54 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/before-docking-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/dock-quick-view-bottom.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/dock-quick-view-bottom.png new file mode 100644 index 0000000000..02c2e9e1e6 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/dock-quick-view-bottom.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/edit-and-resend.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/edit-and-resend.png new file mode 100644 index 0000000000..69cf973574 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/edit-and-resend.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/focus-mode-improved-location-controls.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/focus-mode-improved-location-controls.png new file mode 100644 index 0000000000..2a922786cc Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/focus-mode-improved-location-controls.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networkconsole-edit.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networkconsole-edit.png new file mode 100644 index 0000000000..a4e275cb83 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networkconsole-edit.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networking-search.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networking-search.png new file mode 100644 index 0000000000..0696d4e21e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/networking-search.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/protocol-handler.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/protocol-handler.png new file mode 100644 index 0000000000..06e28262e8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/protocol-handler.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/quickview-console.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/quickview-console.png new file mode 100644 index 0000000000..b5fd5e7d12 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/quickview-console.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/sources-search-all-files.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/sources-search-all-files.png new file mode 100644 index 0000000000..272f92b6e1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/sources-search-all-files.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md new file mode 100644 index 0000000000..9595c5d868 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md @@ -0,0 +1,157 @@ +--- +title: What's new in DevTools (Microsoft Edge 105) +description: "Focus Mode: Improved location controls for DevTools, Activity Bar, Quick View, and Improved reliability in Issues tool. And more." +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.prod: microsoft-edge +ms.date: 09/01/2022 +--- +# What's New in DevTools (Microsoft Edge 105) + +[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + +## Test your PWA's protocol handlers from the Application tool + + + + +In Microsoft Edge 105, the **Application** tool now supports testing protocol handlers. Since Microsoft Edge 96, you've been able to define protocol handlers in the application manifest of your Progressive Web App (PWA). Now you can test those protocols from the **Application** tool itself in DevTools if you have your PWA installed. + +With DevTools open for your PWA: + +1. Open the **Application** tool. +1. On the left, expand and select **Application** > **Manifest** > **Protocol Handlers**. +1. In the **Protocol Handlers** page, in the **Protocol Handlers** dropdown list, select the protocol you want to test. +1. In the text box, enter the URL or endpoint to test. +1. Click the **Test protocol** button. + +The **Application** tool will attempt to launch your PWA with the protocol and URL you specified. The browser asks for permission to open the application, and then prompts you to confirm that you want to handle the protocol and the app you want to launch. If you give permission, your app opens with the specified content. + +![Protocol Handler](./devtools-105-images/protocol-handler.png) + +See also: + +* [Test Progressive Web App (PWA) protocol handling](../../../progressive-web-apps/protocol-handlers.md) +* [Handle protocols in Progressive Web Apps](../../../../progressive-web-apps-chromium/how-to/handle-protocols.md) + + + +## Edit and resend network requests more reliably in the Network Console tool + + + + +Previously in Microsoft Edge, selecting **Edit and resend** for a network request from the Network tool may not have reliably opened the **Network Console** tool and pre-populated it with the values from the request. + +In Microsoft Edge 105, this issue has been fixed in the default UI. This issue will also be fixed in [Focus Mode](../../../experimental-features/focus-mode.md) in a future release. **Edit and resend** now pre-populates the **Network Console** tool with the values for the network request that you're looking to resend. You can continue to modify these values before sending the request from the **Network Console** tool. Thank you for sending us your feedback about this issue! + +Right-click the network request that you want to change and resend, and then select **Edit and Resend**: + +![Edit and Resend](./devtools-105-images/edit-and-resend.png) + +In the **Network Console**, edit the network request information, and then click the **Send** button: + +![Network Console Edit and Send](./devtools-105-images/networkconsole-edit.png) + +See also: +* [Starting from the Network tool](../../../network-console/network-console-tool.md#starting-from-the-network-tool) in _Compose and send web API requests using the Network Console tool_. + + + +## Focus Mode: Improved location controls for DevTools, Activity Bar, and Quick View + + + + +In Microsoft Edge 105, several improvements to location controls have been made in [Focus Mode](../../../experimental-features/focus-mode.md), including a new option for changing the orientation of **Quick View**. + +The **Customize and control DevTools** (**...**) menu now directly contains buttons to set the docking location of DevTools, instead of requiring opening a submenu. The **Dock location** icons now have greater contrast, and the currently selected **Dock location** button is now highlighted. + +This menu also now directly contains buttons to set and indicate where the **Activity Bar** is displayed, instead of using a submenu. + +Selecting the docking location in Focus Mode, in previous versions of Microsoft Edge: + +![Dock location menu icons before](./devtools-105-images/before-docking-menu.png) + +Selecting the docking location in Focus Mode, in Microsoft Edge 105: + +![Dock location menu icons after](./devtools-105-images/after-docking-menu.png) + +You can now change the orientation of the **Quick View** panel as well. To display **Quick View** vertically instead of horizontally, click the **Dock Quick View to right** button: + +![Docking Quick View to the right](./devtools-105-images/quickview-console.png) + +To return **Quick View** to the horizontal orientation, click the **Dock Quick View to bottom** button: + +![Docking Quick View to the bottom](./devtools-105-images/dock-quick-view-bottom.png) + +To minimize **Quick View** in either orientation, click the **Collapse Quick View** button, or press `Esc`: + +![Minimizing Quick View](./devtools-105-images/focus-mode-improved-location-controls.png) + +See also: +* [Simplify DevTools using Focus Mode](../../../experimental-features/focus-mode.md) + + + +## Fix: Search in the Sources and Network tools now works as expected in Focus Mode + + + + +In previous versions of Microsoft Edge, the Focus Mode experiment didn't properly showcase the **Search** feature in the **Network** tool or the **Search in all files** feature in the **Sources** tool. In Microsoft Edge 105, these issues have been fixed. + +You can now search in the **Network** tool via the **Search** icon: + +![Networking Search](./devtools-105-images/networking-search.png) + +To search in all files in the **Sources** tool, in the **Page** section, right-click the **top** window or any domain, and then select **Search in all files**: + +![Networking Search All](./devtools-105-images/sources-search-all-files.png) + +See also: +* [Simplify DevTools using Focus Mode](../../../experimental-features/focus-mode.md) +* [Search network headers and responses](../../../network/index.md#search-network-headers-and-responses) in _Inspect network activity_. +* [Find source files for a page using the Search tool](../../../search/search-tool.md) + + + +## Improved reliability in the Issues tool + + + + +In previous versions of Microsoft Edge, there was a bug that that caused issues to not appear in the **Issues** tool. This bug has been fixed in Microsoft Edge 105. + +See also: + +* [Find and fix problems using the Issues tool](../../../issues/index.md) + + + +## Announcements from the Chromium project + +Microsoft Edge 105 also includes the following updates from the Chromium project: + +* [Attach Wasm debugging information at runtime](https://developer.chrome.com/blog/new-in-devtools-105/#wasm) +* [Support live edit during debugging](https://developer.chrome.com/blog/new-in-devtools-105/#live-edit) +* [View and edit @scope at rules in the Styles pane](https://developer.chrome.com/blog/new-in-devtools-105/#scope) +* [Sourcemap improvements](https://developer.chrome.com/blog/new-in-devtools-105/#sourcemaps) + + + + + + + + + + + + diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md index 372f4c809b..039a35190e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md @@ -13,6 +13,7 @@ ms.date: 05/16/2022 +* [What's New in DevTools (Microsoft Edge 105)](2022/09/devtools-105.md) * [What's New in DevTools (Microsoft Edge 104)](2022/08/devtools-104.md) * [What's New in DevTools (Microsoft Edge 103)](2022/06/devtools-103.md) * [What's New in DevTools (Microsoft Edge 102)](2022/05/devtools-102.md) diff --git a/microsoft-edge/extensions-chromium/getting-started/media/part2-popupdialog.png b/microsoft-edge/extensions-chromium/getting-started/media/part2-popupdialog.png index e581a122f8..280d8ceace 100644 Binary files a/microsoft-edge/extensions-chromium/getting-started/media/part2-popupdialog.png and b/microsoft-edge/extensions-chromium/getting-started/media/part2-popupdialog.png differ diff --git a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md index 77c25a4b75..4e18dfd5eb 100644 --- a/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md +++ b/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md @@ -5,11 +5,13 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 06/28/2022 +ms.date: 08/05/2022 --- # Create an extension tutorial, part 2 -To see the completed extension package source for this part of the tutorial, go to [MicrosoftEdge-Extensions repo > extension-getting-started-part2](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2). The source code has been updated from Manifest V2 to Manifest V3. +To see the completed extension package source for this part of the tutorial, go to [MicrosoftEdge-Extensions repo > extension-getting-started-part2](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2). + +The source code has been updated from Manifest V2 to Manifest V3. This tutorial covers the following extension technologies: * Injecting JavaScript libraries into an extension. @@ -17,11 +19,11 @@ This tutorial covers the following extension technologies: * Including content pages in existing browser tabs. * Having content pages listen for messages from pop-ups and respond. -You'll learn to update your pop-up menu to replace your static stars image with a title and a standard HTML button. That button, when selected, passes that stars image, which is embedded in the extension, to the content page. That image, is inserted into the active browser tab. Follow the below steps for further details. +You'll learn to update your pop-up menu to replace your static stars image with a title and a standard HTML button. That button, when selected, passes that image of stars to the content page. This image is now embedded in the extension and inserted into the active browser tab. Here are the steps. -1. Remove the image from the pop-up and replace it with a button. +## Step 1: Remove the image from the pop-up and replace it with a button. -First, update your `popup.html` file with some straightforward markup that displays a title and a button. You'll program that button shortly, but for now, just include a reference to an empty JavaScript file `popup.js`. Here is the updated HTML: +Update your `popup.html` file with some straightforward markup that displays a title and a button. You'll later program that button in a different step, but for now include a reference to an empty JavaScript file `popup.js`. Below is a sample updated HTML: ```html @@ -56,15 +58,17 @@ After updating and opening the extension, a pop-up opens with a display button. -2. Update strategy to display image at the top of the browser tab +## Step 2: Update strategy to display image at the top of the browser tab After adding the button, the next task is to make it bring up the `images/stars.jpeg` image file at the top of the active tab page. -Remember, each tab page runs in its own thread. Also, the extension uses a different thread. First, create a content script that is injected into the tab page. Then, send a message from your pop-up to that content script running on the tab page. The content script receives the message, which describes which image should be displayed. +Each tab page (and extension) runs in its own thread. Create a content script that is injected into the tab page. Then, send a message from your pop-up to that content script running on the tab page. The content script will receive the message, which describes which image should be displayed. + -3. Create the pop-up JavaScript to send a message + +## Step 3: Create the pop-up JavaScript to send a message -First, create `popup/popup.js` and add code to send a message to your not-yet-created content script that you must momentarily create and inject into your browser tab. To do that, the following code adds an `onclick` event to your pop-up display button: +Create the `popup/popup.js` file and add code to send a message to your not-yet-created content script that you must momentarily create and inject into your browser tab. To do that, the following code adds an `onclick` event to your pop-up **Display** button: ```javascript const sendMessageId = document.getElementById("sendmessageid"); @@ -77,7 +81,11 @@ if (sendMessageId) { In the `onclick` event, find the current browser tab. Then, use the `chrome.tabs.sendmessage` Extension API to send a message to that tab. -In that message, you must include the URL to the image you want to display. Also, send a unique ID to assign to the inserted image. You could let the content insertion JavaScript generate that image ID, but for reasons that become apparent later, you'll generate that unique ID here in `popup.js`, and then pass that ID to the not-yet-created content script. +In that message, you must include the URL to the image you want to display. Also, make sure that you send a unique ID to assign to the inserted image. + +To send a unique ID to assign to the inserted image, a couple different approaches are possible: +* Approach 1: Let the content insertion JavaScript generate that image ID. We won't use that approach here, for reasons that become apparent later. +* Approach 2: Generate that unique ID here in `popup.js`, and then pass that ID to the not-yet-created content script. We'll use this approach. The following code outlines the updated code in `popup/popup.js`. You also pass in the current tab ID, which is used later in this article: @@ -141,9 +149,11 @@ if (sendMessageId) { --- -4. Make your `stars.jpeg` available from any browser tab -You're probably wondering why, when you pass the `images/stars.jpeg` must you use the `chrome.runtime.getURL` (or `chrome.extension.getURL` while using Manifest V2) API instead of just passing in the relative URL without the extra prefix like in the previous section. By the way, that extra prefix, returned by `getUrl` with the image attached looks something like the following: + +## Step 4: Make your `stars.jpeg` available from any browser tab + +When you pass the `images/stars.jpeg`, you must use the `chrome.runtime.getURL` API (or `chrome.extension.getURL` if using Manifest V2) instead of just passing in the relative URL without the extra prefix like in the previous section. That extra prefix is returned by `getUrl` with the image attached, and looks something like the following: ```http extension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg @@ -176,7 +186,9 @@ Add another entry in the `manifest.json` file to declare that the image is avail You've now written the code in your `popup.js` file to send a message to the content page that is embedded on the current active tab page, but you haven't created and injected that content page. Do that now. -5. Update your `manifest.json` for content and web access + + +## Step 5: Update your `manifest.json` for content and web access The updated `manifest.json` that includes the `content-scripts` and `web_accessible_resources` is as follows: @@ -247,15 +259,19 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi --- -The section you added is `content_scripts`. The `matches` attribute is set to ``, which means that all files in `content_scripts` are injected into all browser tab pages when each tab is loaded. The allowed files types that can be injected are JavaScript and CSS. You also added `lib\jquery.min.js`. You're able to include that from the download mentioned at the top of the section. +The `matches` attribute is set to ``, which means that all files in `content_scripts` are injected into all browser tab pages when each tab is loaded. The allowed files types that can be injected are JavaScript and CSS. You also added `lib\jquery.min.js`. You can include that from the download mentioned at the top of the section. -6. Add jQuery and understanding the associated thread +#### Add jQuery In the content scripts that you're injecting, plan on using jQuery (`$`). You added a minified version of jQuery and put it in your Extension package as `lib\jquery.min.js`. These content scripts run in individual sandboxes, which means that the jQuery injected into the `popup.js` page isn't shared with the content. -Keep in mind that even if the browser tab has JavaScript running on it on the loaded web page, any content injected doesn't have access to that. That injected JavaScript just has access to the actual DOM loaded in that browser tab. +#### Understanding the Thread + +Keep in mind that even if the browser tab has JavaScript running on it on the loaded web page, any content that's injected doesn't have access to that JavaScript. The injected JavaScript only has access to the actual DOM that's loaded in that browser tab. + -7. Add the content script message listener + +## Step 6: Add the content script message listener Here is that `content-scripts\content.js` file that gets injected into every browser tab page based on your `manifest.json` `content-scripts` section: diff --git a/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md b/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md index 6853cb80bf..ed92a33fbe 100644 --- a/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md +++ b/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md @@ -12,6 +12,24 @@ ms.date: 11/19/2021 Use these sample Progressive Web Apps (PWAs) to learn how to use features and APIs for PWAs. + +## PWAmp + +A desktop music player app. + +[App](https://microsoftedge.github.io/Demos/pwamp/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp). + +Features: + +* [Window Controls Overlay](how-to/window-controls-overlay.md) +* [Protocol handling](how-to/handle-protocols.md) +* [File handling](how-to/handle-files.md) +* [Web Share](how-to/share.md#sharing-content) +* [Share Target](how-to/share.md#receiving-shared-content) + +![Screenshot of the PWAmp app, showing playback buttons and a list of songs.](./media/pwamp.png) + + ## Webboard diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/handle-protocols.md b/microsoft-edge/progressive-web-apps-chromium/how-to/handle-protocols.md index d67033b568..248a75a0be 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/handle-protocols.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/handle-protocols.md @@ -22,7 +22,7 @@ To learn more about other existing protocols, see [List of URI schemes](https:// ## Register protocols to handle -To use Protocol Handling, declare which protocols your app handles. This is done in your app [manifest file](web-app-manifests.md), by using the `protocol_handlers` array member. +To use Protocol Handling, declare which protocols your app handles. This is done in your web app [manifest file](web-app-manifests.md), by using the `protocol_handlers` array member. Each entry in the `protocol_handlers` array contains a `protocol` string and a `url` string: @@ -39,9 +39,13 @@ Each entry in the `protocol_handlers` array contains a `protocol` string and a ` In the above example, the app is registered to handle the `mailto` protocol. When the operating system launches the app in response to the `mailto` protocol, the app navigates to the `/newEmail` URL, replacing the `%s` placeholder with the full URL that's being handled. +## Test protocols with the DevTools + +You can use the **Application** tool in Microsoft Edge DevTools to verify that Microsoft Edge successfully registered your app as a handler for the protocols you defined in your web app manifest. You can also test protocols and launch your PWA with different URLs and endpoints. For more information, see [Test Progressive Web App (PWA) protocol handling](../../devtools-guide-chromium/progressive-web-apps/protocol-handlers.md). ## See also * [Getting started with Protocol Handlers for your web app](https://blogs.windows.com/msedgedev/2022/01/20/getting-started-url-protocol-handlers-microsoft-edge/) * [URL protocol handler registration for PWAs](https://web.dev/url-protocol-handler/) +* [Test Progressive Web App (PWA) protocol handling](../../devtools-guide-chromium/progressive-web-apps/protocol-handlers.md) diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color.md b/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color.md index 0a103f90cc..d2aed365a9 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color.md @@ -60,7 +60,229 @@ Each icon in the `icons` array should come with at least the `src` and `sizes` p Learn more about [the icons member](https://developer.mozilla.org/docs/Web/Manifest/icons). - + + +## Icon image sizes + +Your PWA can be enhanced on Windows by supplying the images with specific dimensions in your web app manifest. We recommend choosing one of the options below: + +* Level 1: (Basic image support: 512x512) This is the base image from which to generate missing images. + +* Level 2: (Tiles) At this level, your web app manifest contains tile images for the default (1x) display scale. Each of the images must be in PNG format and have the `any` purpose set. Here is a list of recommended images and sizes. + + * 44x44 - app icon + * 71x71 - small tile + * 150x150 - medium tile + * 350x150 - wide tile + * 310x310 - large tile + * 50x50 - store logo + * 620x300 - splash screen + +* Level 3: (Tiles with display scales) At this level, your web app manifest should contain tile images for all Windows display scale sizes. Display scale is a user-configuration in Windows (users can change it by going to **Settings** > **Display** > **Scale**). Your web app manifest icons should include images with these dimensions: + + * 44x44 - app icon + * 55x55 - app icon 1.25x display scale + * 66x66 - app icon 1.5x display scale + * 88x88 - app icon 2x display scale + * 176x176 - app icon 4x display scale + * 71x71 - small tile + * 89x89 - small tile 1.25x display scale + * 107x107 - small tile 1.5x display scale + * 142x142 - small tile 2x display scale + * 284x284 - small tile 4x display scale + * 150x150 - medium tile + * 188x188 - medium tile 1.25x display scale + * 225x225 - medium tile 1.5x display scale + * 300x300 - medium tile 2x display scale + * 600x600 - medium tile 4x display scale + * 350x150 - wide tile + * 388x188 - wide tile 1.25x display scale + * 465x225 - wide tile 1.5x display scale + * 620x300 - wide tile 2x display scale + * 1240x600 - wide tile 4x display scale + * 310x310 - large tile + * 388x388 - large tile 1.25x display scale + * 465x465 - large tile 1.5x display scale + * 620x620 - large tile 2x display scale + * 1240x1240 - large tile 4x display scale + * 50x50 - store tile + * 63x63 - store tile 1.25x display scale + * 75x75 - store tile 1.5x display scale + * 100x100 - store tile 2x display scale + * 200x200 - store tile 4x display scale + * 620x300 - splash screen + * 775x375 - splash screen 1.25x display scale + * 930x450 - splash screen 1.5x display scale + * 1240x600 - splash screen 2x display scale + * 2480x1200 - splash screen 4x display scale + +* Level 4 (Tiles, display scales, and target sizes) At this level you supply images for tiles with display scales and target size images for display in various surfaces in Windows, including taskbar, start menu, task manager, ALT+Tab task switcher, and more. This provides the best experience for your users, but also requires the most developer effort. Your web app manifest icons should include images with these dimensions: + + * 44x44 - app icon + * 55x55 - app icon 1.25x display scale + * 66x66 - app icon 1.5x display scale + * 88x88 - app icon 2x display scale + * 176x176 - app icon 4x display scale + * 71x71 - small tile + * 89x89 - small tile 1.25x display scale + * 107x107 - small tile 1.5x display scale + * 142x142 - small tile 2x display scale + * 284x284 - small tile 4x display scale + * 150x150 - medium tile + * 188x188 - medium tile 1.25x display scale + * 225x225 - medium tile 1.5x display scale + * 300x300 - medium tile 2x display scale + * 600x600 - medium tile 4x display scale + * 350x150 - wide tile + * 388x188 - wide tile 1.25x display scale + * 465x225 - wide tile 1.5x display scale + * 620x300 - wide tile 2x display scale + * 1240x600 - wide tile 4x display scale + * 310x310 - large tile + * 388x388 - large tile 1.25x display scale + * 465x465 - large tile 1.5x display scale + * 620x620 - large tile 2x display scale + * 1240x1240 - large tile 4x display scale + * 50x50 - store tile + * 63x63 - store tile 1.25x display scale + * 75x75 - store tile 1.5x display scale + * 100x100 - store tile 2x display scale + * 200x200 - store tile 4x display scale + * 620x300 - splash screen + * 775x375 - splash screen 1.25x display scale + * 930x450 - splash screen 1.5x display scale + * 1240x600 - splash screen 2x display scale + * 2480x1200 - splash screen 4x display scale + * 16x16 - target size for taskbar, start menu, task manager + * 20x20 - target size for taskbar, start menu, task manager + * 24x24 - target size for taskbar, start menu, task manager + * 30x30 - target size for taskbar, start menu, task manager + * 32x32 - target size for taskbar, start menu, task manager + * 36x36 - target size for taskbar, start menu, task manager + * 40x40 - target size for taskbar, start menu, task manager + * 44x44 - target size for taskbar, start menu, task manager + * 48x48 - target size for taskbar, start menu, task manager + * 60x60 - target size for taskbar, start menu, task manager + * 64x64 - target size for taskbar, start menu, task manager + * 72x72 - target size for taskbar, start menu, task manager + * 80x80 - target size for taskbar, start menu, task manager + * 96x96 - target size for taskbar, start menu, task manager + * 256x256 - target size for taskbar, start menu, task manager + +### Image level summary + +Consider, for example, how your app icon might show different content depending on the available surface area: + +* Small surface: App icon (44x44) in taskbar, showing a small, abbreviated logo: + +![The small size icon](../media/windows-image-app-icon.png) + +* Larger surface: Medium tile (150x150) in start menu, showing the full logo of the app: + +![The medium size icon.](../media/windows-image-small-tile.png) + +* Wide surface: Wide tile in start menu, showing a more articulated app icon: + +![The wide size icon](../media/windows-image-wide-tile.png) + +Notice how the content of the icon changed. This is possible only through the use of higher levels of icon support. We recommend developers choose higher levels to give the best experience for your Windows users. + +### Icon descriptions + +Below you'll find a description of each app icon and where they show up in Windows. + +The normal app icon that's shown in the start menu, task bar, or task manager. + +![App Icon](../media/windows-image-app-icon.png) + +* 44x44 +* 55x55 (1.25x scale) +* 66x66 (1.5x scale) +* 88x88 (2x scale) +* 176x176 (4x scale) + +The small tile is shown in the start menu when the user set your app's tile to small size. + +![Small tile](../media/windows-image-small-tile.png) + +* 71x71 +* 89x89 (1.25x scale) +* 107x107 (1.5x scale) +* 142x142 (2x scale) +* 284x284 (4x scale) + +The medium tile icon is shown in the start menu when the user sets your app's tile to medium size. + +![Medium tile](../media/windows-image-medium-tile.png) + +* 150x150 +* 188x188 (1.25x scale) +* 225x225 (1.5x scale) +* 300x300 (2x scale) +* 600x600 (4x scale) + +The wide tile icon is shown in the start menu when the user sets your app's tile to wide size. + +![Wide tile](../media/windows-image-wide-tile.png) + +* 310x150 +* 388x188 (1.25x scale) +* 465x225 (1.5x scale) +* 620x300 (2x scale) +* 1240x600 (4x scale) + +The large tile icon is in the start menu when the user sets your app's tile to large size. + +![Large tile](../media/windows-image-large-tile.png) + +* 310x310 +* 388x388 (1.25x scale) +* 465x465 (1.5x scale) +* 620x620 (2x scale) +* 1240x1240 (4x scale) + +The store logo icon is shown in app installer, Windows Partner Center, the "Report an app" option in the Store, and the "Write a review" option in the Store. + +![Store Logo](../media/windows-image-store-logo.png) + +* 50x50 +* 63x63 (1.25x scale) +* 75x75 (1.5x scale) +* 100x100 (2x scale) +* 200x200 (4x scale) + +The splash screen asset is shown as the splash screen for your app. Currently supported only in classic package. In the future, we may add support for the modern hosted app package as well. + +![Splash Screen](../media/windows-image-splash.png) + +* 620x300 +* 775x375 (1.25x scale) +* 930x450 (1.5x scale) +* 1240x600 (2x scale) +* 2480x1200 (4x scale) + +### Target sized images + +In addition to the standard scale factor sizes described above, we also recommend creating "target-size" assets. We call these assets target-size because they target specific sizes, such as 16 pixels, rather than specific scale factors, such as 400. Target-size assets are for Windows surfaces that don't use the scaling plateau system. + +For example, the **Apps & features** Windows setting uses app icons with specific sizes + +![Shown in start jump list, shortcuts, control panel:](../media/windows-image-target-size.png) + +* 16x16 (recommended) +* 20x20 +* 24x24 (recommended) +* 30x30 +* 32x32 (recommended) +* 36x36 +* 40x40 +* 48x48 (recommended) +* 60x60 +* 64x64 +* 72x72 +* 80x80 +* 96x96 +* 256x256 (recommended) @@ -91,4 +313,5 @@ Individual web pages can also define a theme color, by using the [`theme-color` ## See also -* [PWABuilder Image Generator](https://www.pwabuilder.com/imageGenerator) +* [PWABuilder Image Generator](https://www.pwabuilder.com/imageGenerator) +* [Image recommendations for Windows PWA packages](https://blog.pwabuilder.com/docs/image-recommendations-for-windows-pwa-packages/) diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/index.md b/microsoft-edge/progressive-web-apps-chromium/how-to/index.md index a14103f02a..e3814a17d7 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/index.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/index.md @@ -5,17 +5,15 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 06/07/2022 +ms.date: 08/18/2022 --- # Get started with Progressive Web Apps - - -Progressive Web Apps (PWAs) are web apps that are [progressively enhanced](https://en.wikipedia.org/wiki/Progressive_enhancement). The progressive enhancements include app-like features, such as installation, offline support, and push notifications. +Progressive Web Apps (PWAs) are websites that are [progressively enhanced](https://en.wikipedia.org/wiki/Progressive_enhancement). The progressive enhancements include app-like features, such as installation, offline support, and push notifications. You can also package your PWA for app stores, such as Microsoft Store, Google Play, and Mac App Store. The Microsoft Store is the commercial app store that's built into Windows 10 and later. -In this overview of PWA basics, you create a simple web app and extend it as a PWA. The finished project works across modern browsers. +In this overview of PWA basics, you create a simple website and extend it as a PWA. The finished project works across modern browsers. > [!TIP] > You can use [PWABuilder](https://www.pwabuilder.com) to create a new PWA, enhance your existing PWA, or package your PWA for app stores. @@ -28,39 +26,55 @@ To install or run a PWA on Windows, see [Installing a PWA](../ux.md#installing-a ## Prerequisites * Install [Visual Studio Code](https://code.visualstudio.com) to edit your PWA source code. -* Install [Node.js](https://nodejs.org) as your local web server. +* Install [Node.js](https://nodejs.org) to use it as your local web server. -## Creating a basic web app +## Creating a basic website + +In this step, you will create a simple HTML page to create a basic website, and will start a local web server to access the website in your browser. + +1. Create a new directory called `MySamplePWA` on your computer. -To create an empty web app, follow the steps in [Node Express App Generator](https://expressjs.com/starter/generator.html), and name your app `MySamplePwa`. +1. Open Visual Studio Code, select **File** > **Open Folder** and then select the `MySamplePWA` directory to open your new project. -In the prompt, run the following commands, which create an empty web app and install any dependencies: +1. Create a new file in the project by pressing `Ctrl+N`, add the following content, and save the file as `index.html`: -```Shell -npx express-generator --no-view -``` + ```html + + + + + + + My Sample PWA + + +

My Sample PWA

+ + + ``` -```Shell -npm install -``` +1. Start a local web server by using the `http-server` Node.js library: -You now have a simple, functional web app. To start your web app, run the following command: + ```shell + cd path\to\MySamplePWA + npx http-server + ``` + + In the above commands, replace `path\to\MySamplePWA` with the actual path where you create the `MySamplePWA` folder. -```Shell -npm start -``` +You now have a simple, functional website running on a local web server. -Now browse to `http://localhost:3000` to view your new web app. +Now browse to `http://localhost:8080` to view your new website. -![Running your new PWA on localhost.](../media/visual-studio-nodejs-express-index.png) +![Running your new PWA on localhost.](../media/sample-pwa-app.png) ## Getting started building a PWA -Now that you have a simple web app, extend it as a Progressive Web App (PWA) by adding the three requirements for PWAs: +Now that you have a simple website, extend it as a Progressive Web App (PWA) by adding the three requirements for PWAs: * [HTTPS](#step-1---use-https). * A [Web App Manifest](#step-2---create-a-web-app-manifest). @@ -70,11 +84,13 @@ Now that you have a simple web app, extend it as a Progressive Web App (PWA) by ## Step 1 - Use HTTPS -Key parts of the Progressive Web Apps platform, such as [Service Workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API), require using HTTPS. When your PWA goes live, you must publish it to an HTTPS URL. Many hosts now offer HTTPS by default, but if your host doesn't, Let's Encrypt offers a free alternative for creating the necessary certificates. +Key parts of the Progressive Web Apps platform, such as [Service Workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API), require using HTTPS. When your PWA goes live, you must publish it to an HTTPS URL. Many hosts now offer HTTPS by default, but if your host doesn't, [Let's Encrypt](https://letsencrypt.org/) offers a free alternative for creating the necessary certificates. -For debugging purposes, Microsoft Edge also permits `http://localhost` to use the PWA APIs. In this tutorial, you use `http://localhost` to build your PWA. +For example, you can create an [Azure free account](https://azure.microsoft.com/free). If you host your website on the [Microsoft Azure App Service](https://azure.microsoft.com/services/app-service/web), it's served over HTTPS by default. -[Publish your web app as a live site](/azure/javascript/tutorial-vscode-azure-app-service-node-03), but make sure your server is configured for HTTPS. For example, you can create an [Azure free account](https://azure.microsoft.com/free). If you host your app site on the [Microsoft Azure App Service](https://azure.microsoft.com/services/app-service/web), it's served over HTTPS by default. +You can also host your website on [GitHub Pages](https://pages.github.com/) which supports HTTPS too. + +For debugging purposes, Microsoft Edge also permits a `localhost` web server to use the PWA APIs without HTTPS. In this tutorial, you use `http://localhost:8080` to build your PWA. @@ -82,11 +98,9 @@ For debugging purposes, Microsoft Edge also permits `http://localhost` to use th A [Web App Manifest](https://developer.mozilla.org/docs/Web/Manifest) is a JSON file containing metadata about your app, such as name, description, icons, and more. -To add an app manifest to the web app: +To add an app manifest to the website: -1. In Visual Studio Code, select **File** > **Open Folder** and then select the `MySamplePwa` directory that you created earlier. -1. Press `Ctrl`+`N` to create a new file. -1. Copy and paste the following code into the new file: +1. In Visual Studio Code, press `Ctrl`+`N` to create a new file with the following content, and save the file as `manifest.json`. ```json { @@ -108,24 +122,31 @@ To add an app manifest to the web app: } ``` -1. Save the file as `/MySamplePwa/public/manifest.json`. -1. Add a 512x512 app icon image named `icon512.png` to `/MySamplePwa/public/images`. You can use the [sample image](../media/progressive-web-app.png) for testing purposes. -1. In Visual Studio Code, open `/public/index.html`, and add the following code inside the `` tag. +1. Add a 512x512 pixel app icon image named `icon512.png` to your project. You can use the [sample image](../media/progressive-web-app.png) for testing purposes. + +1. In Visual Studio Code, open `index.html`, and add the following code inside the `` tag. ```html ``` + The above code snippet links the new web app manifest file to your website. + +Your VS Code project should now look somewhat like this: + +![Screenshot of VS Code showing the sample PWA project, with the index.html, manifest.json, and icon files](../media/visual-studio-project-with-manifest.png) + ## Step 3 - Add a Service Worker Service workers are the key technology behind PWAs. Service workers enable scenarios that were previously limited to native apps, including: + * Offline support. * Advanced caching. * Running background tasks. -Service workers are specialized [Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) that intercept network requests from your web app. Service workers can run tasks even when your PWA isn't running, including: +Service workers are specialized [Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) that intercept network requests from your PWA. Service workers can run tasks even when your PWA isn't running, including: * Serving requested resources from a cache. * Sending push notifications. @@ -134,49 +155,90 @@ Service workers are specialized [Web Workers](https://developer.mozilla.org/docs Service workers are defined in a special JavaScript file, described in [Using Service Workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers) and [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API). -To build a service worker in your project, use the **Cache-first network** Service Worker recipe from PWA Builder, as follows. - -1. Copy the source files [pwabuilder-sw-register.js](https://github.com/pwa-builder/pwabuilder-serviceworkers/blob/master/serviceWorker6/pwabuilder-sw-register.js) and [pwabuilder-sw.js](https://github.com/pwa-builder/pwabuilder-serviceworkers/blob/master/serviceWorker6/pwabuilder-sw.js) to the `public` folder in your web app project. +To add a service worker in your project: + +1. In VS Code, create a new file (`Ctrl`+`N`), add the following content, and save the file as `sw.js`: + + ```javascript + const CACHE_NAME = `my-sample-app-cache-v1`; + + // Use the install event to pre-cache all initial resources. + self.addEventListener('install', event => { + event.waitUntil((async () => { + const cache = await caches.open(CACHE_NAME); + cache.addAll(['/']); + })()); + }); + + self.addEventListener('fetch', event => { + event.respondWith((async () => { + const cache = await caches.open(CACHE_NAME); + + try { + // Try to fetch the resource from the network. + const fetchResponse = await fetch(event.request); + + // Save the resource in the cache. + cache.put(event.request, fetchResponse.clone()); + + // And return it. + return fetchResponse; + } catch (e) { + // Fetching didn't work get the resource from the cache. + const cachedResponse = await cache.match(event.request); + + // And return it. + return cachedResponse; + } + })()); + }); + ``` -1. In Visual Studio Code, open `/public/index.html`. + The `sw.js` file will act as your PWA's service worker. The code above listens to the `install` event and uses it to cache the request to the home page. The code also intercepts `fetch` events, which happen every time your app sends a request to the server, and applies a network-first strategy. The service worker relays requests to the server, and caches the result. When a network request fails, the cached response is used instead. -1. Inside the `` tag, add the following code. +1. Open `index.html` and add the following code at the end of the `` tag to register your servier worker: ```html - + ``` -Your web app now has a service worker that uses the cache-first strategy. The new service worker fetches resources from the cache first, and from the network only as needed. Cached resources include images, JavaScript, CSS, and HTML. +To confirm that your service worker is running: -Confirm that your service worker runs, as follows: +1. Go to your web app at `http://localhost:8080`. -1. Go to your web app at `http://localhost:3000`. If your web app isn't available, run the following command: +1. In Microsoft Edge, press `F12` to open DevTools. Open the **Application** tool, then **Service Workers** to view the service workers. If the service worker isn't displayed, refresh the page. - ```Shell - npm start - ``` + ![The DevTools Application tool, showing the Service Workers panel, with the new sw.js worker running](../media/devtools-sw-overview.png) + +1. View the service worker cache by expanding **Cache Storage** and selecting **my-sample-app-cache-v1**. All of the resources cached by the service worker should be displayed. The resources cached by the service worker include the app icon, app manifest, and the initial page. -1. In Microsoft Edge, select `F12` to open DevTools. Select **Application**, then **Service Workers** to view the service workers. If the service worker isn't displayed, refresh the page. + ![DevTools, showing where to view the cached resources](../media/devtools-cache.png) - ![DevTools Service Worker overview.](../media/devtools-sw-overview.png) - +1. Try your PWA as an offline app. In DevTools, open the **Network** tool, and change the **Throttling** value to **Offline**. -1. View the service worker cache by expanding **Cache Storage** and select **pwabuilder-precache**. All of the resources cached by the service worker should be displayed. The resources cached by the service worker include the app icon, app manifest, CSS, and JavaScript files. +1. Refresh your app. It should still appear correctly in the browser, using cached resources served by the service worker. + + ![DevTools, showing where to switch the Throttling value to Offline](../media/devtools-offline.png) + + + +## Install the app - ![Service Worker cache in DevTools.](../media/devtools-cache.png) - +Now that your simple website has a web app manifest and a service worker, supporting browsers can install it as a PWA. -1. Try your PWA as an offline app, as follows. In DevTools, select **Network**, and then change the status from **Online** to **Offline**. +In Microsoft Edge, once you refresh your app, the **App available** button appears in the address bar. Clicking the **App available** button prompts you to install the app locally. - ![Setting the app to offline mode in DevTools.](../media/devtools-offline.png) - +![Microsoft Edge, with the sample PWA in a tab. The App available button in the address bar has been clicked and the installation prompt is displayed](../media/sample-pwa-app-available-button.png) -1. Refresh your app. It should display the offline mechanism for serving the resources of your app from the cache. +Click **Install** to install the app locally. After the installation completes, your app is displayed in its own window, and its own application icon in the Taskbar. - ![A PWA running offline.](../media/visual-studio-nodejs-express-index.png) +![The sample PWA, installed and running in its own window](../media/sample-pwa-installed.png) -The app can now be installed. - +To learn more about installing PWAs, see [The user experience of PWAs](../ux.md). @@ -209,7 +271,7 @@ Provide a rich [Offline experience](offline.md). Make the app work even if the ### Use validation and testing practices -Use software validation and testing practices. Use code quality tools such as the [Webhint](https://webhint.io) linter to optimize the efficiency, robustness, safety, and accessibility of your app. +Use software validation and testing practices. Use code quality tools such as [Webhint](https://webhint.io) to optimize the efficiency, robustness, safety, and accessibility of your app. Use automated testing tools such as [Playwright](https://playwright.dev/) to create reliable end-to-end testing for your app. diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay.md b/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay.md index f143ab4cae..1528cad91a 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay.md @@ -6,15 +6,15 @@ ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge ms.technology: pwa -ms.date: 09/02/2021 +ms.date: 09/01/2022 --- # Display content in the title bar -A PWA can define how it should be displayed on mobile platforms, by using the [display](https://developer.mozilla.org/docs/Web/Manifest/display) property in the app manifest file. However, to create an immersive, native-like experience, _desktop_ PWAs can't use this approach. +A PWA can define how it should be displayed on mobile platforms, by using the [display](https://developer.mozilla.org/docs/Web/Manifest/display) member in the web app manifest file. However, to create an immersive, native-like experience, _desktop_ PWAs can use another approach. -By default, the app area starts immediately below the reserved title bar area: +By default, a PWA installed on desktop can display content in an area that starts immediately below the reserved title bar area: -![The default Windows app title bar shown on the My Tracks demo app.](../media/my-tracks-titlebar.png) +![A PWA app on Windows showing that the app content is displayed below the reserved title bar area.](../media/wco-reserved-titlebar.png) Displaying content where the title bar normally is can help PWAs feel more native. Many desktop applications, such as Visual Studio Code, Microsoft Teams, and Microsoft Edge already do this: @@ -26,24 +26,6 @@ The Window Controls Overlay API does the following: * Makes it possible for your content to stay clear of this overlay. - -## Enable the Window Controls Overlay API in Microsoft Edge - -The Window Controls Overlay API is experimental and must be enabled in Microsoft Edge, to use it. - -To enable the Window Controls Overlay API: - -1. In Microsoft Edge, go to `edge://flags`. -1. Select **Search flags** and then type "window controls overlay". -1. Select **Default** > **Enabled** > **Restart**. - - ![Enable the Window Controls Overlay API experiment.](../media/enable-window-controls-overlay-experiment.png) - -The Window Controls Overlay API is also available as an origin trials feature. For your app's users to benefit from the Window Controls Overlay without having to enable it in Microsoft Edge, you can use an origin trial. - -For more information about Origin Trials, go to [Microsoft Edge Origin Trials Developer Console](https://developer.microsoft.com/microsoft-edge/origin-trials). - - ## Enable the Window Controls Overlay in your app @@ -51,7 +33,7 @@ The first thing to do is to enable the Window Controls Overlay feature in your a ```json { - "display_override": ["window-controls-overlay"] + "display_override": ["window-controls-overlay"] } ``` @@ -61,7 +43,7 @@ The first thing to do is to enable the Window Controls Overlay feature in your a When the Window Controls Overlay feature is enabled, the user can choose to have the title bar or not, by clicking the title bar toggle button: -![Select the title bar toggle button.](../media/my-tracks-titlebar-toggle.png) +![Select the title bar toggle button.](../media/wco-toggle-button.png) Your code can't assume that the window controls overlay is displayed, because: * The user can choose whether to display the title bar. @@ -79,20 +61,20 @@ Four environment variables are added by the Window Controls Overlay feature: | Variable | Description | |:--- |:--- -| `titlebar-area-x` | Distance, in `px`, of the overlay from the left side of the window | -| `titlebar-area-y` | Distance, in `px`, of the overlay from the top side of the window | -| `titlebar-area-width` | Width of the overlay, in `px` | -| `titlebar-area-height` | Height of the overlay, in `px` | +| `titlebar-area-x` | Distance, in `px`, of the area normally occupied by the title bar from the left side of the window | +| `titlebar-area-y` | Distance, in `px`, of the area normally occupied by the title bar from the top side of the window | +| `titlebar-area-width` | Width of the title bar area, in `px` | +| `titlebar-area-height` | Height of the title bar area, in `px` | -You can use these environment variables to position and size your app's title bar: +You can use these environment variables to position and size your own content where the title bar would normally appear, when the window controls overlay feature is disabled: ```css #title-bar { - position: fixed; - left: env(titlebar-area-x); - top: env(titlebar-area-y); - height: env(titlebar-area-height); - width: env(titlebar-area-width); + position: fixed; + left: env(titlebar-area-x, 0); + top: env(titlebar-area-y, 0); + height: env(titlebar-area-height, 50px); + width: env(titlebar-area-width, 100%); } ``` @@ -100,22 +82,24 @@ Using `position: fixed;` makes sure your title bar does not scroll with the rest Knowing where the overlay is and how big it is is important. The overlay might not always be on the same side of the window; on macOS, the overlay is on the left side, but on Windows, the overlay is on the right side. Also, the overlay might not always be the same size. +The `env()` CSS function takes a second parameter that's useful for defining the position of your app content when the window controls overlay feature is missing or disabled. + ## Make regions of your app drag handlers for the window -When the title bar is hidden, only the system-critical window controls remain visible (the **Maximize**, **Minimize**, **Close**, and **App Info** icons). This means that there is very little space available for users to move the app around. +When the title bar is hidden, only the system-critical window controls remain visible (the **Maximize**, **Minimize**, **Close**, and **App Info** icons). This means that there is very little space available for users to move the application window around. You can use the `-webkit-app-region` CSS property to offer more ways for users to drag the app. For example, if your app has its own titlebar, you can turn its titlebar into a window drag handler: ```css #title-bar { - position: absolute; - left: env(titlebar-area-x); - top: env(titlebar-area-y); - height: env(titlebar-area-height); - width: env(titlebar-area-width); - -webkit-app-region: drag; + position: fixed; + left: env(titlebar-area-x, 0); + top: env(titlebar-area-y, 0); + height: env(titlebar-area-height, 50px); + width: env(titlebar-area-width, 100%); + -webkit-app-region: drag; } ``` @@ -123,12 +107,11 @@ You can use the `-webkit-app-region` CSS property to offer more ways for users t ## React to overlay changes -A user can toggle the title bar or change the window dimensions while the app is running. Knowing when these things happen can be important for your app. Your app might need to rearrange some of the content that's displayed in the title bar, or rearrange your layout elsewhere on the page. +A user can toggle the title bar or change the window dimensions while the app is running. Knowing when these things happen can be important for your app. Your app might need to rearrange some of the content that's displayed in the title bar, or rearrange the layout elsewhere on the page. -To listen for changes, use the `geometrychange` event. To detect whether the title bar is visible, use the `visible` property on the `navigator.windowControlsOverlay` object. +To listen for changes, use the `geometrychange` event on the `navigator.windowControlsOverlay` object. To detect whether the title bar is visible, use the `visible` property on the `navigator.windowControlsOverlay` object. -> [!NOTE] -> The `geometrychange` is fired very frequently when the user resizes the window. To avoid running layout-changing code too often and causing performance problems in your app, use a `debounce` function to limit how many times the event is handled. See [The Difference Between Throttling and Debouncing](https://css-tricks.com/the-difference-between-throttling-and-debouncing/). +Note that the `geometrychange` is fired very frequently when the user resizes the window. To avoid running layout-changing code too often and causing performance problems in your app, use a `debounce` function to limit how many times the event is handled. See [The Difference Between Throttling and Debouncing](https://css-tricks.com/the-difference-between-throttling-and-debouncing/). ```javascript const debounce = (func, wait) => { @@ -144,14 +127,15 @@ const debounce = (func, wait) => { }; if ('windowControlsOverlay' in navigator) { - navigator.windowControlsOverlay.addEventListener('geometrychange', debounce(e => { - // Detect if the Window Controls Overlay is visible. - const isOverlayVisible = navigator.windowControlsOverlay.visible; - // Get the size and position of the title bar area. - const titleBarRect = e.titlebarAreaRect; - - console.log(`The overlay is ${isOverlayVisible ? 'visible' : 'hidden'}, the title bar width is ${titleBarRect.width}px`); - }, 200)); + navigator.windowControlsOverlay.addEventListener('geometrychange', debounce(e => { + // Detect if the Window Controls Overlay is visible. + const isOverlayVisible = navigator.windowControlsOverlay.visible; + + // Get the size and position of the title bar area. + const titleBarRect = e.titlebarAreaRect; + + console.log(`The overlay is ${isOverlayVisible ? 'visible' : 'hidden'}, the title bar width is ${titleBarRect.width}px`); + }, 200)); } ``` @@ -159,25 +143,23 @@ if ('windowControlsOverlay' in navigator) { ## Demo app -My Tracks is a PWA demo app that uses the Window Controls Overlay feature. - -1. In Microsoft Edge, [Enable the Window Controls Overlay](#enable-the-window-controls-overlay-in-your-app). +1DIV is a PWA demo app that uses the Window Controls Overlay feature. -2. Go to [My Tracks](https://captainbrosset.github.io/mytracks/) and install the app. +1. In Microsoft Edge, go to [1DIV](https://microsoftedge.github.io/Demos/1DIV/dist/) and install the app. -3. Select the **Hide title bar** button from the app title bar. +1. Click **Hide title bar** in the app title bar. - The app now displays content all the way to the top of the window frame, where the title bar used to be. The top area of the map is a drag handler, to let the user move the window. + The app now displays content all the way to the top of the window frame, where the title bar used to be. The top area of the app is a drag handler, to let users move the window. - ![The top area of the map can be used to move the window.](../media/my-tracks-draggable-titlebar.png) + ![The top area of the map can be used to move the window.](../media/wco-draggable-titlebar.png) -The source code for this app is in the [My Tracks](https://github.com/captainbrosset/mytracks) repo. +The source code for this demo app is in the [1DIV](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV) repo. -* The [manifest.json](https://github.com/captainbrosset/mytracks/blob/main/mytracks/manifest.json) source file declares the app's use of the Window Controls Overlay feature. +* The [manifest.json](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/dist/manifest.json) source file declares the app's use of the Window Controls Overlay feature. -* The [overlay.js](https://github.com/captainbrosset/mytracks/blob/main/src/overlay.js) source file uses the `navigator.windowControlsOverlay` object. +* The [app.js](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/src/app.js) source file uses the `navigator.windowControlsOverlay` object. -* The [style.css](https://github.com/captainbrosset/mytracks/blob/main/mytracks/style.css) source file uses the `titlebar-area-height` CSS environment variable. +* The [app.css](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/dist/app.css) source file uses the `titlebar-area-*` CSS environment variables. diff --git a/microsoft-edge/progressive-web-apps-chromium/media/devtools-cache.png b/microsoft-edge/progressive-web-apps-chromium/media/devtools-cache.png index cc9a98dd39..067668cfb2 100644 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/devtools-cache.png and b/microsoft-edge/progressive-web-apps-chromium/media/devtools-cache.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/devtools-offline.png b/microsoft-edge/progressive-web-apps-chromium/media/devtools-offline.png index 369e370840..880d1cb7b9 100644 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/devtools-offline.png and b/microsoft-edge/progressive-web-apps-chromium/media/devtools-offline.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/devtools-sw-overview.png b/microsoft-edge/progressive-web-apps-chromium/media/devtools-sw-overview.png index 944093de83..fb581f5049 100644 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/devtools-sw-overview.png and b/microsoft-edge/progressive-web-apps-chromium/media/devtools-sw-overview.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-draggable-titlebar.png b/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-draggable-titlebar.png deleted file mode 100644 index caef8ea3df..0000000000 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-draggable-titlebar.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-titlebar-toggle.png b/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-titlebar-toggle.png deleted file mode 100644 index f43af93f0e..0000000000 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-titlebar-toggle.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-titlebar.png b/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-titlebar.png deleted file mode 100644 index 3843da16a8..0000000000 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/my-tracks-titlebar.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/progressive-web-app.png b/microsoft-edge/progressive-web-apps-chromium/media/progressive-web-app.png index a894f5379f..8816c8c989 100644 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/progressive-web-app.png and b/microsoft-edge/progressive-web-apps-chromium/media/progressive-web-app.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/pwamp.png b/microsoft-edge/progressive-web-apps-chromium/media/pwamp.png new file mode 100644 index 0000000000..f2e6207162 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/pwamp.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-app-available-button.png b/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-app-available-button.png new file mode 100644 index 0000000000..fe711dd7bc Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-app-available-button.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-app.png b/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-app.png new file mode 100644 index 0000000000..60ec764c12 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-app.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-installed.png b/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-installed.png new file mode 100644 index 0000000000..02e7d9b098 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/sample-pwa-installed.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/visual-studio-nodejs-express-index.png b/microsoft-edge/progressive-web-apps-chromium/media/visual-studio-nodejs-express-index.png deleted file mode 100644 index f177141e2b..0000000000 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/visual-studio-nodejs-express-index.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/visual-studio-project-with-manifest.png b/microsoft-edge/progressive-web-apps-chromium/media/visual-studio-project-with-manifest.png new file mode 100644 index 0000000000..78cb4f9977 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/visual-studio-project-with-manifest.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/vscode-titlebar.png b/microsoft-edge/progressive-web-apps-chromium/media/vscode-titlebar.png index 9f689f518c..4fb74a3310 100644 Binary files a/microsoft-edge/progressive-web-apps-chromium/media/vscode-titlebar.png and b/microsoft-edge/progressive-web-apps-chromium/media/vscode-titlebar.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/wco-draggable-titlebar.png b/microsoft-edge/progressive-web-apps-chromium/media/wco-draggable-titlebar.png new file mode 100644 index 0000000000..7a16c91e47 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/wco-draggable-titlebar.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/wco-reserved-titlebar.png b/microsoft-edge/progressive-web-apps-chromium/media/wco-reserved-titlebar.png new file mode 100644 index 0000000000..8a17a2153f Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/wco-reserved-titlebar.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/wco-toggle-button.png b/microsoft-edge/progressive-web-apps-chromium/media/wco-toggle-button.png new file mode 100644 index 0000000000..e3c4090caa Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/wco-toggle-button.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-app-icon.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-app-icon.png new file mode 100644 index 0000000000..19b2d8cca2 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-app-icon.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-display-scales.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-display-scales.png new file mode 100644 index 0000000000..4a6f7c2a22 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-display-scales.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-large-tile.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-large-tile.png new file mode 100644 index 0000000000..a39ad7323f Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-large-tile.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-medium-tile.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-medium-tile.png new file mode 100644 index 0000000000..6572d37ddf Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-medium-tile.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-small-tile.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-small-tile.png new file mode 100644 index 0000000000..312b7e0086 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-small-tile.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-splash.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-splash.png new file mode 100644 index 0000000000..717466e26e Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-splash.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-store-logo.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-store-logo.png new file mode 100644 index 0000000000..3005eb4366 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-store-logo.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-target-size.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-target-size.png new file mode 100644 index 0000000000..60628432ab Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-target-size.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/media/windows-image-wide-tile.png b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-wide-tile.png new file mode 100644 index 0000000000..0a7fd9c6b6 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/media/windows-image-wide-tile.png differ diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 73cfa63794..ea73d0e406 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -32,6 +32,10 @@ # What's New pages ------------------------------------------------------------ # also add new pages to nav page: /whats-new/whats-new.md + - name: Microsoft Edge 105 + href: devtools-guide-chromium/whats-new/2022/09/devtools-105.md + displayName: what's new, announcements, release notes + - name: Microsoft Edge 104 href: devtools-guide-chromium/whats-new/2022/08/devtools-104.md displayName: what's new, announcements, release notes @@ -161,7 +165,7 @@ items: - name: Emulate mobile devices (Device Emulation) # orig: Simulate mobile devices with Device Mode href: devtools-guide-chromium/device-mode/index.md - displayName: Device Emulation, Device Emulator, Device Mode # also Network conditions tool (1x), Settings > Devices (1x) + displayName: device emulator, device mode, device simulation, device simulator # also Network conditions tool (1x), Settings > Devices (1x) - name: Emulate dual-screen and foldable devices # added article href: devtools-guide-chromium/device-mode/dual-screen-and-foldables.md @@ -307,7 +311,7 @@ href: devtools-guide-chromium/inspect-styles/animations.md displayName: Animations tool # Application tool ------------------------------------------------------------ - - name: Application tool, for storage + - name: Application tool, for storage and PWAs items: - name: Application tool, to manage storage href: devtools-guide-chromium/storage/application-tool.md @@ -345,6 +349,10 @@ href: devtools-guide-chromium/progressive-web-apps/index.md displayName: Application tool + - name: Test Progressive Web App (PWA) protocol handling + href: devtools-guide-chromium/progressive-web-apps/protocol-handlers.md + displayName: Application tool + - name: Debug background services href: devtools-guide-chromium/javascript/background-services.md displayName: Application tool @@ -370,7 +378,7 @@ # CSS Overview tool ----------------------------------------------------------- - name: CSS Overview tool items: - - name: Identify potential CSS improvements # real content pending + - name: Optimize CSS styles with the CSS Overview tool href: devtools-guide-chromium/css/css-overview-tool.md displayName: CSS Overview tool # Detached Elements tool ------------------------------------------------------ @@ -1017,7 +1025,7 @@ href: webview2/code-samples-links.md displayName: - - name: Win32 sample app (WebView2APISample) + - name: Win32 sample app href: webview2/samples/webview2apissample.md displayName: WebView2APISample, SampleApps, Win32 sample app # repo dir names, top-of-page title @@ -1025,7 +1033,7 @@ href: webview2/samples/webview2samplewincomp.md displayName: WebView2SampleWinComp, Win32 sample app with Visual Composition # repo dir name, top-of-page title - - name: WebView2Browser (Win32 C++/JS) + - name: Win32 sample WebView2Browser href: webview2/samples/webview2browser.md displayName: WebView2Browser # repo dir name @@ -1345,6 +1353,11 @@ href: web-platform/password-reveal.md displayName: + - name: Operating System Regional Data Display + href: web-platform/os-regional-settings.md + displayName: globalization, language, region, limited, intl, date, time, format + + # ============================================================================= # if top-of-page title is longer, add it to displayName comma-delimited list of lookup keywords - name: Microsoft Edge IDE integration diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension-images/light-bulb.png b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension-images/light-bulb.png new file mode 100644 index 0000000000..8aa32c336a Binary files /dev/null and b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension-images/light-bulb.png differ diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension-images/quick-fix-options.png b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension-images/quick-fix-options.png new file mode 100644 index 0000000000..eec19c33ce Binary files /dev/null and b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension-images/quick-fix-options.png differ diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index da8120ece0..1d5b69a2c7 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -5,7 +5,7 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 07/07/2022 +ms.date: 09/07/2022 --- # Microsoft Edge DevTools extension for Visual Studio Code @@ -74,6 +74,32 @@ Issues are evaluated live while you edit your code. As you type, you get feedba ![A possible issue being explained on an output element](microsoft-edge-devtools-extension-images/live-issue-reporting.png) +#### Automated Quick Fixes and issue filtering + + + +The Microsoft Edge DevTools extension for Visual Studio Code includes a **Quick Fix** feature. By using Quick Fixes, you can customize the error reporting of the extension to meet the needs of the current project. + +When you hover over an element that has an issue, you get a lightbulb icon indicating that there are Quick Fixes available: + +![An anchor element with a protocol-specific href attribute highlighted as a problem, by a wavy underline and lightbulb icon above it](microsoft-edge-devtools-extension-images/light-bulb.png) + +Clicking the lightbulb icon shows a list of options. For example, if you added a link that has a protocol-relative URL, you get the following **Quick Fix** list to choose from: + +![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options.png) + +You can select whichever **Quick Fix** you want to use to resolve the issue or to stop reporting it as an issue: + +* **Fix "no-protocol-relative-urls" issue** - Adds the missing URL prefix `https://` to the link. + +* **Disable "no-protocol-relative-urls" hints in this project** - Creates a `.hintrc` configuration file in the project folder, and tells the extension never to report this issue again. + +* **Edit .hintrc for this project** - Opens the `.hintrc` configuration file so you can edit it to customize the extension's error reporting. + + ## Modes for using Microsoft Edge DevTools in Visual Studio Code diff --git a/microsoft-edge/web-platform/media/os-regional-setting.png b/microsoft-edge/web-platform/media/os-regional-setting.png new file mode 100644 index 0000000000..25bef1f448 Binary files /dev/null and b/microsoft-edge/web-platform/media/os-regional-setting.png differ diff --git a/microsoft-edge/web-platform/media/preferred-languages.png b/microsoft-edge/web-platform/media/preferred-languages.png new file mode 100644 index 0000000000..2d110e0180 Binary files /dev/null and b/microsoft-edge/web-platform/media/preferred-languages.png differ diff --git a/microsoft-edge/web-platform/os-regional-settings.md b/microsoft-edge/web-platform/os-regional-settings.md new file mode 100644 index 0000000000..324abc04f6 --- /dev/null +++ b/microsoft-edge/web-platform/os-regional-settings.md @@ -0,0 +1,129 @@ +--- +title: Operating System Regional Data Display +description: How users and web developers can use the OS regional format in Microsoft Edge for improved site experiences +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.prod: microsoft-edge +ms.date: 08/19/2022 +--- +# Operating System Regional Data Display + +Microsoft Edge provides operating system (OS) regional preference information to help website authors create regional experiences on their web site, when viewing your site using Microsoft Edge. This feature allows website authors to deliver value to users who specifically change their regional preferences in the OS to reflect their personal preferences. + +Users want to see dates, times, numbers, and other formatting printed according to their preferences. For example, the US geographic region translates **7/2/2022** into **July 2nd, 2022**. Another geographic region could translate that same date into **February 7, 2022** because they read the month and day inversely. + + + +## Regional format + +To reflect a user's regional preferences for how data is displayed (such as the date), Microsoft Edge has a new option in the **Language** section of **Settings**: the **Share additional OS regional format** menu. + +![The 'Share additional OS regional format' menu with the Limited (default) option selected](media/os-regional-setting.png) + +Granting access to this setting allows websites to have visibility into more user's specific regional preferences than was previously possible. Users that change their OS regional preferences may now see their preferences reflected automatically in more websites. + + + +## OS Regional Data Display Codes + +The user's formatting preferences are abstracted into a simple regional code, which is used by web applications to infer the various details noted above about dates, times, and other formatting preferences. + +Websites can use the built-in Internationalization API with a regional code to properly format information into the user's preferences. The Internationalization API can save lots of MB of data transfer over the network, keeping websites small and allowing them to quickly and easily adapt to different regions. + +In general, the website's internationalization user experiences are only as good as the regional code that they're able to determine for the current user. + +A regional code is a two-letter language code followed by a hyphen and a two-letter region code. Microsoft Edge uses ICU to understand regional codes. ICU is an implementation of the Unicode standard's Internationalization API. For more information, see [ICU-TC Home Page](https://icu.unicode.org/home). + +To set the user's language preferences, Microsoft Edge gets the default values from the OS when it is first installed. The user can then change the language preferences in `edge://settings/languages` and sort them in priority order. + +![The 'Preferred languages' section of the Settings > Languages page](media/preferred-languages.png) + +The UI, HTTP header, and API interact as follows: + +| Language or region data | User impact | +|--------|-------------------------| +| **Preferred languages** in the **Settings** > **Languages** page | The language selected for rendering Microsoft Edge. This language/region is also used for formatting values such as date, time, and numbers. | +| `accept-language` HTTP header | A list of regional codes (as defined in **Settings** > **Languages** > **Preferred languages**) that's sent to the server to allow a website to display the right language. Microsoft Edge sends the regional codes in the order that's specified in **edge://settings/languages**. | +| `navigator.language` API (and similar) | Code inserted into a website that allows the browsers to display the correct regional formatting (as defined in **Settings** > **Languages** > **Preferred languages**) for user input and other content produced locally. | + + + +## Regional Data Display options + +Users have three options on Microsoft Edge to select the level of information their browser will share about their regions: + +* **Limited (default)** +* **Always (not recommended)** +* **Never** + + +#### Limited + +The default, recommended value is **Limited**. This setting uses only valid combinations of the user's current Microsoft Edge preferred language and the user's chosen OS regional preference. **Limited** ensures that for language processing, websites will provide a consistent language experience (not mixing languages in unpredictable combinations). + +The **Limited** option compares the language part of the regional code that is derived from the browser's current preferred display language, and the regional code coming from the OS setting, and if the language parts match and if the resulting regional code is a valid combination, will provide the regional code to websites as the default locale. + +If the OS-specified regional language doesn't match Microsoft Edge's preferred language, the **Limited** option will act as if **Never** was selected and will fall back to the regional code derived from the browser's preferred display language. + +Note: the **Limited** option is similar to current Firefox behavior for exposing the OS regional code, as described in [Regional Preferences - Firefox Source Docs documentation (mozilla.org)](https://firefox-source-docs.mozilla.org/intl/locale.html#regional-preferences). + + +#### Always + +If **Always (not recommended)** is selected, the user's OS regional preferences will be provided to the website without any limitations or restrictions. The user may be exposed to fingerprinting and to website compatibility problems (inconsistent use of language and formatting). See below "Avoiding potential misuse" section.) + + +#### Never + +Users can disable the sharing of OS regional information by selecting **Never**. The **Never** option still allows websites to read regional information, but does block any specific OS regional customizations that the user has made from being exposed to website content. Instead, the browser's preferred display language is used to derive a default region. + + + +## Policy Controls + +A related new policy in Microsoft Edge, **ShareOSRegionThroughJavaScriptLocale**, provides a setting for corporate or enterprise-level default configurations. This setting accepts an integer with the following potential values: + +|Number| Description | +|--------|-------------------------| +| 1 | Limited | +| 2 | Always | +| 3 | Never | + +In addition, an older policy, [ApplicationLocaleValue](/DeployEdge/microsoft-edge-policies#applicationlocalevalue), sets the Microsoft Edge locale and locks it to prevent users from changing it. + + + +## Avoiding potential misuse + +We believe that **Limited** is the right option for most users. **Limited** respects the user's regional preferences while introducing the least amount of risk of the website misusing this information. + + +#### Fingerprinting Entropy + +OS regional information could be misused to compromise the user's privacy. The regional information would help hackers establish fingerprinting entropy. In combination with many other pre-existing bits of entropy in the platform today, the user could be uniquely identified leading to more potential secondary harm. + +While a user's region and language are already available via the web platform, users generally fall into well-recognized regional codes that are similar across geographies. Because the sample sizes are so large, the risk of any specific regional code standing out is small, and thus the risk is small. If the user changes their OS preferences to a unique language + region, websites may be able to identify the anomaly in a population, and uniquely identify the associated user. + + +#### Content Presentation + +The OS regional information can also be misused and lead to inconsistency of a website's language presentation. Microsoft Edge provides multiple language and regional APIs to websites developers. Websites may process regional information in one place, while deriving language preferences from another. + +When the language and regional information is self-consistent, then it doesn't really matter which APIs the website uses to assemble its content presentation. However, if a website reads the language information from multiple APIs and those APIs return different language codes, then the website may inadvertently start to mix-and-match regional preferences, resulting in strange user experiences. For example, phrasing that mixes languages and regional preferences together, such as "Email sent on miércoles, 5 de enero de 2021". + + + +## Developer Details + +The new setting to **Share additional OS regional format** directly impacts the JavaScript `Intl` object's default regional value and all other JavaScript APIs that use the default region (such as the `Date` constructor). + +When the `Intl` object's constructors (such as `DateTimeFormat`) are provided with an existing regional code, their behavior is unchanged. However, when a specific regional code isn't provided, the constructors will use the **default regional code**. The new user preference also affects other date and time formatting APIs that rely on the default regional code, such as `Date`. + +For example, a `DateTimeFormat` can be created with the user's default regional code (and inspected) via the following expression: + +```js +Intl.DateTimeFormat().resolvedOptions().locale +``` + +Other areas in the platform, such as the `accept-languages` header sent via HTTP/HTTPS GET requests to the server, and the `navigator.language` and `navigator.languages` APIs, aren't impacted by the regional information that's shared by the OS. diff --git a/microsoft-edge/web-platform/site-impacting-changes.md b/microsoft-edge/web-platform/site-impacting-changes.md index 736d01f434..73f7a932c0 100644 --- a/microsoft-edge/web-platform/site-impacting-changes.md +++ b/microsoft-edge/web-platform/site-impacting-changes.md @@ -48,7 +48,7 @@ This table lists: | Send CORS preflight requests for private network access | v98 | | Starting with v98, Microsoft Edge sends a CORS [preflight](https://developer.chrome.com/blog/private-network-access-preflight/) request before a page from the internet is allowed to request resources from a local network (intranet). The intranet server should respond to the preflight by providing explicit permission to access the resource. The result of this check is not yet enforced. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Chrome Platform Status entry](https://chromestatus.com/feature/5737414355058688). Two compatibility policies are available to suppress the CORS preflight request: [InsecurePrivateNetworkRequestAllowed](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowed) and [InsecurePrivateNetworkRequestAllowedForUrls](/deployedge/microsoft-edge-policies#insecureprivatenetworkrequestsallowedforurls). | | Three-digit version number in the User-Agent string | v100 | | Starting with v100, Microsoft Edge will send a three-digit version number in the User-Agent header, such as `Edg/100`. This may confuse scripts or server-side analytics that use a buggy parser to determine the User-Agent string version number. Starting with v97, site owners can emulate this condition before v100 by enabling the experiment flag `#force-major-version-to-100` in `edge://flags`. | | Block external protocols in sandboxed frames by default | v103 | | Blocks the use of external protocols (that interact with non-browser applications) from sandboxed iframes unless permission is explicitly granted by the `sandbox` attribute on the frame. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see the [Chrome Platform Status entry](https://chromestatus.com/feature/5680742077038592). | -| Ignore modifications to `document.domain` by default | v106 | | The `document.domain` property historically could be set to relax Same-Origin-Policy and allow subdomains from a site to interact. This behavior will be disabled by default such that setting the `document.domain` property will have no effect. For more information and workarounds, see [Microsoft Edge will disable modifying document.domain](/deployedge/edge-learnmore-origin-keyed-agent-cluster). +| Ignore modifications to `document.domain` by default | v109 | | The `document.domain` property historically could be set to relax Same-Origin-Policy and allow subdomains from a site to interact. This behavior will be disabled by default such that setting the `document.domain` property will have no effect. For more information and workarounds, see [Microsoft Edge will disable modifying document.domain](/deployedge/edge-learnmore-origin-keyed-agent-cluster). | Removal of cross-origin subframe JavaScript dialogs | v107 (Chrome+1) | | Removes `window.alert`, `window.prompt`, and `window.confirm` from cross-origin iframes. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see [Intent to Remove: Cross origin subframe JS Dialogs](https://groups.google.com/a/chromium.org/g/blink-dev/c/hTOXiBj3D6A/m/JtkdpDd1BAAJ). | diff --git a/microsoft-edge/webview2/code-samples-links.md b/microsoft-edge/webview2/code-samples-links.md index ecb87447bd..d044325bd9 100644 --- a/microsoft-edge/webview2/code-samples-links.md +++ b/microsoft-edge/webview2/code-samples-links.md @@ -14,7 +14,7 @@ Sample apps that use WebView2 are available in the [WebView2Samples repo](https: | Article | Sample | Notes | |---|---|---| -| [Win32 sample app (WebView2APISample)](samples/webview2apissample.md) | [WebView2APISample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) | Main sample; extensive. | +| [Win32 sample app](samples/webview2apissample.md) | [WebView2APISample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) | Main sample; extensive. | | [Win32 sample app with Visual Composition](samples/webview2samplewincomp.md) | [WebView2SampleWinComp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2SampleWinComp) | Windows Runtime Composition APIs leverage the Windows UI in Win32 app. | | [WebView2Browser (Win32 C++/JS)](samples/webview2browser.md) | [WebView2Browser repo](https://github.com/MicrosoftEdge/WebView2Browser) | Uses multiple WebView2 instances. A major sample; has its own repo. | | [WinUI 2 (UWP) sample app](samples/webview2_sample_uwp.md) | [webview2_sample_uwp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/webview2_sample_uwp) |   | diff --git a/microsoft-edge/webview2/concepts/overview-features-apis.md b/microsoft-edge/webview2/concepts/overview-features-apis.md index e14cbbba95..9468f2db66 100644 --- a/microsoft-edge/webview2/concepts/overview-features-apis.md +++ b/microsoft-edge/webview2/concepts/overview-features-apis.md @@ -563,30 +563,6 @@ This feature is currently disabled by default in the browser. To enable this fe --- - - -#### Document title - -Your app can detect when the title of the current top-level document has changed. - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2.DocumentTitle Property](/dotnet/api/microsoft.web.webview2.core.corewebview2.documenttitle) -* [CoreWebView2.DocumentTitleChanged Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.documenttitlechanged) - -##### [WinRT/C#](#tab/winrtcsharp) - -* [CoreWebView2.DocumentTitle Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2#documenttitle) -* [CoreWebView2.DocumentTitleChanged Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2#documenttitlechanged) - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2::DocumentTitle property (get)](/microsoft-edge/webview2/reference/win32/icorewebview2#get_documenttitle) -* [ICoreWebView2::DocumentTitleChanged event (add](/microsoft-edge/webview2/reference/win32/icorewebview2#add_documenttitlechanged), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2#remove_documenttitlechanged) - ---- - - #### Fullscreen @@ -691,7 +667,6 @@ WebView2 provides functionality to handle the JavaScript function `window.open() --- - #### Close window @@ -714,6 +689,49 @@ WebView2 provides functionality to handle the JavaScript function `window.close( --- + +#### Document title + +Your app can detect when the title of the current top-level document has changed. + +##### [.NET/C#](#tab/dotnetcsharp) + +* [CoreWebView2.DocumentTitle Property](/dotnet/api/microsoft.web.webview2.core.corewebview2.documenttitle) +* [CoreWebView2.DocumentTitleChanged Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.documenttitlechanged) + +##### [WinRT/C#](#tab/winrtcsharp) + +* [CoreWebView2.DocumentTitle Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2#documenttitle) +* [CoreWebView2.DocumentTitleChanged Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2#documenttitlechanged) + +##### [Win32/C++](#tab/win32cpp) + +* [ICoreWebView2::DocumentTitle property (get)](/microsoft-edge/webview2/reference/win32/icorewebview2#get_documenttitle) +* [ICoreWebView2::DocumentTitleChanged event (add](/microsoft-edge/webview2/reference/win32/icorewebview2#add_documenttitlechanged), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2#remove_documenttitlechanged) + +--- + + +#### Favicon + +In WebView2 you can you can set a [Favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon) for a website or get notified when it changes. + +##### [.NET/C#](#tab/dotnetcsharp) + +* [CoreWebView2.FaviconChanged Event](/dotnet/api/microsoft.web.webview2.core.corewebview2.faviconchanged) +* [CoreWebView2.FaviconUri Property](/dotnet/api/microsoft.web.webview2.core.corewebview2.faviconuri) + +##### [WinRT/C#](#tab/winrtcsharp) + +* [CoreWebView2.FaviconChanged Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2#faviconchanged) +* [CoreWebView2.FaviconUri Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2#faviconuri) + +##### [Win32/C++](#tab/win32cpp) + +* [ICoreWebView2_15::FaviconChanged event (add](/microsoft-edge/webview2/reference/win32/icorewebview2_15#add_faviconchanged), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2_15#remove_faviconchanged) +* [ICoreWebView2_15::FaviconUri property (get)](/microsoft-edge/webview2/reference/win32/icorewebview2_15#get_faviconuri) + +---- ## Process management diff --git a/microsoft-edge/webview2/concepts/user-data-folder.md b/microsoft-edge/webview2/concepts/user-data-folder.md index 25f5d5ba01..c751934196 100644 --- a/microsoft-edge/webview2/concepts/user-data-folder.md +++ b/microsoft-edge/webview2/concepts/user-data-folder.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge ms.technology: webview -ms.date: 04/27/2022 +ms.date: 08/31/2022 --- # Manage user data folders @@ -26,7 +26,15 @@ The user data folder (UDF) is a folder stored on the user's machine, that contai WebView2 creates the UDF in the default location for the platform, or in the custom UDF location that your host app explicitly specifies. -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. Make sure that the custom UDF location that you specify has appropriate Read/Write permissions for the WebView2 app runtime. +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: + +* The custom UDF location must have appropriate Read/Write permissions for the WebView2 app runtime. + +* Avoid storing user settings on a network drive. This can result in slowdowns, crashes, or loss of data. diff --git a/microsoft-edge/webview2/get-started/win32.md b/microsoft-edge/webview2/get-started/win32.md index 3fcb0159c1..2741ead2bf 100644 --- a/microsoft-edge/webview2/get-started/win32.md +++ b/microsoft-edge/webview2/get-started/win32.md @@ -35,7 +35,7 @@ The completed tutorial project is available in the **WebView2Samples** repo: -## Step 1 - Prerequisite: Install Visual Studio +## Step 1 - Install Visual Studio This tutorial requires Microsoft Visual Studio, not Microsoft Visual Studio Code. @@ -45,7 +45,7 @@ Then return to this page and continue below. -## Step 2 - Prerequisite: Install a preview channel of Microsoft Edge +## Step 2 - Install a preview channel of Microsoft Edge 1. If it's not installed already, install a preview channel of Microsoft Edge. To do that, in a new 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_. diff --git a/microsoft-edge/webview2/how-to/hostobject.md b/microsoft-edge/webview2/how-to/hostobject.md index 30c47bde0b..f3a3d2a30a 100644 --- a/microsoft-edge/webview2/how-to/hostobject.md +++ b/microsoft-edge/webview2/how-to/hostobject.md @@ -39,7 +39,7 @@ Scenarios that may benefit from using host objects in script: * JavaScript is sandboxed, limiting its ability on the native side. For example, if you need to access a file on the native side, you must use the native file system. If you have a native object exposed to JavaScript via `AddHostObjectToScript`, you can use it to manipulate files on the native file system. -This article uses the [Win32 sample app (WebView2APISample)](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) to demonstrate some practical applications of `AddHostObjectToScript`. For more information about how to embed web content into native applications, see [Embed web content into native applications](/microsoft-edge/webview2/how-to/communicate-btwn-web-native). +This article uses the [Win32 sample app](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) to demonstrate some practical applications of `AddHostObjectToScript`. For more information about how to embed web content into native applications, see [Embed web content into native applications](/microsoft-edge/webview2/how-to/communicate-btwn-web-native). #### Preview of the major steps in this article diff --git a/microsoft-edge/webview2/how-to/machine-setup.md b/microsoft-edge/webview2/how-to/machine-setup.md index 8e883e75fd..30409ac0d6 100644 --- a/microsoft-edge/webview2/how-to/machine-setup.md +++ b/microsoft-edge/webview2/how-to/machine-setup.md @@ -20,7 +20,7 @@ This article covers general-purpose setup of your development environment for We The WebView2 samples are designed for Microsoft **Visual Studio**, not Microsoft **Visual Studio Code**. - If you are installing Visual Studio, you can accept the defaults for now; you can click **Install**, and decline installing the Workloads at this time. Visual Studio will prompt you later, when you open a particular `.sln` file, to install the platform-appropriate workloads. + If you are installing Visual Studio, you can accept the defaults for now; you can click **Install**, and then decline installing the Workloads at this time. Visual Studio will prompt you later, when you open a particular `.sln` file, to install the platform-appropriate workloads. diff --git a/microsoft-edge/webview2/how-to/webresourcerequested.md b/microsoft-edge/webview2/how-to/webresourcerequested.md index c4160d10b7..9cfc907c69 100644 --- a/microsoft-edge/webview2/how-to/webresourcerequested.md +++ b/microsoft-edge/webview2/how-to/webresourcerequested.md @@ -296,7 +296,7 @@ The `NavigateWithWebResourceRequest` method allows your host app to navigate the ### Example: Constructing a custom request and navigating using that request - + diff --git a/microsoft-edge/webview2/index.md b/microsoft-edge/webview2/index.md index 9da9eb3ac7..8029b5f233 100644 --- a/microsoft-edge/webview2/index.md +++ b/microsoft-edge/webview2/index.md @@ -55,7 +55,7 @@ Hybrid apps, in the middle of this spectrum, allow you to enjoy the best of both * **Code-sharing**. Add web code to your codebase allows for increased reuse across multiple platforms. -* **Microsoft support**. Microsoft provides support and adds new feature requests when WebView2 releases at General Availability (GA). +* **Microsoft support**. Microsoft provides support and adds new feature requests on supported platforms. * **Evergreen distribution**. Rely on an up-to-date version of Chromium with regular platform updates and security patches. @@ -67,15 +67,15 @@ Hybrid apps, in the middle of this spectrum, allow you to enjoy the best of both ## Supported platforms -A General Availability (GA) or Preview version of WebView2 is available for the following programming environments: +The following programming environments are supported: -* Win32 C/C++ (GA) +* Win32 C/C++ * .NET Framework 4.5 or later * .NET Core 3.1 or later * .NET 5 * .NET 6 -* WinUI 2.0 (Preview) -* [WinUI 3.0](/uwp/toolkits/winui3/index) +* [WinUI 2.0](/windows/apps/winui/winui2/) +* [WinUI 3.0](/windows/apps/winui/winui3/) WebView2 apps can run on the following versions of Windows: diff --git a/microsoft-edge/webview2/release-notes.md b/microsoft-edge/webview2/release-notes.md index 5b6d300c03..bcfc48e072 100644 --- a/microsoft-edge/webview2/release-notes.md +++ b/microsoft-edge/webview2/release-notes.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge ms.technology: webview -ms.date: 08/09/2022 +ms.date: 09/09/2022 --- # Release Notes for the WebView2 SDK @@ -34,6 +34,72 @@ To use a prerelease SDK along with a Microsoft Edge preview channel, see [Test u +## 1.0.1343.22 + +Release Date: September 6, 2022 + +[NuGet package for WebView2 SDK 1.0.1343.22](https://www.nuget.org/packages/Microsoft.Web.WebView2/1.0.1343.22) + +For full API compatibility, this version of the WebView2 SDK requires WebView2 Runtime version 105.0.1343.22 or higher. + + +## 1.0.1369-prerelease + +Release Date: September 6, 2022 + +[NuGet package for WebView2 SDK 1.0.1369-prerelease](https://www.nuget.org/packages/Microsoft.Web.WebView2/1.0.1369-prerelease) + +For full API compatibility, this version of the WebView2 SDK requires Microsoft Edge version 106.0.1369.0 or higher. + +### General + +#### Promotions + +The following items are now stable: + +* The drag and drop API: + * `DragEnter` + * `DragLeave` + * `DragOver` + * `Drop` + +##### [.NET/C#](#tab/dotnetcsharp) + +* [CoreWebView2CompositionController.DragLeave Method](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.dragleave?view=webview2-dotnet-1.0.1369-prerelease&preserve-view=true#microsoft-web-webview2-core-corewebview2compositioncontroller-dragleave) + + + +##### [WinRT/C#](#tab/winrtcsharp) + +* [CoreWebView2CompositionController.DragLeave Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2compositioncontroller?view=webview2-winrt-1.0.1369-prerelease&preserve-view=true#dragleave) + + + +##### [Win32/C++](#tab/win32cpp) + +* [ICoreWebView2CompositionController3.DragEnter method](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller3?view=webview2-1.0.1369-prerelease&preserve-view=true#dragenter) +* [ICoreWebView2CompositionController3.DragLeave method](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller3?view=webview2-1.0.1369-prerelease&preserve-view=true#dragleave) +* [ICoreWebView2CompositionController3.DragOver method](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller3?view=webview2-1.0.1369-prerelease&preserve-view=true#dragover) +* [ICoreWebView2CompositionController3.Drop method](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller3?view=webview2-1.0.1369-prerelease&preserve-view=true#drop) + + +--- + +#### Bug fixes + +* Fixed a bug where WPF apps would crash when windows with WebView2 were closed. ([Issue #640](https://github.com/MicrosoftEdge/WebView2Feedback/issues/640)) + +* Fixed a bug that produced simultaneous WebView creation failure (Runtime). [Issue #2703](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2703) + + +* Fixed print settings paper size to support dimensions as small as 0.01 inches (Runtime). + +* Fixed a bug where the WebView2 print dialog reset the **Scale** setting to **Fit to printable area** every time. ([Issue #2523](https://github.com/MicrosoftEdge/WebView2Feedback/issues/2523)) + +* Fixed a bug in the **wv2winrt** tool where a WinMD file wasn't referenced in some projects. + + + ## 1.0.1293.44 Release Date: August 8, 2022 @@ -135,7 +201,7 @@ For full API compatibility, this version of the WebView2 SDK requires Microsoft * Fixed an issue in service worker caching if the path was too long. ([Issue #1900](https://github.com/MicrosoftEdge/WebView2Feedback/issues/1900)) -* Improved performance for wv2winrt `IMap` and `IMapView` projections into JavaScript. +* Improved performance for **wv2winrt** `IMap` and `IMapView` projections into JavaScript. * Adding support for HWND_MESSAGE to be used as WebView2 parent window to support headless scenarios. ([Issue #202](https://github.com/MicrosoftEdge/WebView2Feedback/issues/202)) diff --git a/microsoft-edge/webview2/roadmap.md b/microsoft-edge/webview2/roadmap.md index 1f0e8b02b4..b085a606fb 100644 --- a/microsoft-edge/webview2/roadmap.md +++ b/microsoft-edge/webview2/roadmap.md @@ -18,7 +18,6 @@ If you have concerns or questions about the Roadmap, provide your feedback in th The WebView2 team is planning the following major efforts for future updates: -* UWP Preview * MacOS Preview * Xbox Preview * HoloLens Preview @@ -50,6 +49,10 @@ The Win32 C/C++ SDK has reached GA. The .NET SDK has reached GA. +### Windows UI Library 2 + +You can access WebView2 controls in your UWP applications using [Windows UI Library 2 (WinUI 2)](get-started/winui2.md). This has reached GA. + ### Windows UI Library 3 -You can access WebView2 controls in your applications using [Windows UI Library 3 (WinUI 3)](/uwp/toolkits/winui3/index) with the Windows App SDK. This is currently in preview. For more information, see [Windows App SDK roadmap](https://github.com/microsoft/WindowsAppSDK/blob/main/docs/roadmap.md). +You can access WebView2 controls in your applications using [Windows UI Library 3 (WinUI 3)](/uwp/toolkits/winui3/index) with the Windows App SDK. This has reached GA. diff --git a/microsoft-edge/webview2/samples/webview2_sample_uwp.md b/microsoft-edge/webview2/samples/webview2_sample_uwp.md index a763021c42..143f0860e4 100644 --- a/microsoft-edge/webview2/samples/webview2_sample_uwp.md +++ b/microsoft-edge/webview2/samples/webview2_sample_uwp.md @@ -31,7 +31,7 @@ See also [README file for webview2_sample_uwp](https://github.com/MicrosoftEdge/ -## Step 1 - Prerequisite: Install Visual Studio +## Step 1 - Install Visual Studio Microsoft Visual Studio is required. Microsoft Visual Studio Code is not supported for this sample. @@ -39,7 +39,7 @@ Microsoft Visual Studio is required. Microsoft Visual Studio Code is not suppor -## Step 2 - Prerequisite: Install a preview channel of Microsoft Edge +## Step 2 - Install a preview channel of Microsoft Edge 1. If a preview channel of Microsoft Edge (Beta, Dev, or Canary) is not 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. diff --git a/microsoft-edge/webview2/samples/webview2apissample.md b/microsoft-edge/webview2/samples/webview2apissample.md index fbe1101806..7a9daf3869 100644 --- a/microsoft-edge/webview2/samples/webview2apissample.md +++ b/microsoft-edge/webview2/samples/webview2apissample.md @@ -1,5 +1,5 @@ --- -title: Win32 sample app (WebView2APISample) +title: Win32 sample app description: This WebView2 sample demonstrates how to use the WebView2 control and WebView2 APIs to add features to a Win32 C++ app. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.prod: microsoft-edge ms.technology: webview ms.date: 07/29/2022 --- -# Win32 sample app (WebView2APISample) +# Win32 sample app This sample, **WebView2APISample**, demonstrates how to use the WebView2 control and WebView2 APIs to add features to a Win32 C++ app. @@ -42,7 +42,7 @@ For details of events and API handlers in WebView2, see [WebView2 API Reference] -## Step 1 - Prerequisite: Install a preview channel of Microsoft Edge +## Step 1 - Install a preview channel of Microsoft Edge Next, make sure a preview channel of Microsoft Edge in installed, on a supported OS. Currently we recommend the latest version of the Canary channel. @@ -50,7 +50,7 @@ Next, make sure a preview channel of Microsoft Edge in installed, on a supported -## Step 2 - Prerequisite: Install Visual Studio 2019 +## Step 2 - Install Visual Studio 2019 Microsoft Visual Studio is required. Microsoft Visual Studio Code is not supported for this sample. This repo sample is a Visual Studio 2019 project. diff --git a/microsoft-edge/webview2/samples/webview2browser.md b/microsoft-edge/webview2/samples/webview2browser.md index 25029050d1..35bac34742 100644 --- a/microsoft-edge/webview2/samples/webview2browser.md +++ b/microsoft-edge/webview2/samples/webview2browser.md @@ -1,5 +1,5 @@ --- -title: WebView2Browser (Win32 C++/JS) +title: Win32 sample WebView2Browser description: "A web browser built with the Microsoft Edge WebView2 control." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,9 +8,13 @@ ms.prod: microsoft-edge ms.technology: webview ms.date: 07/18/2022 --- -# WebView2Browser (Win32 C++/JS) +# Win32 sample WebView2Browser - + This sample, **WebView2Browser**, is a web browser built with the [Microsoft Edge WebView2](https://aka.ms/webview2) control. diff --git a/microsoft-edge/webview2/samples/webview2samplewincomp.md b/microsoft-edge/webview2/samples/webview2samplewincomp.md index 979201f132..3849729afb 100644 --- a/microsoft-edge/webview2/samples/webview2samplewincomp.md +++ b/microsoft-edge/webview2/samples/webview2samplewincomp.md @@ -28,7 +28,7 @@ See also [Readme file for WebView2SampleWinComp](https://github.com/MicrosoftEdg -## Step 1 - Prerequisite: Install a preview channel of Microsoft Edge +## Step 1 - Install a preview channel of Microsoft Edge We recommend the latest version of the Edge Canary channel. @@ -36,7 +36,7 @@ We recommend the latest version of the Edge Canary channel. -## Step 2 - Prerequisite: Install Visual Studio with C++ support +## Step 2 - Install Visual Studio with C++ support Microsoft Visual Studio is required. Microsoft Visual Studio Code is not supported for this sample. diff --git a/microsoft-edge/webview2/samples/webview2wpfbrowser.md b/microsoft-edge/webview2/samples/webview2wpfbrowser.md index 46e396af2b..ab3b738ade 100644 --- a/microsoft-edge/webview2/samples/webview2wpfbrowser.md +++ b/microsoft-edge/webview2/samples/webview2wpfbrowser.md @@ -36,13 +36,13 @@ For more information about events and API Handlers in WebView2, see [WebView2 AP -## Step 1 - Prerequisite: Install a preview channel of Microsoft Edge +## Step 1 - Install a preview channel of Microsoft Edge 1. If a preview channel of Microsoft Edge (Beta, Dev, or Canary) is not 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. -## Step 2 - Prerequisite: Install Visual Studio 2019 with .NET support +## Step 2 - Install Visual Studio 2019 with .NET support Microsoft Visual Studio is required. Microsoft Visual Studio Code is not supported for this sample. diff --git a/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md b/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md index 229bf1ace9..9b5ef32c65 100644 --- a/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md +++ b/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample.md @@ -38,7 +38,7 @@ If this is your first time using WebView2, we recommend first following the [Get -## Step 1 - Prerequisite: Install a preview channel of Microsoft Edge +## Step 1 - Install a preview channel of Microsoft Edge @@ -48,7 +48,7 @@ We recommend the latest version of the Canary channel. -## Step 2 - Prerequisite: Install Visual Studio with .NET support +## Step 2 - Install Visual Studio with .NET support Microsoft Visual Studio (with .NET support) is required. Microsoft Visual Studio Code is not supported for this sample. diff --git a/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md b/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md index e65b6f6428..f7e760faad 100644 --- a/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md +++ b/microsoft-edge/webview2/samples/wv2deploymentvsinstallersample.md @@ -18,7 +18,7 @@ This sample, **WV2DeploymentVSInstallerSample**, demonstrates how to deploy a We * Repo directory: [WV2DeploymentVSInstallerSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentVSInstallerSample) * Solution file: not provided in the repo. You create a solution file in the steps below. -To demonstrate how to deploy the Evergreen WebView2 Runtime with your app, this article describes how to use the [Microsoft Visual Studio Installer Project](https://marketplace.visualstudio.com/items?itemName=visualstudioclient.MicrosoftVisualStudio2017InstallerProjects) extension for Visual Studio. You create a project of type **Setup Project**, to create an installer for the [Win32 sample app (WebView2APISample)](./webview2apissample.md) (**WebView2APISample**). That installer that you create chain-installs the Evergreen WebView2 Runtime. +To demonstrate how to deploy the Evergreen WebView2 Runtime with your app, this article describes how to use the [Microsoft Visual Studio Installer Project](https://marketplace.visualstudio.com/items?itemName=visualstudioclient.MicrosoftVisualStudio2017InstallerProjects) extension for Visual Studio. You create a project of type **Setup Project**, to create an installer for the [Win32 sample app](./webview2apissample.md) (**WebView2APISample**). That installer that you create chain-installs the Evergreen WebView2 Runtime. @@ -33,13 +33,13 @@ For information about these different approaches, see [Deploying the Evergreen W -## Step 1 - Prerequisite: Build and run WebView2APISample +## Step 1 - Build and run WebView2APISample To become familiar with the app that this sample distributes, and to make sure your environment is set up for general Win32 WebView2 app development, build and run the Win32 sample app (**WebView2APISample**) before using this deployment sample. -1. Do the steps in [Win32 sample app (WebView2APISample)](./webview2apissample.md) (**WebView2APISample**) and then continue below. +1. Do the steps in [Win32 sample app](./webview2apissample.md) (**WebView2APISample**) and then continue below. Prerequisite: As stated in the above page, Microsoft Visual Studio is required, including C++ support. Microsoft Visual Studio Code is not supported for this **WV2DeploymentVSInstallerSample** sample. @@ -47,7 +47,7 @@ The above page helps you clone or download the WebView2Samples repo, and install -## Step 2 - Prerequisite: Install Visual Studio Installer Projects +## Step 2 - Install Visual Studio Installer Projects If not done yet, install Visual Studio Installer Projects: diff --git a/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md b/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md index 8a252af4c0..08cbfa37a1 100644 --- a/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md +++ b/microsoft-edge/webview2/samples/wv2deploymentwixburnbundlesample.md @@ -17,7 +17,7 @@ This sample, **WV2DeploymentWiXBurnBundleSample**, demonstrates how to use a WiX * Repo directory: [WV2DeploymentWiXBurnBundleSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentWiXBurnBundleSample) * Project file: **WV2DeploymentWiXBurnBundleSample.wixproj** -This sample creates a [WiX](https://wixtoolset.org/) installer for the [Win32 sample app (WebView2APISample)](webview2apissample.md). This sample uses [WiX Burn Bundle](https://wixtoolset.org/documentation/manual/v3/bundle/) to chain-install the Evergreen WebView2 Runtime. +This sample creates a [WiX](https://wixtoolset.org/) installer for the [Win32 sample app](webview2apissample.md). This sample uses [WiX Burn Bundle](https://wixtoolset.org/documentation/manual/v3/bundle/) to chain-install the Evergreen WebView2 Runtime. @@ -31,7 +31,7 @@ For an overview of the approaches, see [Deploying the Evergreen WebView2 Runtime -## Step 1 - Prerequisite: Install Visual Studio +## Step 1 - Install Visual Studio Microsoft Visual Studio is required. Microsoft Visual Studio Code is not supported for this sample. @@ -43,7 +43,7 @@ Then return to this page and continue the steps below. -## Step 2 - Prerequisite: Install WiX Toolset build tools +## Step 2 - Install WiX Toolset build tools If not done yet, install WiX Toolset: @@ -90,7 +90,7 @@ Also install the WiX Visual Studio component, per the next section. -## Step 3 - Prerequisite: Install WiX Toolset Visual Studio Extension +## Step 3 - Install WiX Toolset Visual Studio Extension If not done yet, install WiX Toolset Visual Studio 2019 Extension: diff --git a/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md b/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md index ab2a702fd1..19f01b45f4 100644 --- a/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md +++ b/microsoft-edge/webview2/samples/wv2deploymentwixcustomactionsample.md @@ -27,7 +27,7 @@ This sample demonstrates several different deployment approaches: -## Step 1 - Prerequisite: Install Visual Studio 2019 with C++ support +## Step 1 - Install Visual Studio 2019 with C++ support @@ -37,13 +37,13 @@ Microsoft Visual Studio is required. Microsoft Visual Studio Code is not suppor -## Step 2 - Prerequisite: Install a preview channel of Microsoft Edge +## Step 2 - Install a preview channel of Microsoft Edge 1. **Preview channel of Microsoft Edge** - If a preview channel of Microsoft Edge (Beta, Dev, or Canary) is not 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. -## Step 3 - Prerequisite: Install WiX Toolset build tools +## Step 3 - Install WiX Toolset build tools If not done yet, install WiX Toolset: @@ -81,7 +81,7 @@ Also install the WiX Visual Studio component, per the next section. -## Step 4 - Prerequisite: Install WiX Toolset Visual Studio Extension +## Step 4 - Install WiX Toolset Visual Studio Extension If not done yet, install WiX Toolset Visual Studio 2019 Extension: @@ -192,7 +192,7 @@ If you plan to package either the Bootstrapper (Approach 2) or the Standalone In ## See also -* [Win32 sample app (WebView2APISample)](./webview2apissample.md) +* [Win32 sample app](./webview2apissample.md) * [Deploying the Evergreen WebView2 Runtime](/microsoft-edge/webview2/concepts/distribution.md#deploying-the-evergreen-webview2-runtime) in _Distribute your app and the WebView2 Runtime_. * [Readme for WV2DeploymentWiXCustomActionSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2DeploymentWiXCustomActionSample#readme). * [WiX Toolset](https://wixtoolset.org/)