在 iPad 上调试 WebRTC

作者：Olivier Anguenot
译自：https://www.webrtc-developers.com/debugging-webrtc-on-your-ipad/

在移动或平板设备（尤其是 iPad）上调试 WebRTC Web 应用程序，目前仍是一项挑战，主要原因是这些设备上没有现成的必要工具和开发环境。

相比之下，iPad 就像一头野生动物，难以直接互动：没有 localhost、需要 HTTPS，而且没有可以直接访问的内置开发者工具。

那么，如何验证应用程序是否运行顺畅，而无需在测试服务器上等待发布？

更重要的是，为什么现在必须在 iPad 上 Safari 以外的浏览器上测试应用程序？

苹果和欧盟法规

随着 2024 年 3 月 iOS 17.4 的发布，苹果对其移动操作系统进行了重大更改，以遵守新的欧盟法规。

苹果将​​首次允许其他浏览器引擎在 iOS 上运行——但仅限于欧盟用户。

自 App Store 推出以来，Apple 已允许使用多个浏览器，但只允许使用一个浏览器引擎：WebKit。这意味着 iOS 上的 Chrome 并不像桌面上的 Chrome 那样是真正的 Chrome，由于这些限制，在 iOS/iPadOS 上进行 WebRTC 开发和故障排除尤其令人沮丧。

简而言之，WebKit 是驱动 Safari 的引擎，但它并不是唯一可用的引擎。谷歌的 Chrome 是基于Blink引擎构建的，它是当今大多数浏览器使用的更广泛的Chromium项目的一部分。Edge、Brave、Opera 和许多其他浏览器都使用 Chromium 和 Blink，而 Mozilla 的 Firefox 则运行在自己的引擎Gecko上。

根据该规定，从App Store下载的浏览器将使用自己的原生引擎。

虽然这一变化可能不会显著改变浏览器市场份额（因为用户倾向于坚持使用他们喜欢的浏览器），但大多数欧盟用户不会注意到这一点。然而，对于开发人员来说，这意味着需要做额外的工作来为 iPad 和 iPhone 上的应用程序支持不同的网络引擎。:-)

因此，在 iOS 和 iPad 上，是时候彻底测试您的应用程序在 Chrome 中的表现了。测试其他浏览器可能不那么重要。

iPad 是苹果的，而苹果是一个封闭的生态系统

这意味着什么？如果没有 Mac，在 iPad 上调试 Web 应用程序会非常受限且困难。

您可以尝试其他付费解决方案，例如Inspect 。

虽然您可以在 iPad 上使用 Chrome 并通过 chrome://inspect 查看日志，但这并不理想，因为日志会在单独的选项卡中打开，并且缺乏标准的 Chrome 控制台格式。

就我个人而言，我使用基于 Apple 的开发设置，该设置支持远程调试，我将向您展示如何做到这一点。

如果您想要支持 iPad 和 iPhone 等 Apple 设备，依靠 Mac 是最好的方法！

地狱般的证书链

注意：这些问题并非 Mac 独有——在 Android 设备上测试时您也会遇到同样的挑战。

大多数情况下，在开发过程中，您在本地运行环境并使用 HTTP。

在桌面浏览器上测试时，这不是问题：WebRTC API 通过 HTTP 在本地主机上运行良好。

但是，当您想从平板电脑、手机或第二台计算机进行测试时，问题就出现了。在这些情况下，你需要一个公共地址或域来连接，这需要使用 HTTPS。

过去，我尝试过创建自己的证书并将其添加到 keychain 中，但结果因浏览器而异，而且通常只能暂时起作用。我没有花太多时间在这上面，所以可能错过了一些细节。我知道有办法让它可靠地工作，而且有很多关于这个主题的教程。

现在，我更喜欢使用 ngrok 之类的隧道工具将我的本地服务器安全地暴露给云端。

通过使用ngrok，我解决了两个关键问题：

• 从另一台设备访问我的本地开发环境，而无需不断检查我的内部 IP 地址。
• 使用受信任的 SSL 证书通过 HTTPS 为我的本地开发提供服务。

在我的 Mac 上安装 ngrok 非常快捷简单，几秒钟之内，我就可以使用 HTTPS 在 iPad 上测试本地应用程序，而不会出现任何与 SSL 相关的问题。

对于本地开发，如果您不想管理自己的证书，ngrok 或类似工具可以提供可从外部访问的公共 URL 或端点。仅适用于开发目的！

调试应用程序

现在您的网络应用程序已在 iPad 上启动并运行，下一步就是调试。调试意味着访问日志消息、设置断点以及实时检查代码。

从这里就会开始欣赏 Safari 😅

为什么？因为您需要使用 Mac 上的 Safari 来远程访问 Web Inspector。此方法可让您调试 iPad 上的任何浏览器 – 无论是 Safari、Chrome、Edge 还是 Firefox。

让我们来看看如何做到这一点！

为 Web 开发人员启用 Safari 功能

默认情况下，Safari 会隐藏 Web 开发人员工具，这意味着您将无法访问控制台日志。

要启用它们，请打开“Settings”并导航到“Advanced”部分。在页面底部，您应该会看到“Show features for Web developers”选项。确保选择它！

完成此操作后，将出现一个新的开发菜单。在这里您可以访问远程 Web 检查器。

注意：有趣的是，使用 Safari 技术预览版进行远程 Web 检查时遇到的问题较少。偶尔，当前版本的 Safari 无法识别我的 iPad。

在浏览器中启用 Web 检查器

接下来，转到您的 iPad 并打开您想要使用的浏览器：Chrome、Edge、Safari 或 Firefox。

在浏览器设置中，找到并启用Web Inspector选项。

注意：我在 Firefox 中找不到此选项，但无需启用它即可工作。

将 iPad 连接到 Mac

使用 USB-C 线将 iPad 连接到 Mac。

代表您的 iPad 的新条目应该会出现在Mac 上 Safari 的“Develop”菜单中。

远程调试您的应用程序

在 iPad 的浏览器中打开您的 ngrok URL 并开始使用它。

在Mac 上 Safari 的“Develop”菜单中，您应该会看到 iPad 上打开的网页的条目。

单击它将在你的 Mac 上启动 Safari Web Inspector。

就这样！现在您可以访问开发人员工具，就像直接在 iPad 上打开一样。

注意：如果您没有看到 iPad 上打开的网页，请尝试关闭并重新打开 iPad 上的浏览​​器。

添加断点，检查网络数据交换

在 Web Inspector 的Sources面板下，您可以找到您的文件并设置断点进行实时调试，查看变量的内容等等。

网络面板将允许您查看所有交换的请求和响应。

有关Safari Web Inspector 的更多信息可以在Apple 开发者平台 – Safari Web Inspector上找到。

注意：根据您的设置和工具，您可能能够通过 Wi-Fi 或使用 Xcode 连接到 iPad。这尚未经过测试。

结论

总之，我收到了许多主要使用 Windows 的 Web 开发人员的询问，正如前面提到的，不幸的是我没有针对该环境量身定制的解决方案。

然而，对于使用 macOS 的 Web 开发人员来说，本文概述的工具和方法提供了一种在 iPad 上实时调试 Web 应用程序的直接方法。

通过利用 Safari Web Inspector 等功能和 ngrok 等工具，调试不仅变得简单，而且效率更高。这个过程乍一看可能很艰巨，但只要设置正确，就可以轻松完成。

附录

在 Android 设备上调试（使用 Chrome 浏览器）的方法与此类似： 在平板电脑上轻按 7 次版本号启用 “开发者模式 ”并激活 USB 调试选项后，就可以使用 chrome://inspect 命令直接从 Mac 访问远程 “开发者工具”。

不要嫉妒，每个人都有自己的远程调试！