培训
模块
本模块涵盖了有关辅助功能主题的各种概念,以及如何在 Web 开发过程中将其添加到 Web 应用程序。 你将了解正确使用 HTML 标记来描述信息的重要性,以及你可以对网站进行的各种改进。
认证
Microsoft Certified: Power Platform Developer Associate - Certifications
演示如何使用 Microsoft Power Platform Developer 简化、自动化和转换业务任务和流程。
发现并了解新的 Microsoft Edge Web 开发技术和产品,包括 DevTools、Web 平台 API 和功能、渐进式Web 应用和 WebView2。
此页包含指向短视频的链接,每个视频仅侧重于一项功能,并包含一个演示。
Microsoft定期在 Microsoft Edge YouTube 频道上发布新视频,它们也在下面列出。
单击以下列表中的缩略图,watch YouTube 上的相应视频。
可以在 YouTube 的 Microsoft Edge (@MSFTEdge) 频道中找到有关使用 Microsoft Edge 进行开发的所有视频。
Microsoft Edge 频道包含以下播放列表:
2024 年 2 月 8 日
Microsoft Edge DevTools 中的 控制台 和 源 工具现在与 Microsoft Edge 中的 Copilot 集成,以帮助你了解错误和源代码。 使用此功能获取调试代码的帮助。
另请参阅:
2023 年 8 月 17 日
JSON 查看器在浏览器选项卡中自动设置 JSON 响应和文件的格式并突出显示。 当 Web 服务器使用编码为 JSON 的数据响应 HTTP 请求时,这些数据并不总是容易读取,有时会作为一行文本返回。 JSON 查看器会更改返回的数据,使其更易于阅读。 JSON 语法以不同的颜色突出显示,对象属性显示在自己的行上并缩进,对象可以折叠或展开。
另请参阅:
2023 年 7 月 24 日
涵盖:
console.table()
.另请参阅:
2023 年 4 月 26 日
涵盖:
另请参阅:
2023 年 3 月 28 日
涵盖:
另请参阅:
2023 年 2 月 16 日
涵盖:
prefers-color-scheme
。另请参阅:
2023 年 1 月 17 日
涵盖:
另请参阅:
2022 年 12 月 16 日
涵盖:
另请参阅:
2022 年 11 月 8 日
涵盖:
另请参阅:
2022 年 10 月 6 日
了解如何在 Microsoft Edge DevTools 中使用 网络 工具。
涵盖:
另请参阅:
2022 年 10 月 3 日
涵盖:
另请参阅:
2022 年 9 月 6 日
涵盖:
另请参阅:
2022 年 9 月 1 日
此稍早 (2022 年 9 月) 视频显示了 DevTools 的旧 UI:
涵盖:
另请参阅:
2022 年 8 月 5 日
涵盖:
另请参阅:
2022 年 7 月 5 日
涵盖:
另请参阅:
2022 年 6 月 21 日
Microsoft Edge DevTools 中的 3D 视图 工具提供要检查的网页的三维表示形式。 使用 3D 视图 工具调试常见的 Web 开发问题,例如:
另请参阅:
2022 年 6 月 9 日
如何选择最适合你进行编码和调试的 UI 语言。 Microsoft Edge DevTools 支持 13 种以上的不同语言。
另请参阅:
2022 年 6 月 1 日
涵盖:
另请参阅:
2022 年 5 月 31 日
样式 <select>
元素具有挑战性。 实验 <selectmenu>
(或 <selectlist>
) 元素承诺通过使 Web 开发人员能够设置元素的所有部分的样式来克服剩余的限制。
2024 年 6 月更新:此新元素仍处于试验阶段。 元素 <selectmenu>
在 2023 年重命名为 <selectlist>
。
另请参阅:
<selectlist>
演示<select>
实际元素样式 - 有关设置元素和 元素样式 <select>
的 <selectmenu>
博客文章。2022 年 5 月 20 日
每个 Web 产品都有问题。 Microsoft Edge DevTools 问题 工具分析当前网页,并报告按类型分组的问题,包括辅助功能、兼容性、性能等。
适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展可直接在源代码中提供问题。
已发布的产品可能有问题。 根据你的反馈,我们添加了筛选问题的有用方法。 可以禁用来自第三方库的问题,并选择要查看其相关问题的浏览器。
另请参阅:
2022 年 5 月 12 日
了解 CSS 滚动链接动画功能,以及如何在不使用 JavaScript 的情况下使用它在网页上创建阅读进度指示器。 这是整个 Web 平台的一项功能,不仅Microsoft Edge。
从 2023 年 7 月 21 日起,此功能不再处于试验阶段,现在在无标志的 Microsoft Edge 中受支持。 从 2022 年说明:CSS 滚动链接动画是 Microsoft Edge 中的一项实验性功能;若要尝试此功能,请转到 edge://flags
,然后启用 试验 Web 平台功能 设置。
另请参阅:
2022 年 5 月 5 日
了解如何自定义 DevTools 以满足你的需求。 涵盖:
另请参阅:
2022 年 4 月 28 日
在 Web 上设置文本范围的样式非常有用,但从历史上看,这是一件复杂的事。
CSS 自定义突出显示 API 是在 Web 上突出显示文本范围的未来。 此 API 为 Web 开发人员提供了 JavaScript 和 CSS 功能,使设置任意范围文本的样式更加轻松高效。
另请参阅:
2022 年 4 月 28 日
涵盖:
另请参阅:
2022 年 4 月 19 日
涵盖:
另请参阅:
2022 年 3 月 21 日
涵盖:
另请参阅:
2022 年 3 月 17 日
Microsoft Edge 为不包含它的图像提供自动生成的替换文字。 自动生成的替换文字可帮助屏幕阅读器等辅助技术的用户发现 Web 上图像的含义或意图。
许多失明或弱视人士主要通过屏幕阅读器体验网络:一种可大声朗读每页内容的辅助技术。 屏幕阅读器依赖于图像标签 (可选文本或“替换文字”) ,这些标签允许他们描述视觉内容(如图像和图表)以便用户可以理解页面的完整内容。 替换文字对于使 Web 易于访问至关重要,但经常被忽视。 屏幕阅读器处理的图像中,超过一半缺少替换文字。
另请参阅:
2022 年 2 月 23 日
涵盖:
另请参阅:
2022 年 2 月 1 日
涵盖:
另请参阅:
2021 年 12 月 9 日
若要调试 DOM 内存泄漏,请使用:
分离 元素 工具可帮助你调查和解决 DOM 内存泄漏问题。
当应用程序的 JavaScript 代码将越来越多的对象保留在内存中,而不是释放这些对象供浏览器进行垃圾回收时,会发生内存泄漏。 我们与Microsoft Teams 开发人员一起构建了 分离元素 工具,它已帮助我们查找并修复了许多自己的网站和应用中的内存泄漏问题。
另请参阅:
2021 年 12 月 9 日
涵盖:
另请参阅:
2021 年 12 月 8 日
涵盖:
另请参阅:
2021 年 11 月 22 日
Microsoft Edge 团队与 Chromium 开源项目协作指定并实现了新的 EyeDropper API。 在 问题 - WICG/吸管器 | github.com 中提供反馈。
许多创意应用程序使用户能够从应用窗口的某些部分甚至整个屏幕(通常使用眼滴器隐喻)中选择颜色。 通过 EyeDropper API,作者可以在 Web 上构建自定义颜色选取器时使用浏览器提供的吸管器。
另请参阅:
2021 年 11 月 12 日
涵盖:
更新:从 Microsoft Edge 131 开始,删除了Visual Studio Code主题功能,此类主题还原默认主题:
另请参阅:
2021 年 10 月 11 日
涵盖:
另请参阅:
2021 年 5 月 25 日
Microsoft Edge 为开发人员带来了引人入胜且一致的平台和工具。 随着旧版浏览器逐步退出支持,Edge 将很快成为 Microsoft 在 Windows 10 上唯一支持的浏览器。 了解 Edge 平台、工具和 Web 应用的最新内容。
涵盖:
另请参阅:
2021 年 3 月 2 日
Microsoft Edge 支持渐进式Web 应用 (PWA) ,它们是增强应用程序的可发现性和参与度的机会。 Web 平台的新功能。 这些新式 Web 应用程序如何与 Microsoft Windows 无缝集成。
涵盖:
另请参阅:
2020 年 9 月 22 日
Microsoft Edge 开发人员工具有助于简化 Web 开发、测试和自动化。 了解我们如何在工具和应用程序中确定辅助功能优先级,以及如何帮助其他人实现相同的功能。
涵盖:
另请参阅:
YouTube:
培训
模块
本模块涵盖了有关辅助功能主题的各种概念,以及如何在 Web 开发过程中将其添加到 Web 应用程序。 你将了解正确使用 HTML 标记来描述信息的重要性,以及你可以对网站进行的各种改进。
认证
Microsoft Certified: Power Platform Developer Associate - Certifications
演示如何使用 Microsoft Power Platform Developer 简化、自动化和转换业务任务和流程。
文档
我们需要的 Web 计划 - Microsoft Edge Developer documentation
跨浏览器计划侧重于识别 Web 平台中缺少的特性和功能,以便作为 Web 标准或浏览器功能进行潜在开发。
DevTools (Microsoft Edge 129) 中的新增功能 - Microsoft Edge Developer documentation
唯一断点图标。 修复了 CSS 选择器统计信息复制表。 添加了活动栏图标。 修复了安全工具图标和设备仿真。 等等。
DevTools (Microsoft Edge 130) 中的新增功能 - Microsoft Edge Developer documentation
内存工具中的分离元素配置文件。 改进了堆快照中 JavaScript 对象的名称。 在网络控制台中创建集合或环境。 修复了图标 bug。 限制时的性能选项卡图标。 高对比度警告计数。 等等。