在 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 远程调试协议实现与 iOS 设备通过 USB 进行通信。该协议与用于脚本调试 API 的 Chrome 调试协议兼容，这意味着我们的调试器无需额外的映射逻辑即可工作。

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

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

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

Demo

入门

要开始使用，请打开扩展视图（⇧⌘X (Windows、Linux Ctrl+Shift+X)）。当扩展列表出现时，键入“ios”来筛选列表并安装 Debugger for iOS Web 扩展。然后您需要创建一个启动配置文件，我们会在此处的 README 中详细解释。

支持的功能

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

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

开放式试验

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

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

–

JavaScript 诊断项目经理 Kenneth Auchenberg