发现并了解新的 Microsoft Edge Web 开发技术和产品，包括 DevTools、Web 平台 API 和功能、渐进式Web 应用和 WebView2。
此页包含指向短视频的链接，每个视频仅侧重于一项功能，并包含一个演示。
Microsoft定期在 Microsoft Edge YouTube 频道上发布新视频，它们也在下面列出。
单击以下列表中的缩略图，观看 YouTube 上的相应视频。
YouTube 上的 Microsoft Edge 频道
可以在 YouTube 的 Microsoft Edge (@MSFTEdge) 频道中找到有关使用 Microsoft Edge 进行开发的所有视频。
Microsoft Edge 频道包含以下播放列表：
解释在 Edge 中使用 Copilot 的 DevTools 控制台错误
2024 年 2 月 8 日
Microsoft Edge DevTools 中的 控制台 和 源 工具现在与 Microsoft Edge 中的 Copilot 集成，以帮助你了解错误和源代码。 使用此功能获取调试代码的帮助。
另请参阅：
JSON 查看器
2023 年 8 月 17 日
JSON 查看器在浏览器选项卡中自动设置 JSON 响应和文件的格式并突出显示。 当 Web 服务器使用编码为 JSON 的数据响应 HTTP 请求时，这些数据并不总是容易读取，有时会作为一行文本返回。 JSON 查看器会更改返回的数据，使其更易于阅读。 JSON 语法以不同的颜色突出显示，对象属性显示在自己的行上并缩进，对象可以折叠或展开。
另请参阅：
Microsoft Edge |DevTools 113 和 114 中的新增功能
2023 年 7 月 24 日
涵盖：
- 故障分析器工具。
- 聚合 CSS 选择器统计信息。
- 触发布局的 CSS 属性的警告。
- 内存 工具改进。
- 辅助功能改进。
- VS Code 的 DevTools 扩展中更好的高对比度模式支持。
-
console.table().
另请参阅：
Microsoft Edge |DevTools 112 中的新增功能
2023 年 4 月 26 日
涵盖：
- 性能工具中 OOPIF 的未缩小 JS 名称。
- CSS 概述工具中的非简单 CSS 选择器。
- JSON 查看器中的代码折叠。
- DevTools UI 中的改进。
- 日志点和条件断点的新标记。
- 如何在 DevTools 中更改主题。
另请参阅：
Microsoft Edge |DevTools 111 中的新增功能
2023 年 3 月 28 日
涵盖：
- 远程调试 Xbox 和 HoloLens 设备上的 Web 内容。
- 性能工具中的未缩小文件和函数名称。
- 可以将 CSS 选择器统计信息 表复制到 Excel。
- 在“设备模式”工具栏中呈现仿真功能。
- Better Elements 工具边栏。
- 更好的 快速视图 辅助功能。
- 高清晰度颜色功能。
- 自定义 网络 工具的列。
另请参阅：
Microsoft Edge |DevTools 110 中的新增功能
2023 年 2 月 16 日
涵盖：
- 更快的堆快照录制。
- 改进了对 DevTools UI) (焦点模式的自定义。
- 辅助功能和对比度主题改进。
- 源工具中的自动就地漂亮打印。
- 模拟
prefers-color-scheme。
另请参阅：
Microsoft Edge |DevTools 109 中的新增功能
2023 年 1 月 17 日
涵盖：
- 使用更多数据共享内存和性能跟踪。
- 性能工具中的选择器统计信息。
- 在 内存 工具中跟踪垃圾回收 (GC'd) 对象。
- 堆快照可视化工具扩展。
- 在焦点模式下重新设计的 “快速视图 ”面板。
- “样式”窗格的新命令。
- 检查元素。
另请参阅：
- DevTools (Microsoft Edge 109) 中的新增功能
- 使用更多数据共享内存跟踪
- 使用更多数据共享性能跟踪
- 在重新计算样式事件 - 选择器统计信息期间分析 CSS 选择器性能。
- 在“加快 JavaScript 运行时” (“分配采样”分析) 类型 ) 中 (“包含对象”复选框，调查内存分配。
- 垃圾谈话：奥里诺科垃圾回收器
- 堆快照可视化工具 扩展。
Microsoft Edge |DevTools 108 中的新增功能
2022 年 12 月 16 日
涵盖：
- 改进了命令面板中的导航。
- 高对比度模式修复。
- 禁用 JavaScript 警告。
- 请参阅非活动 CSS 属性。
- 用于创建自己的工具的新文档。
- Apple M1 上的 macOS 上提供 WebDriver。
- 使用分离元素查找 DOM 泄漏。
另请参阅：
- DevTools (Microsoft Edge 108) 中的新增功能
- 创建 DevTools 扩展，添加自定义工具选项卡和面板
- 堆快照文件格式
- Microsoft Edge WebDriver - 下载 Edge WebDriver。
Microsoft Edge |DevTools 107 中的新增功能
2022 年 11 月 8 日
涵盖：
- 焦点模式 DevTools UI 中的文本标签。
- 命令面板的新快捷方式。
- 内存工具中的大型堆快照。
- 高对比度模式修复。
- 关闭“键入时搜索”。
- 使用 Playwright 自动执行 WebView2。
- 自定义快捷方式。
另请参阅：
Microsoft Edge |了解如何使用网络工具
2022 年 10 月 6 日
了解如何在 Microsoft Edge DevTools 中使用 网络 工具。
涵盖：
- 为什么 DevTools 中的 网络 工具对 Web 开发人员至关重要。
- 网站如何从 Internet 获取在 Web 浏览器中显示所需的信息。
- 何时使用 网络 工具。
- 网络工具 UI 教程。
- 在 网络 工具中显示请求。
- 查看请求/响应的详细信息。
- 自定义 网络 工具。
- 对请求进行排序、筛选和搜索。
- 调查性能问题。
- 阻止请求并导出为 HAR 文件。
- 编辑和重新发送请求。
另请参阅：
Microsoft Edge |DevTools 106 中的新增功能
2022 年 10 月 3 日
涵盖：
- 命令面板试验。
- 快速修复 Edge DevTools VS Code 扩展中的问题。
- DevTools 使用的磁盘空间更少。
- 焦点模式中更好的辅助功能 (DevTools UI) 和高对比度 bug 修复。
- 已弃用Chromium浅色/深色主题。
- 性能工具中的新交互跟踪。
- 使用代码片段。
另请参阅：
Microsoft Edge |DevTools 105 中的新增功能
2022 年 9 月 6 日
涵盖：
- PWA 协议处理调试。
- 焦点模式改进。
- 焦点模式 bug 修复。
- 提高了网络和问题工具的可靠性。
- 调试时实时编辑函数代码。
- 使用日志点。
另请参阅：
了解 DevTools 用户界面
2022 年 9 月 1 日
此稍早 (2022 年 9 月) 视频显示了 DevTools 的旧 UI：
- 视频显示主工具栏，而不是 活动栏。
- 视频显示 DevTools 底部的抽屉，而不是“快速视图”面板。
涵盖：
- DevTools 的 UI 结构，主工具栏和面板位于顶部， 抽屉 工具栏和面板位于底部。
- 如何组织 Microsoft Edge DevTools UI。
- DevTools 接口的主要部分的功能。
- 哪些工具可用。
- 检查工具。
- 设备仿真 模式。
- 主工具栏或 抽屉中的工具。
- “ 更多选项卡” 按钮。
- “ 更多工具 ”按钮可查看所有 30 多种工具。
- 关闭工具。
- 在主工具栏中重新排序工具。
- 抽屉及其工具栏。
- 在主工具栏和 抽屉 工具栏之间移动工具。
- 如何还原默认设置。
另请参阅：
Microsoft Edge |DevTools 104 中的新增功能
2022 年 8 月 5 日
涵盖：
- 呈现/辅助功能 bug 修复。
- 复合层现在位于 3D 视图 工具中，并且 图层 工具已删除。
- 在源工具中对文件 进行 分组。
- 查找节点在 Web 组件中的槽位位置。
- 在何处查找详细信息。
- 如何更改 活动栏 的放置位置。
另请参阅：
Microsoft Edge |DevTools 103 中的新增功能
2022 年 7 月 5 日
涵盖：
- 重新设计的 欢迎 工具。
- 新建颜色选取器。
- 新的内存堆快照节点类型。
- 高对比度模式 bug 修复。
- 在 VS Code 扩展中打开任何 HTML 页面。
另请参阅：
在 3D 中调试 Web
2022 年 6 月 21 日
Microsoft Edge DevTools 中的 3D 视图 工具提供要检查的网页的三维表示形式。 使用 3D 视图 工具调试常见的 Web 开发问题，例如：
- 深层嵌套的 DOM 节点。
- 文档外元素。
- 不需要的滚动条。
- Z 索引堆栈问题。
- 复合层性能。
另请参阅：
在 Microsoft Edge DevTools 中使用首选语言
2022 年 6 月 9 日
如何选择最适合你进行编码和调试的 UI 语言。 Microsoft Edge DevTools 支持 13 种以上的不同语言。
另请参阅：
Microsoft Edge |DevTools 102 中的新增功能
2022 年 6 月 1 日
涵盖：
- Visual Studio Code。
- 堆快照导出。
- 循环内部节点。
- 帮助图标。
- 已修复的问题。
另请参阅：
使用 元素完全设置 HTML <select> 的下拉部分的 <selectmenu> 样式
2022 年 5 月 31 日
样式 <select> 元素具有挑战性。 实验 <selectmenu> (或 <selectlist>) 元素承诺通过使 Web 开发人员能够设置元素的所有部分的样式来克服剩余的限制。
2024 年 6 月更新：此元素仍处于试验阶段。 元素 <selectmenu> 在 2023 年重命名为 <selectlist> 。
另请参阅：
-
打开 UI 的
<selectlist>演示- /selectlist/ - 源代码和自述文件。
-
阅读器演示应用
- /reader/ - 源代码和自述文件。
-
设置
<select>实际元素样式 - 有关设置元素和 元素样式<select>的<selectmenu>博客文章。
Edge DevTools 和 VSCode 中的高级问题筛选
2022 年 5 月 20 日
每个 Web 产品都有问题。 Microsoft Edge DevTools 问题 工具分析当前网页，并报告按类型分组的问题，包括辅助功能、兼容性、性能等。
适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展可直接在源代码中提供问题。
已发布的产品可能有问题。 根据你的反馈，我们添加了筛选问题的有用方法。 可以禁用来自第三方库的问题，并选择要查看其相关问题的浏览器。
另请参阅：
- 使用“问题”工具查找和修复问题
- VS Code 的 DevTools 扩展中的内联和实时问题分析
创建不使用 JavaScript 的滚动链接动画
2022 年 5 月 12 日
了解 CSS 滚动链接动画功能，以及如何在不使用 JavaScript 的情况下使用它在网页上创建阅读进度指示器。 这是整个 Web 平台的一项功能，不仅Microsoft Edge。
从 2023 年 7 月 21 日起，此功能不再处于试验阶段，现在在无标志的 Microsoft Edge 中受支持。 从 2022 年说明：CSS 滚动链接动画是 Microsoft Edge 中的一项实验性功能;若要尝试此功能，请转到 edge://flags ，然后启用 试验 Web 平台功能 设置。
另请参阅：
- 阅读器演示 - 视频中显示的演示应用。
- MDN 中的 CSS 滚动驱动动画。
- @scroll-时间线 MDN：有关试验性 CSS 滚动链接动画功能的原始页面。
自定义Microsoft Edge 开发人员工具和快速功能访问
2022 年 5 月 5 日
了解如何自定义 DevTools 以满足你的需求。 涵盖：
- 停靠或取消停靠 DevTools。
- 打开新工具。
- 关闭不需要的工具。
- 移动底部 抽屉 中的工具 (“ 快速视图 ”面板) 。
- 自定义文本大小。
- 自定义主题。
- 使用 命令菜单 键盘快捷方式快速自定义 DevTools。
另请参阅：
使用 CSS 自定义突出显示 API 突出显示 Web 上的文本
2022 年 4 月 28 日
在 Web 上设置文本范围的样式非常有用，但从历史上看，这是一件复杂的事。
CSS 自定义突出显示 API 是在 Web 上突出显示文本范围的未来。 此 API 为 Web 开发人员提供了 JavaScript 和 CSS 功能，使设置任意范围文本的样式更加轻松高效。
另请参阅：
Microsoft Edge |DevTools 101 中的新增功能
2022 年 4 月 28 日
涵盖：
- 使用控制台。
- 源映射缓存。
- 状态文本列。
- 切换主题。
另请参阅：
Microsoft Edge |DevTools 100 中的新增功能
2022 年 4 月 19 日
涵盖：
- Microsoft Edge 开发人员工具存储库，用于提交反馈和想法。
- 为 DevTools UI 添加了捷克语和越南语。
- 在 内存 工具中，按节点类型筛选堆快照。
- 网络工具具有“已完成者”列，其中显示了服务辅助角色或缓存。
- 导入的性能配置文件中的链接使用来自 Azure Artifacts 符号服务器的源映射来映射回熟悉的原始源代码。
另请参阅：
Microsoft Edge |DevTools 99 中的新增功能
2022 年 3 月 21 日
涵盖：
- Azure项目符号服务器和源映射。
- 改进了 3D 视图工具中的“图层”窗格。
- 使用源映射来统一性能配置文件。
- DevTools for Visual Studio 中的实时 ASP.NET 调试。
- 网络控制台工具和 3D 视图工具中的辅助功能。
另请参阅：
Microsoft Edge 中的自动图像说明
2022 年 3 月 17 日
Microsoft Edge 为不包含它的图像提供自动生成的替换文字。 自动生成的替换文字可帮助屏幕阅读器等辅助技术的用户发现 Web 上图像的含义或意图。
许多失明或弱视人士主要通过屏幕阅读器体验网络：一种可大声朗读每页内容的辅助技术。 屏幕阅读器依赖于图像标签 (可选文本或“替换文字”) ，这些标签允许他们描述视觉内容（如图像和图表）以便用户可以理解页面的完整内容。 替换文字对于使 Web 易于访问至关重要，但经常被忽视。 屏幕阅读器处理的图像中，超过一半缺少替换文字。
另请参阅：
Microsoft Edge |DevTools 98 中的新增功能
2022 年 2 月 23 日
涵盖：
- 模拟强制颜色模式。
- 性能工具事件日志中的活动图标包含工具提示。
- 内存工具中的浅层大小表示为十进制值。
- 在 “网络 ”工具中，“搜索”框根据需要调整大小。
- 在 应用程序 工具中，UI 已正确对齐。
- Chromium浏览器引擎的汇报。
另请参阅：
Microsoft Edge |DevTools 97 中的新增功能
2022 年 2 月 1 日
涵盖：
- 默认情况下， “分离元素” 工具可用。
- 3D 视图工具支持在 DevTools 中更改颜色主题。
- 焦点模式 (DevTools UI) 改进。
- VS Code 的 DevTools 扩展具有其他功能。
另请参阅：
- DevTools 97 中的新增功能
- 刷新设备列表： https://aka.ms/RefreshDeviceList
- 以 HTML 形式编辑的自动完成 https://aka.ms/AutocompleteEditHTML
- 改进了调试体验： https://aka.ms/NewDebugging
使用 Microsoft Edge 分离元素工具调试内存泄漏
2021 年 12 月 9 日
2025 年 3 月更新：已删除 分离元素 工具。 若要调试 DOM 内存泄漏，请使用内存工具中的分离元素分析类型。
当应用程序的 JavaScript 代码将越来越多的对象保留在内存中，而不是释放这些对象供浏览器进行垃圾回收时，会发生内存泄漏。 我们与Microsoft Teams 开发人员一起构建了 分离元素 工具，它已帮助我们查找并修复了许多自己的网站和应用中的内存泄漏问题。
另请参阅：
- 在修复内存问题中查找从分离元素泄漏的 DOM 树内存。
- 使用 Microsoft Edge 分离元素工具调试内存泄漏 - 博客文章。
Microsoft Edge |DevTools 96 中的新增功能
2021 年 12 月 9 日
涵盖：
- 新的 DevTools UI：焦点模式。
- 控制台工具可以位于 DevTools 的顶部和底部面板中。
- 当无法加载源映射时， 源 工具会通知你。
- 单击下拉列表的三角形图标将打开菜单。
- 在 Visual Studio Code 中打开源文件与源工具集成。
另请参阅：
Microsoft Edge |DevTools 95 中的新增功能
2021 年 12 月 8 日
涵盖：
- “搜索 Web ”图标，查看所有错误和警告消息。
- 改进了用于定义 User-Agent 客户端提示的访问。
- 控制台筛选器显示分组消息。
另请参阅：
Microsoft Edge |吸管 API
2021 年 11 月 22 日
Microsoft Edge 团队与 Chromium 开源项目协作指定并实现了新的 EyeDropper API。 在 问题 - WICG/吸管器 | github.com 中提供反馈。
许多创意应用程序使用户能够从应用窗口的某些部分甚至整个屏幕（通常使用眼滴器隐喻）中选择颜色。 通过 EyeDropper API，作者可以在 Web 上构建自定义颜色选取器时使用浏览器提供的吸管器。
另请参阅：
- MDN 中的吸管 API。
- EyeDropper API 演示
Microsoft Edge |DevTools 94 中的新增功能
2021 年 11 月 12 日
涵盖：
- 在 Web 上搜索控制台错误。
- 使用Visual Studio Code主题时，将显示断点图标。
- 适用于 Visual Studio Code 的 DevTools 扩展包括最新的工具、主题支持和有用的链接。 与远程工作区的 JavaScript 调试器连接。
更新：已删除Visual Studio Code的主题功能，此类主题还原默认主题：
- Light+
- 深色+
另请参阅：
- DevTools 94 中的新增功能
- 键盘快捷方式 - 使用键盘导航 DevTools。
Microsoft Edge |DevTools 93 中的新增功能
2021 年 10 月 11 日
涵盖：
- DevTools UI。
- 使用 分离元素 工具调试 DOM 节点内存泄漏。
- 更改显示语言。
- 在 CSS-in-JS 库的 “元素 ”工具的“ 样式 ”窗格中复制 CSS 声明。
- 更轻松地自定义 User-Agent 客户端提示。
- 屏幕阅读器会报出工具栏和 控制台中显示的错误、警告和问题。
- 网络工具中的“作为 PowerShell 进行复制”包括 Cookie。
- Visual Studio Code调试器与适用于 VS Code 的 DevTools 扩展集成。
另请参阅：
Microsoft Edge |平台状态
2021 年 5 月 25 日
Microsoft Edge 为开发人员带来了引人入胜且一致的平台和工具。 随着旧版浏览器逐步退出支持，Edge 将很快成为 Microsoft 在 Windows 10 上唯一支持的浏览器。 了解 Edge 平台、工具和 Web 应用的最新内容。
涵盖：
- 委托的墨迹跟踪。
- 面向开发人员的新 Web 功能。
- 在 OS 登录名上运行。
- Microsoft适用于 VS Code 的 Edge 工具。
另请参阅：
- Windows 10上的 Internet Explorer 的未来处于 Microsoft Edge - IE 模式。
- 通过 FastTrack 采用 Microsoft Edge
- “Microsoft Edge：平台状态”：会话资源
Ignite |2021 年 3 月 |点燃Web 应用故事
2021 年 3 月 2 日
Microsoft Edge 支持渐进式Web 应用 (PWA) ，它们是增强应用程序的可发现性和参与度的机会。 Web 平台的新功能。 这些新式 Web 应用程序如何与 Microsoft Windows 无缝集成。
涵盖：
- 现代化的能力。
- 共同努力，为 Web 平台提供支持。
- Microsoft Edge 和 Chromium 浏览器引擎。
- Microsoft Edge 和 Web 功能 (Project Fugu) 。
- 使 PWA 在 Windows 上大放异彩。
- 一流的覆盖。
- 将网站安装为应用。
- 参与 Windows 上的 PWA。
另请参阅：
Ignite |2020 年 9 月 |最新的开发人员工具
2020 年 9 月 22 日
Microsoft Edge 开发人员工具有助于简化 Web 开发、测试和自动化。 了解我们如何在工具和应用程序中确定辅助功能优先级，以及如何帮助其他人实现相同的功能。
涵盖：
- VS Code 的 DevTools 扩展。
- 跨浏览器测试和自动化。 Selenium、WebDriver、Puppeteer、Playwright 和 CI/CD 通过 Docker 容器。
- Chromium浏览器引擎上的协作。 如何参与。
- 开发人员工具中的本地化 UI。
- 开发人员工具中的辅助功能。
另请参阅：
另请参阅
YouTube：
-
YouTube 上的 Microsoft Edge (@MSFTEdge) 频道
- 开发人员 - 播放列表。
- DevTools 中的新增功能 - 播放列表。
- 扩展 - 播放列表。
- 生成、部署和管理 WebView2 应用程序 - 2021 年 3 月 2 日。