使用 Microsoft Edge 针对 Web 进行开发

使用 Microsoft Edge DevTools、Microsoft Edge 扩展、渐进式Web 应用、WebDriver 自动化、WebView2 等通过 Microsoft Edge 进行 Web 开发。

Microsoft Edge DevTools

Microsoft Edge 浏览器附带称为 Microsoft Edge DevTools 的内置 Web 开发工具。 DevTools 是一组 Web 开发工具,显示在浏览器中呈现的网页旁边。 DevTools 提供了一种用于检查和调试网页和 Web 应用的强大方法。 甚至可以在 DevTools 环境中编辑源文件和创建网站项目。

使用 DevTools,可以执行以下操作:

  • 使用带有可视界面的实时工具检查、调整和更改网页中元素的样式。 检查浏览器存储内容以构造网页的位置,包括 .html.css.js.png 文件格式。

  • 模拟网页在不同设备上的行为方式,并模拟具有不同网络条件的移动环境。 检查网络流量并查看问题的位置。

  • 使用断点调试和实时控制台调试 JavaScript。 查找 Web 应用的内存问题和呈现问题。

  • 查找产品中的辅助功能、性能、兼容性和安全问题,并使用 DevTools 修复发现的辅助功能问题。

  • 使用开发环境将 DevTools 中的更改与文件系统以及从 Web 同步。

请参阅 DevTools 概述

Microsoft Edge 扩展

为 Microsoft Edge 创建扩展,以添加或修改浏览器的功能。 扩展改进了浏览器体验,以提供对目标受众很重要的专用功能。

如果你有基于特定 Web 浏览器或对特定网页功能的改进的想法或产品,则可以创建 Microsoft Edge 扩展。 配套体验的示例包括广告拦截器和密码管理器。

Microsoft Edge 扩展的结构类似于常规 Web 应用,通常包括:

  • 包含基本平台信息的应用清单 JSON 文件。
  • 一个 JavaScript 文件,用于定义浏览器扩展的行为。
  • 定义用户界面的 HTML 和 CSS 文件。

请参阅 Microsoft Edge 扩展概述

渐进式Web 应用

渐进式Web 应用使用开放 Web 技术提供跨平台互操作性。 它们的工作方式类似于支持平台上的本机应用,也类似于其他浏览器上的常规网站。

渐进式Web 应用结合了 Web 和编译应用的最佳功能,为用户提供针对其设备自定义的应用式体验。 渐进式 Web 应用是一个网站,它逐渐增强为功能,如在支持平台上安装的本机应用,同时像其他浏览器上的常规网站一样运行。

渐进式Web 应用的跨平台开发成本比需要每个平台(例如 Android、iOS 和每个桌面操作系统的单独代码库)的已编译应用低得多。

请参阅渐进式Web 应用 (PWA) 概述

WebView2

WebView2 控件由 Microsoft Edge 提供支持,使你能够在本机应用程序中嵌入 web 技术 (HTML、CSS 和 JavaScript) 。 将 Web 平台的无处不在与本机平台的全部功能相结合。

应用图,本机 UI 区域位于左侧和左上角,WebView2 UI 区域位于右上方和底部

下图显示了从最大范围到最大功率的应用范围:

应用范围,从最大覆盖范围但功率较低,到最佳混合混合,到最大功率但覆盖范围更小

在此系列中,混合应用使你能够享受两全其美:Web 平台的无处不在和强度,以及本机平台的强大功能和全部功能。

请参阅 Microsoft Edge WebView2 简介

测试和自动化

下面是在 Microsoft Edge 中自动测试的工具:

  • DevTools 协议 用于检测、检查、调试和分析浏览器。
  • 使用 源试用版 尝试实验性 API。
  • Playwright 通过单个 API 提供跨浏览器自动化。
  • Puppeteer 的 API 通过 DevTools 协议控制 Microsoft Edge。
  • WebDriver 模拟用户与 Microsoft Edge 的交互。
  • webhint linting 检查代码中的错误和最佳做法。

请参阅 Microsoft Edge 中的测试和自动化

Microsoft Edge 的开发提示

生成在 Microsoft Edge 中工作的网站或 Web 应用时,有许多提示和技巧需要注意,包括:

  • 测试可能影响网站与 Microsoft Edge 兼容性的即将发生的更改。
  • 将用户从 Internet Explorer 移动到 Microsoft Edge。
  • 在 Microsoft Edge 中配置跟踪防护。
  • 从网站检测 Microsoft Edge。
  • 自定义“密码显示”按钮。
  • 使用User-Agent客户端提示检测Windows 11。

请参阅 Microsoft Edge 的开发提示

Microsoft Edge IDE 集成

Microsoft 工具的各种功能提供使用 Microsoft Edge、Visual Studio Code 和 Visual Studio 进行开发的集成,以开发使用 Microsoft Edge 中完全集成的产品、网页和 Web 应用。

请参阅 Microsoft Edge IDE 集成

Microsoft Edge 中的辅助功能

通过 Microsoft Edge 及其工具生态系统中广泛的辅助功能,有力地支持网页、Web 应用和支持 Web 的产品的开发。

请参阅 Microsoft Edge 中的辅助功能

如何使用本文档

以下部分是使用 Microsoft Learn 网站的提示。

放大文章中的图像

若要查看屏幕截图或关系图的详细信息,请:

  1. 右键单击图像,然后选择“ 在新选项卡中打开图像”。

  2. 关闭图像选项卡以返回到文章。

在“按标题筛选”文本框中查找关键字和术语

按标题筛选 ”文本框支持:

  • 导航目录 (目录) 。
  • 关键字的索引词查找。
  • 文档的全文搜索。

在左上角的 “按标题筛选 ”框中,输入字词或关键字以查找:

用于导航目录、搜索文档和关键字索引词查找的多用途“按标题筛选”文本框

如果未找到所需文章,请在 所有 Microsoft Edge 文档中选择“搜索词

如果未找到标题词或索引词,则会提供用于全文搜索所有 Microsoft Edge 文档的选项

全文搜索页最初搜索所有 Microsoft Edge 文档。 或者,单击“ 查看所有结果” 链接进行更广泛的搜索:

全文搜索页最初会搜索所有 Microsoft Edge 文档,也可以单击“查看所有结果”链接进行更广泛的搜索

在 Microsoft Edge 开发人员文档中提供反馈或报告问题

提供反馈或输入问题:

若要提交和查看文档特定页面的反馈,请单击页面底部的“ 此页面 ”按钮。