Videos about web development with Microsoft Edge

Discover and learn about new Microsoft Edge web development technologies and products including DevTools, web platform APIs and features, Progressive Web Apps, and WebView2.

This page contains links to short videos, each focused on just one feature and including a demo.

Microsoft publishes new videos on a regular basis on the Microsoft Edge YouTube channel, and they are also listed below.

Click on a thumbnail from the following list to watch the corresponding video on YouTube.

DevTools - What's New in DevTools 105

Published on 6 September 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 105.

DevTools - Understand the DevTools user interface

Published on 1 September 2022.

Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable.

In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools.

DevTools - What's New in DevTools 104

Published on 5 August 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 104.

DevTools - What's New in DevTools 103

Published on 5 July 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 103.

DevTools - Debug the web in 3D

Published on 21 June 2022.

The 3D View tool in Microsoft Edge DevTools provides a 3-dimensional representation of the webpage you're inspecting. Use the 3D View tool to debug common web development problems such as:

• Deeply nested DOM nodes.
• Out-of-document elements.
• Unwanted scrollbars.
• Z-index stacking issues.
• Composited layers performance.

To learn more about the 3D View tool, check out Navigate webpage layers, z-index, and DOM using the 3D View tool, or Debug the web in 3D with the 3D View tool.

DevTools - Use your preferred language in DevTools

Published on 9 June 2022.

Microsoft Edge DevTools supports 13 different languages. In this video, the team shows how to choose the language that's most comfortable to you for coding and debugging.

To learn more about changing DevTools language settings, check out Change DevTools language settings.

To report any translation errors, check out Contact the Microsoft Edge DevTools team.

DevTools - What's New in DevTools 102

Published on 1 June 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 102.

Web Platform - Fully style the drop-down part of a <select> with the new <selectmenu> element

Published on 31 May 2022.

Styling <select> elements has been challenging. The experimental <selectmenu> element promises to overcome the remaining limitations by enabling web developers to style all parts of the element.

To learn more about styling <select> elements and the new <selectmenu> element, see the blog post Styling <select> elements for real.

DevTools - Advanced issues filtering in Edge DevTools and VSCode

Published on 20 May 2022.

Every web product has issues. The Microsoft Edge DevTools Issues tool analyzes the current webpage and reports issues grouped by type including accessibility, compatibility, performance, and more.

If you have Visual Studio Code, the Microsoft Edge DevTools extension for Visual Studio Code makes issues available in your source code directly.

Released products can also have many issues. Based on your feedback, we added useful ways to filter issues. You can disable issues coming from third-party libraries for example, and choose which browsers to view issues about.

To learn more about the Issues tool, see Find and fix problems using the Issues tool.

To learn more about the Microsoft Edge DevTools extension for Visual Studio Code, see Microsoft Edge DevTools extension for Visual Studio Code.

Web Platform - Create a scroll-linked animation without JavaScript

Published on 12 May 2022.

Learn about the upcoming CSS scroll-linked animations feature and how it can be used to create a reading progress indicator on a webpage, without using JavaScript.

CSS scroll-linked animations is an experimental feature in Microsoft Edge. To try this feature, go to edge://flags and then enable the Experimental Web Platform features setting.

To play with the demo application that's shown in the video, see the rendered reader demo and its source code.

To learn more about the CSS scroll-linked animations feature, see @scroll-timeline at MDN.

DevTools - Customizing Microsoft Edge Developer Tools and quick feature access

Published on 5 May 2022.

Learn how to customize DevTools to fit your needs.

This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the bottom drawer and customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools.

DevTools - What's New in DevTools 101

Published on 28 Apr 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 101.

Web Platform - Highlight text on the web with the CSS Custom Highlight API

Published on 28 Apr 2022.

Styling ranges of text on the web is very useful but has historically been a complicated thing to do.

The new CSS Custom Highlight API is the future of highlighting text ranges on the Web. It provides web developers with JavaScript and CSS features that make it easier and more efficient to style any range of text.

For more information see CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web.

DevTools - What's New in DevTools 100

Published on 19 Apr 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 100.

DevTools - What's New in DevTools 99

Published on 21 Mar 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 99.

DevTools - What's New in DevTools 98

Published on 23 Feb 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 98.

DevTools - What's New in DevTools 97

Published on 1 Feb 2022.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 97.

DevTools - What's New in DevTools 96

Published on 9 Dec 2021.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 96.

DevTools - Debug memory leaks with the Microsoft Edge Detached Elements tool

Published on 9 Dec 2021.

We're excited to announce the new Detached Elements tool in Microsoft Edge DevTools which helps you investigate and resolve DOM memory leaks.

Memory leaks occur when the JavaScript code of an application retains more and more objects in memory instead of releasing them for the browser to garbage collect. We built this tool with the Microsoft Teams developers, and it has already helped us find and fix memory leaks across many of our own websites and apps.

For more information see Debug DOM memory leaks with the Detached Elements tool, and read the corresponding blog post Debug memory leaks with the Microsoft Edge Detached Elements tool.

DevTools - What's New in DevTools 95

Published on 8 Dec 2021.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 95.

Web Platform - The EyeDropper API

Published on 22 Nov 2021.

The Microsoft Edge team specified and implemented the new EyeDropper API in collaboration with the Chromium open-source project. Provide feedback at Issues - WICG/eyedropper | github.com.

Many creative applications enable users to pick colors from parts of an app window or even from the entire screen, typically using an eyedropper metaphor. The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers on the web.

For more information see Picking colors of any pixel on the screen with the EyeDropper API | web.dev and EyeDropper API - Web APIs | MDN developer.mozilla.org.

DevTools - What's New in DevTools 94

Published on 12 Nov 2021.

Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 94.