| title | Videos about web development with Microsoft Edge |
|---|---|
| description | Watch announcement and demo videos about Microsoft Edge web development technologies such as DevTools, Progressive Web App, Web platform features, WebView2, and more. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | conceptual |
| ms.prod | microsoft-edge |
| ms.date | 05/24/2022 |
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.
Published on 6 September 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 105.
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.
Published on 5 August 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 104.
Published on 5 July 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 103.
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.
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.
Published on 1 June 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 102.
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.
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 VS Code, the Microsoft Edge DevTools extension for VS 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 VS Code, see Microsoft Edge DevTools extension for Visual Studio Code.
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.
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.
Published on 28 Apr 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 101.
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.
Published on 19 Apr 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 100.
Published on 21 Mar 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 99.
Published on 23 Feb 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 98.
Published on 1 Feb 2022.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 97.
Published on 9 Dec 2021.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 96.
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.
Published on 8 Dec 2021.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 95.
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.
Published on 12 Nov 2021.
Learn more about our latest announcements from the Microsoft Edge DevTools team at What's New in DevTools 94.