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.
Microsoft Edge channel at YouTube
You can find all videos about development using Microsoft Edge at the Microsoft Edge (@MSFTEdge) channel at YouTube.
The Microsoft Edge channel includes the following playlists:
Explain DevTools Console errors using Copilot in Edge
February 8, 2024
The Console and Sources tools in Microsoft Edge DevTools now integrate with Copilot in Microsoft Edge to help you understand errors and source code. Use this feature to get help with debugging your code.
See also:
The JSON viewer
August 17, 2023
The JSON viewer automatically formats and highlights JSON responses and files in browser tabs. When your web server responds to HTTP requests with data encoded as JSON, this data isn't always easy to read and is sometimes returned as one line of text. The JSON viewer changes the returned data to make it easier to read. The JSON syntax is highlighted with different colors, object properties are displayed on their own lines and indented, and objects can be collapsed or expanded.
See also:
Microsoft Edge | What's New in DevTools 113 and 114
July 24, 2023
Covers:
- The Crash Analyzer tool.
- Aggregate CSS selector stats.
- Warnings for CSS properties that trigger layout.
- Memory tool improvements.
- Accessibility improvements.
- Better high-contrast mode support in the DevTools extension for VS Code.
console.table().
See also:
Microsoft Edge | What's New in DevTools 112
April 26, 2023
Covers:
- Unminified JS names for OOPIFs in the Performance tool.
- Non-simple CSS selectors in the CSS overview tool.
- Code folding in the JSON viewer.
- Improvements in the DevTools UI.
- New markers for logpoints and conditional breakpoints.
- How to change themes in DevTools.
See also:
- What's New in DevTools (Microsoft Edge 112)
- Analyze CSS selector performance during Recalculate Style events - CSS selector stats.
- View formatted JSON responses or files
Microsoft Edge | What's New in DevTools 111
March 28, 2023
Covers:
- Remotely debug web content on Xbox and HoloLens devices.
- Unminified file and function names in the Performance tool.
- Can copy the CSS Selector Stats table to Excel.
- Rendering emulation features in the Device Mode toolbar.
- Better Elements tool sidebar.
- Better Quick View accessibility.
- High-definition color features.
- Customize the Network tool's columns.
See also:
- What's New in DevTools (Microsoft Edge 111)
- Securely debug original code by publishing source maps to the Azure Artifacts symbol server
Microsoft Edge | What's New in DevTools 110
February 16, 2023
Covers:
- Faster heap snapshot recordings.
- Improved customization of Focus Mode (DevTools UI).
- Accessibility and contrast themes improvements.
- Automatic in-place pretty-printing in the Sources tool.
- Simulate
prefers-color-scheme.
See also:
Microsoft Edge | What's New in DevTools 109
January 17, 2023
Covers:
- Enhanced traces to share memory and performance recordings.
- Selector Stats in the Performance tool.
- Track garbage-collected (GC'd) objects in the Memory tool.
- Heap Snapshot visualizer extension.
- Redesigned Quick View panel in Focus Mode.
- New commands for the Styles panes.
- Inspecting elements.
See also:
- What's New in DevTools (Microsoft Edge 109)
- Share enhanced performance and memory traces
- Analyze CSS selector performance during Recalculate Style events - selector stats.
- Investigate memory allocation, with reduced garbage ("Include objects" checkboxes) in Speed up JavaScript runtime ("Allocation sampling" profiling type).
- Trash talk: the Orinoco garbage collector
- Heap Snapshot visualizer extension.
Microsoft Edge | What's New in DevTools 108
December 16, 2022
Covers:
- Improved navigation in Command Palette.
- High-contrast mode fixes.
- Disabled JavaScript warning.
- See inactive CSS properties.
- New documentation to create your own tools.
- WebDriver available on macOS on Apple M1.
- Use Detached Elements to find DOM leaks.
See also:
- What's New in DevTools (Microsoft Edge 108)
- Create a DevTools extension, adding a custom tool tab and panel
- The heap snapshot file format
- Microsoft Edge WebDriver - download Edge WebDriver.
Microsoft Edge | What's New in DevTools 107
November 8, 2022
Covers:
- Text labels in the Focus Mode DevTools UI.
- New shortcut for Command Palette.
- Large heap snapshots in the Memory tool.
- High-contrast mode fixes.
- Switch off "search as you type".
- Automate WebView2 with Playwright.
- Customize shortcuts.
See also:
Microsoft Edge | Learn to Use the Network Tool
October 6, 2022
Learn to use the Network tool in Microsoft Edge DevTools.
Covers:
- Why the Network tool in DevTools is essential for web developers.
- How websites get the information they need from the internet to get displayed in the web browser.
- When to use the Network tool.
- A tour of the Network tool UI.
- Displaying requests in the Network tool.
- Viewing the details for a request/response.
- Customizing the Network tool.
- Sorting, filtering, and searching requests.
- Investigating performance issues.
- Blocking requests and exporting as HAR files.
- Editing and resending requests.
See also:
Microsoft Edge | What's New in DevTools 106
October 3, 2022
Covers:
- The Command Palette experiment.
- Quick Fix issues in the Edge DevTools VS Code extension.
- DevTools uses less disk space.
- Better accessibility in Focus Mode (DevTools UI), and high-contrast bug fix.
- Deprecated Chromium Light/Dark themes.
- New interactions track in the Performance tool.
- Using Snippets.
See also:
Microsoft Edge | What's New in DevTools 105
September 6, 2022
Covers:
- PWA protocol handling debugging.
- Focus Mode improvements.
- Focus Mode bug fixes.
- Improved Network and Issues tools reliability.
- Live edit function code while debugging.
- Using log points.
See also:
Understand the DevTools user interface
September 1, 2022
This slightly older (September 2022) video shows the legacy UI for DevTools:
- Instead of the Activity Bar, the video shows the main toolbar.
- Instead of the Quick View panel, the video shows the Drawer at bottom of DevTools.
Covers:
- The UI structure of DevTools, with the main toolbar and panel at top, and the Drawer toolbar and panel at bottom.
- How the Microsoft Edge DevTools UI is organized.
- What the main parts of the DevTools interface do.
- What tools are available.
- The Inspect tool.
- Device Emulation mode.
- Tools in the main toolbar or in the Drawer.
- The More tabs button.
- The More tools button to see all 30+ tools.
- Closing tools.
- Reordering tools in the main toolbar.
- The Drawer and its toolbar.
- Moving tools between the main toolbar and Drawer toolbar.
- How to restore the default settings.
See also:
Microsoft Edge | What's New in DevTools 104
August 5, 2022
Covers:
- Rendering/accessibility bug fixes.
- Composited layers are now in the 3D View tool, and the Layers tool was removed.
- Group files in the Sources tool.
- Find where nodes get slotted in web components.
- Where to find more information.
- How to change where the Activity Bar is placed.
See also:
Microsoft Edge | What's New in DevTools 103
July 5, 2022
Covers:
- Redesigned Welcome tool.
- New color picker.
- New memory heap snapshot node types.
- High contrast mode bug fix.
- Open any HTML page in the VS Code extension.
See also:
Debug the web in 3D
June 21, 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.
See also:
- Navigate webpage layers, z-index, and DOM using the 3D View tool
- Debug the web in 3D with the 3D View tool - blog post.
Use your preferred language in Microsoft Edge DevTools
June 9, 2022
How to select the UI language that's most comfortable to you for coding and debugging. Microsoft Edge DevTools supports 13+ different languages.
See also:
Microsoft Edge | What's New in DevTools 102
June 1, 2022
Covers:
- Visual Studio Code.
- Heap Snapshot Export.
- Cycles Internal Nodes.
- Help Icon.
- Issues Fixed.
See also:
Fully style the drop-down part of a HTML <select> with the new <selectmenu> element
May 31, 2022
Styling <select> elements has been challenging. The experimental <selectmenu> (or <selectlist>) element promises to overcome the remaining limitations by enabling web developers to style all parts of the element.
June 2024 update: This new element is still experimental. The <selectmenu> element was renamed to <selectlist> in 2023.
See also:
- Open UI's
<selectlist>demos - Styling
<select>elements for real - blog post about styling<select>elements and the<selectmenu>element.
Advanced issues filtering in Edge DevTools and VSCode
May 20, 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.
The Microsoft Edge DevTools extension for Visual Studio Code makes issues available in your source code directly.
Released products can have issues. Based on your feedback, we added useful ways to filter issues. You can disable issues coming from third-party libraries, and choose which browsers to view issues about.
See also:
- Find and fix problems using the Issues tool
- Inline and live issue analysis in the DevTools extension for VS Code
Create a scroll-linked animation without JavaScript
May 12, 2022
Learn about the CSS scroll-linked animations feature and how it can be used to create a reading progress indicator on a webpage, without using JavaScript. This is a feature of the web platform as a whole, not only Microsoft Edge.
As of July 21, 2023, this feature is no longer experimental, and is now supported in Microsoft Edge without a flag. From 2022 description: 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.
See also:
- Reader demo - demo app that's shown in the video.
- Source code for Reader demo
- CSS scroll-driven animations at MDN.
- @scroll-timeline at MDN: original page about the experimental CSS scroll-linked animations feature.
Customizing Microsoft Edge Developer Tools and quick feature access
May 5, 2022
Learn how to customize DevTools to fit your needs. Covers:
- Dock or undock DevTools.
- Open new tools.
- Close tools that you don't need.
- Move tools in the bottom Drawer (now the Quick View panel).
- Customize the text size.
- Customize the theme.
- Use the Command Menu keyboard shortcuts to quickly customize DevTools.
See also:
Highlight text on the web with the CSS Custom Highlighting API
April 28, 2022
Styling ranges of text on the web is very useful but has historically been a complicated thing to do.
The CSS Custom Highlight API is the future of highlighting text ranges on the Web. This API provides web developers with JavaScript and CSS features that make it easier and more efficient to style any range of text.
See also:
Microsoft Edge | What's New in DevTools 101
April 28, 2022
Covers:
- Using the Console.
- Source Maps Cache.
- Status Text Column.
- Switching Themes.
See also:
- What's New in DevTools 101
- Console integration: https://aka.ms/ConsoleIntegration
- Network Columns: https://aka.ms/NetworkColumns
Microsoft Edge | What's New in DevTools 100
April 19, 2022
Covers:
- The Microsoft Edge Developer Tools repo, to submit feedback and ideas.
- Added Czech and Vietnamese languages for DevTools UI.
- In the Memory tool, filter heap snapshots by node type.
- The Network tool has a Fulfilled By column, showing service worker or cache.
- The links from an imported performance profile use source maps from Azure Artifacts symbol server to map back to your familiar original source code.
See also:
Microsoft Edge | What's New in DevTools 99
March 21, 2022
Covers:
- Azure Artifacts Symbol Server and sourcemaps.
- Improved Layers pane in the 3D View tool.
- Use sourcemaps to unminify performance profiles.
- Live ASP.NET debugging in DevTools for Visual Studio.
- Accessibility in Network Console tool and 3D View tool.
See also:
Automatic image descriptions in Microsoft Edge
March 17, 2022
Microsoft Edge provides auto-generated alt text for images that don't include it. Auto-generated alt text helps users of assistive technology such as screen readers discover the meaning or intent of an images on the web.
Many people who are blind or low-vision experience the web primarily through a screen reader: an assistive technology that reads the content of each page aloud. Screen readers depend on having image labels (alternative text or "alt text") provided that allows them to describe visual content - like images and charts - so the user can understand the full content of the page. Alt text is critical for making the web accessible, yet it’s often overlooked. More than half of the images processed by screen readers are missing alt text.
See also:
Microsoft Edge | What's New in DevTools 98
February 23, 2022
Covers:
- Emulate Forced Colors mode.
- Activity icons in the Performance tool event log have tooltips.
- Shallow sizes in the Memory tool are represented as decimal values.
- In the Network tool, the Search box resizes as needed.
- In the Application tool, UI is aligned correctly.
- Updates for the Chromium browser engine.
See also:
Microsoft Edge | What's New in DevTools 97
February 1, 2022
Covers:
- The Detached Elements tool is available by default.
- The 3D View tool supports changing color themes in DevTools.
- Focus Mode (DevTools UI) improvements.
- DevTools extension for VS Code has additional features.
See also:
- What's New in DevTools 97
- Refresh the device list: https://aka.ms/RefreshDeviceList
- Autocomplete with Edit as HTML https://aka.ms/AutocompleteEditHTML
- Improved debugging experience: https://aka.ms/NewDebugging
Debug memory leaks with the Microsoft Edge Detached Elements tool
December 9, 2021
To debug DOM memory leaks, use either:
- The Detached Elements tool. Detached nodes have a link to the associated JavaScript code.
- The Detached elements profiling type in the Memory tool.
The Detached Elements tool 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 the Detached Elements 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.
See also:
- Debug DOM memory leaks by using the Detached Elements tool
- Debug memory leaks with the Microsoft Edge Detached Elements tool - blog post.
Microsoft Edge | What's New in DevTools 96
December 9, 2021
Covers:
- New DevTools UI: Focus Mode.
- The Console tool can be in both the top and bottom panels of DevTools.
- The Sources tool notifies you when sourcemaps can't be loaded.
- Clicking a dropdown's triangle icon opens the menu.
- Opening source files in Visual Studio Code integrates with the Sources tool.
See also:
Microsoft Edge | What's New in DevTools 95
December 8, 2021
Covers:
- Search Web icon for all error and warning messages.
- Improved access for defining User-Agent Client Hints.
- Console filters display grouped messages.
See also:
Microsoft Edge | The EyeDropper API
November 22, 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.
See also:
- Picking colors of any pixel on the screen with the EyeDropper API | web.dev
- EyeDropper API - Web APIs | MDN developer.mozilla.org
Microsoft Edge | What's New in DevTools 94
November 12, 2021
Covers:
- Search for Console errors on the web.
- Breakpoint icons are displayed when using Visual Studio Code themes.
- DevTools extension for Visual Studio Code includes the latest tools, theme support, and helpful links. JavaScript Debugger connection to remote workspaces.
Update: Starting with Microsoft Edge 131, the Visual Studio Code themes feature is removed, and such themes revert to the default themes:
- Light+
- Dark+
See also:
- What's New in DevTools 94
- Keyboard shortcuts - Navigating DevTools with a keyboard.
Microsoft Edge | What's New in DevTools 93
October 11, 2021
Covers:
- DevTools UI.
- Debug DOM node memory leaks with the Detached Elements tool.
- Change Display Language.
- Copy CSS declarations in the Elements tool's Styles pane for CSS-in-JS libraries.
- Easier customization of User-Agent Client Hints.
- Screen readers announce errors, warnings, and issues displayed in the toolbar and Console.
- Copy as PowerShell in the Network tool includes cookies.
- The Visual Studio Code debugger integrates with the DevTools Extension for VS Code.
See also:
Microsoft Edge | State of the Platform
May 25, 2021
Microsoft Edge brings a compelling and consistent platform and tools for developers. As our legacy browsers phase out of support, Edge will soon be the only supported browser from Microsoft on Windows 10. Learn about the latest across the Edge platform, tools, and web apps.
Covers:
- Delegated Ink Trails.
- New Web Capabilities for developers.
- Run on OS login.
- Microsoft Edge Tools for VS Code.
See also:
- The future of Internet Explorer on Windows 10 is in Microsoft Edge - IE mode.
- Adopt Microsoft Edge with FastTrack
- "Microsoft Edge: State of the Platform": Session Resources
Ignite | March 2021 | Igniting the Web Apps Story
March 2, 2021
Progressive Web Apps (PWA) are supported in Microsoft Edge, and they represent an opportunity to enhance discoverability and engagement with your application. New capabilities of the Web platform. How these modern Web applications integrate seamlessly with Microsoft Windows.
Covers:
- The ability to modernize.
- Joint efforts to empower the Web platform.
- Microsoft Edge and the Chromium browser engine.
- Microsoft Edge and web capabilities (Project Fugu).
- Making PWAs shine on Windows.
- Best-in-class reach.
- Install a website as an app.
- Get involved with PWAs on Windows.
See also:
Ignite | September 2020 | The latest in developer tooling
September 22, 2020
Microsoft Edge developer tools help make web development, testing, and automation easier. Learn how we prioritize accessibility in our tooling and applications, and how we help to empower others to do the same.
Covers:
- DevTools extension for VS Code.
- Cross-browser testing and automation. Selenium, WebDriver, Puppeteer, Playwright, and CI/CD via Docker containers.
- Collaboration on the Chromium browser engine. How to contribute.
- Localized UI in developer tools.
- Accessibility in developer tools.
See also:
See also
YouTube:
- Microsoft Edge (@MSFTEdge) channel at YouTube
- Developer - playlist.
- What's New in DevTools - playlist.
- Extensions - playlist.
- Building, Deploying, and Managing WebView2 Applications - March 2, 2021.