| title | description | author | ms.author | ms.topic | ms.service | ms.date |
|---|---|---|---|---|---|---|
Videos about web development with Microsoft Edge |
Watch announcement and demo videos about Microsoft Edge web development technologies such as DevTools, Progressive Web App, Web platform features, WebView2, and more. |
MSEdgeTeam |
msedgedevrel |
conceptual |
microsoft-edge |
06/20/2024 |
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.
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:
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:
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:
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:
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
- Apply a color theme to DevTools
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
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:
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.
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 an extension that customizes the DevTools UI
- The heap snapshot file format
- Microsoft Edge WebDriver - download Edge WebDriver.
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:
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:
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:
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:
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:
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:
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:
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.
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:
June 1, 2022
Covers:
- Visual Studio Code.
- Heap Snapshot Export.
- Cycles Internal Nodes.
- Help Icon.
- Issues Fixed.
See also:
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.
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
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.
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:
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:
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
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:
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:
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:
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:
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
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.
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:
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:
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
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.
See also:
- What's New in DevTools 94
- Keyboard shortcuts - Navigating DevTools with a keyboard.
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:
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
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:
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:
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.