有关使用 Microsoft Edge 进行 Web 开发的视频

发现并了解新的 Microsoft Edge Web 开发技术和产品,包括 DevTools、Web 平台 API 和功能、渐进式Web 应用和 WebView2。

此页包含指向短视频的链接,每个视频仅侧重于一项功能,并包含一个演示。

Microsoft 定期在 Microsoft Edge YouTube 频道上发布新视频,它们也在下面列出。

单击以下列表中的缩略图,watch YouTube 上的相应视频。

DevTools - DevTools 105 中的新增功能

发布于 2022 年 9 月 6 日。

DevTools 105 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 105 中的新增功能

DevTools - 了解 DevTools 用户界面

发布于 2022 年 9 月 1 日。

了解 DevTools UI 视频的缩略图

了解如何组织 Microsoft Edge DevTools UI。 如果你对可用的工具以及 DevTools 界面main部分的功能感到困惑,此视频将帮助你更加舒适。

在此视频中,我们将讨论 UI 结构及其main工具栏和面板及其抽屉区域。 我们还介绍如何查找、打开和关闭工具、还原默认设置,以及查看可用工具列表。

DevTools - DevTools 104 中的新增功能

发布于 2022 年 8 月 5 日。

DevTools 104 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 104 中的新增功能

DevTools - DevTools 103 中的新增功能

发布于 2022 年 7 月 5 日。

DevTools 103 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 103 中的新增功能

DevTools - 在 3D 中调试 Web

发布于 2022 年 6 月 21 日。

DevTools 3D 视图工具视频的缩略图

Microsoft Edge DevTools 中的 3D 视图 工具提供你正在检查的网页的三维表示形式。 使用 3D 视图 工具调试常见的 Web 开发问题,例如:

  • 深层嵌套的 DOM 节点。
  • 文档外元素。
  • 不需要的滚动条。
  • Z 索引堆栈问题。
  • 复合层性能。

若要了解有关 3D 视图工具的详细信息,检查使用 3D 视图工具导航网页层、z-index 和 DOM,或使用 3D 视图工具调试 3D Web

DevTools - 在 DevTools 中使用首选语言

发布于 2022 年 6 月 9 日。

DevTools 本地化视频的缩略图

Microsoft Edge DevTools 支持 13 种不同的语言。 在此视频中,团队演示如何选择最适合你进行编码和调试的语言。

若要了解有关更改 DevTools 语言设置的详细信息,检查更改 DevTools 语言设置

若要报告任何翻译错误,检查联系 Microsoft Edge DevTools 团队

DevTools - DevTools 102 中的新增功能

发布于 2022 年 6 月 1 日。

DevTools 102 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 102 中的新增功能

Web 平台 - 使用新<selectmenu>元素完全设置 下<select>拉部分的样式

发布于 2022 年 5 月 31 日。

selectmenu 视频的缩略图

样式 <select> 元素具有挑战性。 实验 <selectmenu> 元素承诺通过使 Web 开发人员能够设置元素的所有部分的样式来克服剩余的限制。

若要详细了解如何设置元素和新元素的<selectmenu>样式<select>,请参阅博客文章为实际设置元素样式<select>

DevTools - Edge DevTools 和 VSCode 中的高级问题筛选

发布于 2022 年 5 月 20 日。

DevTools 问题筛选视频的缩略图

每个 Web 产品都有问题。 Microsoft Edge DevTools 问题 工具分析当前网页,并报告按类型分组的问题,包括辅助功能、兼容性、性能等。

如果你有Visual Studio Code,则适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展会直接在源代码中提供问题。

已发布的产品也可能有很多问题。 根据你的反馈,我们添加了筛选问题的有用方法。 例如,可以禁用来自第三方库的问题,并选择要查看其问题的浏览器。

若要了解有关“问题”工具的详细信息,请参阅 使用“问题”工具查找和修复问题

若要详细了解适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展,请参阅适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展

Web 平台 - 创建不使用 JavaScript 的滚动链接动画

发布于 2022 年 5 月 12 日。

滚动链接动画 API 视频的缩略图

了解即将推出的 CSS 滚动链接动画功能,以及如何在不使用 JavaScript 的情况下使用它在网页上创建阅读进度指示器。

CSS 滚动链接动画是 Microsoft Edge 中的一项实验性功能。 若要试用此功能,请转到 edge://flags ,然后启用 “试验 Web 平台功能 ”设置。

若要使用视频中显示的演示应用程序,请参阅呈现的 阅读器演示 及其 源代码

若要详细了解 CSS 滚动链接动画功能,请参阅 MDN 上的 @scroll-时间线

DevTools - 自定义 Microsoft Edge 开发人员工具和快速功能访问

发布于 2022 年 5 月 5 日。

DevTools 自定义视频的缩略图

了解如何自定义 DevTools 以满足你的需求。

此视频介绍如何停靠或取消停靠 DevTools、打开新工具以及关闭不需要的工具。 它介绍如何在底部抽屉中移动工具并自定义文本大小和主题。 该视频还介绍了如何使用命令菜单键盘快捷方式快速自定义 DevTools。

DevTools - DevTools 101 中的新增功能

发布于 2022 年 4 月 28 日。

DevTools 101 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 101 中的新增功能

Web 平台 - 使用 CSS 自定义突出显示 API 突出显示 Web 上的文本

发布于 2022 年 4 月 28 日。

CSS 自定义突出显示 API 视频的缩略图

在 Web 上设置文本范围的样式非常有用,但从历史上看,这是一件复杂的事。

新的 CSS 自定义突出显示 API 是在 Web 上突出显示文本范围的未来。 它为 Web 开发人员提供了 JavaScript 和 CSS 功能,使设置任意范围文本的样式更加轻松高效。

有关详细信息,请参阅 CSS 自定义突出显示 API:在 Web 上突出显示文本范围的未来

DevTools - DevTools 100 中的新增功能

发布于 2022 年 4 月 19 日。

DevTools 100 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 100 中的新增功能

DevTools - DevTools 99 中的新增功能

发布于 2022 年 3 月 21 日。

DevTools 99 视频中的新增功能缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 99 中的新增功能

DevTools - DevTools 98 中的新增功能

发布于 2022 年 2 月 23 日。

DevTools 98 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 98 中的新增功能

DevTools - DevTools 97 中的新增功能

发布于 2022 年 2 月 1 日。

DevTools 97 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 97 中的新增功能

DevTools - DevTools 96 中的新增功能

发布于 2021 年 12 月 9 日。

DevTools 96 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 96 中的新增功能

DevTools - 使用 Microsoft Edge 分离元素工具调试内存泄漏

发布于 2021 年 12 月 9 日。

分离元素视频的缩略图

我们很高兴地宣布在 Microsoft Edge DevTools 中推出新的分离元素工具,该工具可帮助你调查和解决 DOM 内存泄漏问题。

当应用程序的 JavaScript 代码将越来越多的对象保留在内存中,而不是释放这些对象供浏览器进行垃圾回收时,会发生内存泄漏。 我们与 Microsoft Teams 开发人员一起构建了此工具,它已帮助我们查找并修复了许多自己的网站和应用中的内存泄漏问题。

有关详细信息,请参阅 使用分离元素工具调试 DOM 内存泄漏,并阅读相应的博客文章 使用 Microsoft Edge 分离元素工具调试内存泄漏

DevTools - DevTools 95 中的新增功能

发布于 2021 年 12 月 8 日。

DevTools 95 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 95 中的新增功能

Web 平台 - EyeDropper API

发布于 2021 年 11 月 22 日。

滴眼器 API 视频的缩略图

Microsoft Edge 团队与 Chromium 开源项目协作,指定并实现了新的 EyeDropper API。 在 问题 - WICG/吸管器 | github.com 中提供反馈。

许多创意应用程序使用户能够从应用窗口的某些部分甚至整个屏幕(通常使用眼滴器隐喻)中选择颜色。 通过 EyeDropper API,作者可以在 Web 上构建自定义颜色选取器时使用浏览器提供的吸管器。

有关详细信息,请参阅 使用 EyeDropper API 选取屏幕上任何像素的颜色 | web.devEyeDropper API - Web API |MDN developer.mozilla.org

DevTools - DevTools 94 中的新增功能

发布于 2021 年 11 月 12 日。

DevTools 94 中的新增功能视频的缩略图

若要详细了解 Microsoft Edge DevTools 团队的最新公告,请参阅 DevTools 94 中的新增功能