在 Windows 和 Mac 上进行 iOS Web 调试

2016 年 8 月 24 日，作者：Kenneth Auchenberg

更新

iOS Web 调试器已弃用，我们现在建议您将 RemoteDebug iOS WebKit Adapter 与 Visual Studio Code 结合使用。要了解更多信息，请参阅这篇介绍 RemoteDebug iOS WebKit Adapter 的指南。

简介

调试在 iOS 设备上运行的网站仅限于一部分开发人员。例如，使用 Safari Web Inspector (Safari DevTools) 需要一个桌面 Safari 实例，而这仅适用于 macOS 用户。今天，我们通过一个新的适用于 Visual Studio Code 的 iOS Web 调试器，使移动 Web 开发人员能够直接从他们的编辑器调试在 iOS 设备上运行的 JavaScript。此调试扩展程序适用于 Mac 和 Windows。

Demo

我们新的 iOS Web 调试器的工作方式与我们在 2 月份推出的 Chrome 调试器非常相似。在底层，它是在 VS Code 中运行的相同调试器，由我们的开源 vscode-chrome-debug-core 库提供支持。为了将我们的调试库连接到 iOS 设备，我们利用了两个开源项目，ios-webkit-debug-proxy 和 ios-webkit-debug-proxy-win32，它们通过 WebKit 远程调试协议实现通过 USB 与 iOS 设备通信。该协议与用于脚本调试 API 的 Chrome 调试协议兼容，这意味着我们的调试器无需额外的映射逻辑即可工作。

通过模拟端口转发实现轻松本地开发

在开发本地运行的网站时，让移动设备访问本地开发服务器（通常是运行在 localhost 上的 HTTP 服务器）是一个繁琐的过程。为了简化此过程，像 Android 这样的平台原生支持端口转发，但 iOS 不支持此功能。

因此，我们找到了一种模拟端口转发的方法，即添加启动 localtunnel 实例的选项，它在后台为指定的 tunnelPort 属性从本地计算机到公共互联网创建 HTTP 隧道。然后，iOS 设备使用此 HTTP 隧道访问您的本地开发服务器，就像访问任何其他公共网站一样。

Demo

入门

要开始使用，请打开扩展视图（⇧⌘X（Windows、Linux Ctrl+Shift+X））。当扩展列表出现时，键入“ios”以过滤列表并安装 iOS Web 调试器扩展。然后，您将创建一个启动配置文件，我们将在我们的 README 中详细解释。

支持的功能

在此版本中，我们支持以下功能：

设置断点，包括在启用源映射时在源文件中设置断点
单步执行
堆栈跟踪
局部变量窗格
调试 eval 脚本、脚本标签和动态添加的脚本
监视
控制台
通过 HTTP 隧道从本地计算机进行虚拟端口转发。

公开实验

我们新的 iOS Web 调试器是一个公开实验，这意味着我们将其发布给公众，以了解集成的 iOS 脚本调试对开发人员是否有价值，所以请告诉我们您的想法。

如果您有任何问题或改进建议，请随时通过 Twitter 或 GitHub 与我们联系。

–

Kenneth Auchenberg，程序经理，JavaScript 诊断