调试渐进式Web 应用

渐进式Web 应用 (PWA) 是使用 Web 技术生成的。 因此，Microsoft Edge DevTools 中提供的所有工具也有助于 PWA。 若要了解详细信息，请参阅 Microsoft Edge DevTools 文档。

PWA 还使用服务辅助角色、Web 应用清单以及其他需要特殊调试工具的特定功能和 API。

打开 DevTools

PWA 可以本地安装并在独立窗口中使用，也可以在 Web 浏览器中使用，就像网站一样。

在这两种情况下，都可以以相同的方式在 PWA 上打开 DevTools。 若要打开 DevTools，请使用以下方法之一：

• 右键单击应用用户界面中的任何项目，然后选择“ 检查”。
• 按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。
• 按 F12。

若要了解详细信息，请参阅 DevTools 概述中的 Open DevTools。

测试更改

开发 PWA 时，需对源代码进行更改，然后对其进行测试。

测试更改的最快方法是使用 PWA 的本地开发 URL（例如 http://localhost:8080）在 Web 浏览器中加载 PWA。 在浏览器中进行测试速度更快，因为无需先在本地安装 PWA。

若要测试更改，请按 F5 刷新加载 PWA 的浏览器选项卡。

创建缓存静态文件的服务辅助角色后，按 F5 可能不会始终在浏览器中重新加载最新更改。 若要强制浏览器重新加载更改，请使用以下方法之一：

• 打开 DevTools，在浏览器工具栏中右键单击“ 刷新 ”，然后单击“ 清空缓存和硬刷新”。
• 打开 DevTools，打开 应用程序 工具，单击“ 服务辅助角色”，然后选中“ 绕过网络 ”复选框。

若要测试通过在 Web 应用清单中添加代码启用的 PWA 功能，必须安装 PWA。 如果随后对 Web 应用清单进行进一步更改，则必须卸载并重新安装 PWA。 若要了解如何卸载 PWA，请参阅在 Microsoft Edge 中使用渐进式Web 应用管理 PWA。

调试服务辅助角色

PWA 服务辅助角色负责使应用在网络条件下更快、更可靠。

服务辅助角色通过与应用并行运行并截获网络请求来执行此操作。 它有自己的生命周期，独立于应用的生命周期。

若要检查服务辅助角色是否已正确安装，以及它当前处于哪个生命周期状态，请使用应用程序工具的“服务辅助角色”窗格。 若要了解详细信息，请参阅调试渐进式Web 应用 (PWA) 中的服务辅助角色。

若要调试在服务工作线程中运行的 JavaScript 代码，请使用断点，在 源 工具中切换到服务工作线程。 若要了解详细信息，请参阅在 JavaScript 调试功能中更改线程上下文。

即使应用未运行，服务辅助角色也可以运行，并执行后台任务以使应用保持最新状态。 例如，他们可以从服务器提取数据或接收推送消息。

若要调试服务辅助角色后台任务，请使用应用程序工具的后台服务部分。 若要了解详细信息，请参阅 调试后台服务。

查看 Web 应用清单

Web 应用清单定义应用程序的名称、说明、图标和功能。 这些功能是否正常工作取决于它们是否已在清单 JSON 文件中正确输入。

若要检查 Microsoft Edge 是否检测到清单文件及其功能，请使用应用程序工具的“清单”窗格。 若要了解详细信息，请参阅调试渐进式Web 应用 (PWA) 中的 Web 应用清单。

某些 PWA 清单功能具有专用工具。 例如，可以 测试渐进式 Web 应用 (PWA) 协议处理。

查看和编辑本地数据

为了为用户提供丰富而快速的体验，PWA 可以在本地存储数据。 若要查看、编辑和删除存储的数据，请参阅以下 DevTools 文档，具体取决于所选的存储选项：

• 查看缓存数据。
• 查看和更改 IndexedDB 数据。
• 查看和编辑本地存储。
• 查看和编辑会话存储。

若要查看 PWA 使用的存储数据总量、可用配额并删除数据，请使用应用程序工具的“存储”窗格。 若要了解详细信息，请参阅调试渐进式Web 应用 (PWA) 中的存储。

模拟不同的屏幕大小

使用渐进式Web 应用，可以从一个代码库为所有设备提供应用。 若要确保应用适应所有设备的屏幕大小，请使用 DevTools 中的 设备仿真 工具。

若要了解详细信息，请参阅 模拟移动设备 (设备仿真) 。

请注意， 设备仿真 工具仅在浏览器中使用 DevTools 时可用，而当在已安装的 PWA 中使用 DevTools 时不可用。 已安装的 PWA 具有自己的独立窗口，这些窗口很容易调整大小以在不同的屏幕大小下测试应用。