所有可用于 Web 开发的工具也对渐进式 Web 应用开发很有帮助，包括库、框架、代码编辑器、构建器、开发者工具、调试器等等。但是，当处理 PWA 的特定功能（例如可安装性、Service Worker、离线支持等）时，某些 PWA 工具会格外有帮助。让我们看看它们是如何运作的。
模拟器和设备
正如基础知识章节中提到的，您应该使用不可知的设计模式，以便在每种情况下都为每位用户提供最佳体验。但是，最好在不同的设备上测试您的体验。
您可能不会拥有数十台物理设备，包括 iPhone、Android 手机、平板电脑以及装有不同操作系统的台式机或笔记本电脑。这就是模拟器和仿真器存在的原因。
简单模拟器
大多数浏览器内的开发者工具都允许您在使用单个桌面浏览器引擎时，在不同的屏幕尺寸或网络条件下测试 PWA。其中一些工具还可以在这些模拟下强制使用不同的用户代理。
一些可用的模拟器包括：
- Chromium DevTools：设备模式、网络限制和多个可用的传感器模拟
- Firefox 开发者工具：自适应设计模式
- Safari Web Inspector：自适应设计模式
一些商业和免费解决方案针对开发者和设计者进行了优化，例如开源 Responsively app。
Apple 模拟器
Apple 提供了 Simulator 应用（以前称为 iOS Simulator），它允许您在各种操作系统版本的不同 iPhone 和 iPad 上测试 Web 应用。
Simulator 应用仅适用于 macOS 计算机，它随附 [Xcode，可在 AppStore 中找到；它模拟具有不同设备配置的 iOS 和 iPadOS。它包括真实的 Mobile Safari 应用和 Web.app 引擎（当您的 PWA 安装在主屏幕上时使用），因此您看到的最终体验相当能代表实际设备。
要启动该应用，在安装 Xcode 后，您可以在 Xcode 菜单中选择 Open Developer Tools，然后选择 Simulator 来打开 Simulator。进入模拟器后，您可以像在真正的 iPhone 或 iPad 中一样打开 Safari。您可以通过选择 File 菜单，然后选择 Open Simulator 菜单来打开其他设备。
以下是在使用 Simulator 测试 PWA 时对 Web 开发者有用的一些快捷方式：
Command-Shift-H：转到主屏幕。Control-Command-Shift-H：访问应用切换器。Command-Right和Command-Left：旋转设备。
Simulator 不是虚拟机，而是在 macOS 之上运行的看起来像 iPhone 或 iPad 的应用，因此它没有自己的 TCP 堆栈。因此，如果您在 Simulator 中使用 localhost，Safari 将指向您的 macOS localhost 设备。
默认情况下，Xcode 仅安装最新版本的 iOS，但您可以转到 Xcode，使用 Preferences 菜单，然后从 Components 选项卡下载旧版 Simulator。
最好在最新版本的 iOS、之前的次要版本以及至少一个之前的主要版本上测试您的 PWA。
Android 模拟器
Android 生态系统提供不同的模拟器，但 Android SDK 中提供的模拟器是最常用的。
作为 PWA 开发者，您还需要 Android 模拟器中的浏览器，这将增加测试的复杂性，因为 AOSP（Android 开源项目）不包含 Google Chrome 或 Play 商店来下载浏览器。因此，并非每个 Android 模拟器都对 PWA 测试有帮助。
Android SDK 附带两个对仿真有用的工具：
- SDK 管理器：下载和更新不同的操作系统版本和插件。
- AVD 管理器：添加、编辑和删除 Android 虚拟设备 (AVD)，每个 AVD 代表一个安装了一个 Android OS 的设备，类似于虚拟机实例。
您只能安装 Android SDK 或 Android Studio，这是一个免费的 IDE，包括带有模拟器的 Android SDK。使用 SDK，您将必须使用命令行来打开和设置模拟器。使用 Android Studio，您可以从“欢迎”屏幕的菜单中打开所需的工具。进入 AVD 管理器后，您可以根据需要创建任意数量的设备，这些设备具有屏幕尺寸、功能和 Android OS 版本的不同组合。
借助 Android 模拟器，您可以检查 PWA 安装支持、整个用户体验以及您正在使用的功能是否按预期工作。
使用 Google Chrome
要在 Android 模拟器中使用 Google Chrome，您必须创建一个包含 Play 服务的 AVD。为此，请确保您用于 AVD 的 SDK 包含 Play 图标，如下图所示：
包含 Play 服务的 AVD 也包含 Play 商店，因此您可以在使用 Google 帐户设置帐户后，使用最新版本更新您的 Chrome。
使用其他浏览器
如果您使用包含 Play 服务的 AVD，您还可以从 Play 商店下载浏览器。
大多数可用于 Android 的浏览器（包括 Samsung Internet、Microsoft Edge、Opera、Firefox 和 Brave）都以 APK（Android 包）的形式提供。如果您有要测试的浏览器的 APK，您只需将该文件拖到模拟器，或通过命令行 使用 ADB 安装它即可。
桌面模拟器
模拟不同的桌面计算机通常通过虚拟机系统完成，例如 VirtualBox 或 VMWare。即使使用这些工具，模拟某些环境也是不可能的，例如在 Windows 或 Linux 上模拟 macOS，而某些其他选项可能需要许可证，例如在 macOS 或 Windows 上模拟 Windows。
使用物理设备
使用实际设备测试 PWA 也是一个好主意。我们不需要拥有多个设备，因为有一些基于云的解决方案，您可以在其中远程使用物理设备。有一些免费解决方案和一些提供免费套餐的商业解决方案。
可用的解决方案之一是 Samsung Remote Test Lab，这是一个免费解决方案，用于在三星设备（包括手机、平板电脑和可折叠设备）上测试 PWA。
远程检查
当您想在实际设备、模拟器或仿真器中调试渐进式 Web 应用时，您可能希望将远程检查会话与桌面浏览器的工具连接起来。
有一些商业工具可用，但所有浏览器也提供了执行此操作的方法，包括：
- WebKit 远程检查器，用于连接到 Safari 和安装在已连接的 iOS 和 iPadOS 设备及模拟器上的 PWA。
- Chromium DevTools 远程调试，用于连接到 Android 上 Chrome、Edge、Samsung Internet 和其他基于 Chromium 的浏览器以及从这些浏览器安装的 PWA，包括已连接的物理设备和模拟器。
- Firefox 远程调试，用于连接到已连接的实际设备和模拟器上的 Android 版 Firefox。
Android 的端口转发
当在 Android 物理设备或模拟器上测试 localhost 上提供的 PWA 时，您会遇到问题，因为 localhost 将指向 Android TCP 堆栈，而不是您的开发机器。
您可能想使用本地 IP 地址来代替 localhost，但这不是一个好主意，因为 Service Worker 和许多功能只能与 HTTPS 连接一起使用，localhost 除外，因此您的 PWA 将无法脱机工作或通过 PWA 标准。
您可以通过在桌面计算机上的 Chromium 浏览器上启用端口转发来解决此问题。在这种情况下，您可以将 Android 设备上 localhost 上的端口桥接到主机计算机的任何来源和端口，包括开发计算机的 localhost。有关更多信息，请查看本指南。
Chromium 浏览器
Chromium 浏览器提供了许多用于调试和测试渐进式 Web 应用的工具，从 DevTools 开始。
大多数基于 Chromium 的浏览器（包括 Samsung Internet、Microsoft Edge 和 Google Chrome）都提供不同的渠道，例如 Stable、Beta 和 Canary。您可以在桌面和 Android 上安装单独的版本，以在浏览器的未来版本中测试 PWA。这使您可以构建和测试尚未广泛提供的功能，或测试弃用和更改，并了解您的应用在新版本中的行为方式。
使用远程检查，您可以使用所有这些工具在桌面和 Android 设备上调试和测试 PWA。
Service Worker 工具
Chromium DevTools 在其“应用”选项卡的“Service Worker”部分中，提供了一整套用于调试 Service Worker 及其 API 的工具。在“Service Worker”部分，您可以：
- 查看 Service Worker 的安装状态和生命周期。
- 更新和取消注册 Service Worker。
- 跟踪更新周期。
- 查看当前 Service Worker 的客户端。
- 向 Service Worker 发送推送消息。
- 注册后台同步和定期后台同步操作。
存储工具
在 Application，然后 Storage 中，您可以查看、预览、更新和删除来自您的来源的数据，例如 Web Storage 条目或 IndexedDB 存储。在 Application、Cache，然后 Cache Storage 中，您可以查看当前来源中存储的所有缓存、预览内容和删除条目。阅读有关缓存工具的更多信息。
此外，从 Application，然后 Storage 中选择，您可以查看当前使用的配额、模拟自定义配额存储，并使用 Clear site data 清除所有数据，包括 Service Worker 注册。
后台服务
Chromium DevTools 还提供了一组后台服务事件记录工具，可通过点击 Application，然后点击 Background Services 找到。这使您可以查看在 Service Worker API 之上，某些事件在后台发生的情况。阅读有关这些工具的更多信息。
Web 应用清单工具
Chromium DevTools 在 Application，Manifest 下提供了一个 Web 应用清单和可安装性标准部分。在此部分中，您可以检查清单是否已正确加载、清单的值、图标的外观、应用 ID 以及 可屏蔽图标的快速检查器。
有关可安装性标准问题的警告和错误也在此部分中显示。
安装调试
在使用 WebAPK 安装模式的 Android 设备上，您可以通过在 Chromium 浏览器中浏览到 about:webapk 来访问已安装应用的列表。
您将在此处看到当前的更新状态并请求 WebAPK 更新。
在桌面计算机上，您可以通过浏览到 about:apps 查看已安装 PWA 的用户友好列表，并通过浏览到 about:app-service-internals 查看调试版本。
Safari
在撰写本文时，Safari 提供的用于 PWA 测试和调试的工具集更有限。没有工具可以查看和调试 Service Worker 的状态和生命周期，没有用于缓存内容的检查器，也没有用于 iOS 和 iPadOS 上 Web 应用清单支持和可安装性的工具。
Safari 仅在稳定版中可用，而适用于 macOS 的 Safari Technology Preview 仅允许您提前试用未来版本的 Safari 的功能。iOS 和 iPadOS Beta 计划有时会包含新版本的 Safari，您可以使用这些版本进行测试。
Service Worker 工具
您可以在 Safari 上（在 macOS 上以及远程用于 iOS 和 iPadOS）执行的操作是为当前正在运行的 Service Worker 打开检查器窗口。
在 macOS 上的 Safari 中，Develop，Service Workers 菜单将列出所有当前正在运行的 Service Worker 会话。您必须在 Develop 菜单中选择要检查的设备以进行远程检查。Service Worker 的上下文将与窗口上下文一起显示在同一子菜单下，位于来源或已安装 PWA 的名称下。
如果您选择其中一个，Safari 将打开一个新窗口，其中包含一个受限制的检查器，仅包括 Consoles、Sources 和 Network Tabs。
Firefox
Firefox 在所有平台上都支持 Service Worker，并且仅在 Android 上支持 App Manifest 以进行安装。您可以通过 USB 远程检查会话访问桌面和 Android 上 PWA 的工具。
您可以使用桌面版本，称为 Firefox Developer Edition。与 Chromium 浏览器一样，Firefox 在桌面和 Android 上也提供不同渠道的版本，包括稳定版、Beta 版和 Dev 版。
PWA 工具
Firefox 上的 Service Worker 检查器是一个基本工具，可在开发者工具的 Application，Service Workers 下找到。它允许您查看当前注册的 Service Worker，检查其运行状态并取消注册。调试 Service Worker 的代码可能仅在某些开发者版本的 Firefox 上可用。
清单工具可在 Application，Manifest 下找到，它仅渲染清单的值并预览图标。
在 Storage 下，您可以管理来源的存储，包括 IndexedDB 和 Cache Storage。
您可以阅读有关 用于 Web 应用的 Firefox 开发者工具的更多信息。