用 PC 调试 ipad safari答案

【问题标题】：Debug ipad safari with a PC用 PC 调试 ipad safari
【发布时间】：2013-12-05 18:46:42
【问题描述】：

我想在我的 ipad 上的 Safari 上测试我的网站。我只有另一台电脑。有没有办法让我像 ADB 一样使用移动 Chrome 进行远程调试？我在 StackOverflow 上搜索，似乎有一个 Adobe Edge Inspect CC，但我不知道这是否是一个不错的选择。

谢谢！

【问题讨论】：

标签： ios ipad debugging mobile-safari

【解决方案1】：

2019 年 10 月更新

此解决方案不适用于 IOS 12+（resource 1、resource 2）。

于 2017 年 6 月 24 日更新和测试

在 Windows 8 及更新版本上使用 Chrome：

下载安装Node
下载并安装 iTunes 并将其连接到您的设备。（应向您的 iPad 显示一个弹出窗口以获取授权） .请务必在您的 iPad 中启用网络检查器
下载并安装remote webkit adapter

使用 Powershell（以管理员身份）：

npm install remotedebug-ios-webkit-adapter -g

执行适配器：

使用 Powershell（以管理员身份）：

remotedebug_ios_webkit_adapter --port=9000

你应该得到类似的输出：

C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...

打开 Chrome 并转到以下链接：

chrome://inspect/#devices

单击“发现网络目标”旁边的配置并添加以下内容： 本地主机：9000

确保在 safari 上打开您要调试的网页，您应该在 Remote Target

下的 chrome 检查器页面上看到它

Extra step for iOS 11感谢@skaurus

【讨论】：

太好了，这是迄今为止最简单的解决方案。您还可以通过访问此链接chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1 使用内置的 DevTools
我已经在 Windows 10 上使用 Chrome 和 Canary 尝试过上述操作，但浏览器找不到设备。我今天下载了最新的 iTunes，用管理员权限执行了 iTunes。与 ios...proxy.exe 相同。有什么想法吗？
@Lemmy4555 ios_webkit_debug_proxy.exe 的注释指出：由于安全原因，https URL 将不起作用；将 http 或 force-allow 与 URL 栏的屏蔽图标一起使用。不确定这是我上面错误的原因，因为我没有收到任何安全防护图标错误。感谢您的回复。
设法让它在带有 iOS10 的 Windows 10 中运行。我需要下载调试代理的 x64 版本，因为其他版本引发了错误（直接链接：sourceforge.net/projects/ios-webkit-debug-proxy-win32/files/…）此外，提供的 URL 刀片对我不起作用，只有第二个 URL 可以。
这在 Win 10 + iOS 11 上对我不起作用，但我在这里找到了解决方案：github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/79

【解决方案2】：

请参阅monkeythedev's answer，了解在装有 iOS 9+ 的 Windows 8+ 机器上进行调试的最简单方法。我使用来自该答案和其他来源的信息以及recorded a screenshare 更新了my blog post。如果需要，下面的方法应该仍然适用于 iOS 8 及更低版本。

实际上有一种非常简单的方法可以在 Windows 机器上使用 Firefox 在 iOS 上的 Safari 中调试网站。

注意：Ryan 在下面的 cmets 中写道，这可能仅适用于 iOS 8 及以下版本。我无法确认，但请注意。

我为此写了detailed blog post，但这里是重点：

安装 iTunes 以获得随附的“Apple Mobile Device Support”和“Apple Application Support”应用程序。（如果需要，请在之后卸载 iTunes）
通过 USB 连接您的 iOS 设备。
Enable web inspector 在 iOS 上（适用于 iOS 6 及更高版本）。
在您的 iOS 设备上打开 Safari 并浏览到一个网站。
在您的 Windows 机器上打开 Firefox，然后按 Shift + F8 打开 WebIDE，如果您使用 Firefox 开发者版（任何版本）或 Firefox 37，则其中应包括必要的 Valance 插件及以后（任何频道）。
由于某种原因，在我下载ios-webkit-debug-proxy-win32 程序并运行它之前，我无法让它连接到我的iOS 设备。它会打开一个空白的命令提示符，但是在我打开它后回到 WebIDE 后，我断开了连接，然后重新连接，我看到了我在 Safari 中打开的网站的调试信息。不过，您可能不需要这样做，因为其他用户只需向他们的防火墙添加一个例外，然后断开/重新连接，就可以了。

可用的调试信息不像 Chrome 开发者工具那样详尽（特别是没有“网络”标签），但足以让我能够在控制台中查看正在发生的事情。

【讨论】：

仅供参考，对于 iTunes（驱动程序/库）依赖项，如果不想安装（然后卸载）iTunes，您可以使用 MSI/EXE 提取工具（或类似 WinRAR 的等效工具）查看/提取 iTunes 安装程序内容（如 zip 文件），然后仅保留驱动程序/库文件。它们是具有上述名称的 MSI 文件。我一直讨厌安装/使用 iTunes。驱动程序可以很好地保留和重复使用，直到您需要新的驱动程序（比如新的 Apple 设备、新功能等）
我不必安装 ios-webkit-proxy-win32，但是当我单击打开 safari 设备时确实收到了防火墙警告。我做了一个例外，但它第一次仍然无法正常工作，但在我断开连接并重新连接后它工作得很好。经过数小时的搜索，这个解决方案是迄今为止我发现的最简单的解决方案，先生，您应该得到所有的支持。
根据此线程 (github.com/mozilla/valence/issues/199)，在 iOS 9 中使用此方法似乎存在一些问题
我还必须下载 ios-webkit-debug-proxy-win32（必须使用 ios-webkit-debug-proxy-mingw32 版本）。仍然没有用。然后我在 WebIDE 中点击了“Chrome 桌面”，现在它可以工作了！
我认为它在 iOS 8 之后无法正常工作，如此处所述：developer.mozilla.org/en-US/docs/Tools/Valence。它在 iOS 10 上不适合我。

【解决方案3】：

2018 年更新：

自原始帖子以来，该博客帖子已死且 Telerik App Builder is discontinued 不再提供。添加此更新以通知读者，以防他们不阅读遵循此答案帖子的用户 cmets。至于博客文章，对于那些仍然感兴趣的人，这里是web cached copy。关于博客，我认为该博客所在的公司已经关闭。

如果有机会，我会查看是否保存了应用程序构建器的副本，以便我可以将其发布到网上，供仍然有兴趣使用它的人使用，也许还有博客文章的另一个缓存副本。

原答案

在远程调试时，您可以尝试在 Windows 上使用 Telerik AppBuilder（Windows 客户端）替代 Mac 上的 Safari 调试器。在下面的链接中有一篇不错的博客文章，介绍了执行此操作的步骤。我宁愿不重新发布信息，因为还有屏幕截图，而且有很多文字。但本质上，您安装应用程序，打开它，通过 USB 连接设备，然后您可以在应用程序中找到它并为其打开开发人员工具/调试器。对于非公开网站，您必须使用帖子中记录的一些防火墙配置打开端口 80。

http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder

该工具需要许可证，或者您可以使用试用版，之后将成为基本版。我认为基本版仍然允许您进行调试。我自己试试看。

您也可以尝试这些 iOS 应用，您可以在 iTunes 应用商店中找到它们。它们为您提供移动 Safari 不提供的内置开发人员工具功能（在 iOS 上无需远程调试）。

MIH 工具 - 基础版 https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8

HTTPWatch 基本 https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8

我试了一下，它们至少比你在 iOS 上获得的移动 Safari 更好，除非你需要完全兼容移动 Safari。我猜这些应用的专业版/付费版会为您提供更多/更好的功能。

【讨论】：

使用最新版本的 AppBuilder 2016.04.14.2 和 iOS 9.1，根据博客文章，我无法使其正常工作。 AppBuilder 不再显示 Web Inspector。有人遇到类似问题吗？
telerik 选项似乎需要拥有一个苹果开发者帐户，而我永远无法连接我的设备。我不做任何苹果开发，我只需要检查和调试 safari html/css 缺陷。
博客链接已失效，无法再访问 Telerik Appbuilder：docs.telerik.com/platform/appbuilder/discontinuation
很不幸，它是个好工具。我会看看我是否有一个可以放在本地的缓存副本。但最好现在就找到其他解决方案。
对于那些可能拥有旧 Appbuilder 副本的人，这里是教程的缓存副本：webcache.googleusercontent.com/search?q=cache:https://…

【解决方案4】：

这个问题是 4 年前的问题，但我觉得值得一提的是另一个与平台无关的选项，上面似乎没有提到：

VConsole

这是一种 JavaScript，您可以将其注入到您的页面中，它将覆盖所有本机控制台输出，并将其显示为页面内容之上的叠加层，其详细程度几乎与 Google Chrome 的开发者工具一样好。

在 iOS Safari 以及其他移动浏览器上运行良好 - 只要在浏览器中启用 JavaScript。

如何安装：https://www.npmjs.com/package/vconsole

您将需要 NPM 工具来安装它，但实际上并不需要使用 NPM 来构建您的项目。您可以简单地将 VConsole 安装在单独文件夹中的某个位置，然后从中复制粘贴 vconsole.min.js。

将其注入页面后，将如下所示：

<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>

视觉上非常吸引人，您会在移动/桌面浏览器的页面右下角看到绿色按钮，这将打开控制台叠加层。

非常整洁！

当然，它不提供选择元素、查看计算出的 css 等功能，但如果您正在寻找控制台输出和一些网络报告，这个真的很容易使用。

【讨论】：

让我开心！由于 jsconsole.com 被关闭，我一直在寻找这样的工具！ Iphone 的调试总是给我带来困难，但这个工具很棒。通过在页面中添加几行，我终于得到了有用的调试消息。谢谢你:)
@user2718671 很高兴！
这是一颗宝石！如果您只想进行一些简单的调试，那么迄今为止最简单的解决方案。

【解决方案5】：

2019 年 10 月

AFAIK，对于最近的 IOS 版本，没有从 PC 调试 IOS 的整体解决方案。

但是，您可以使用以下解决方案之一：

在浏览器本身中显示控制台消息。如here 和Sinisa 的回答所述。
“remotedebug-ios-webkit-adapter”不适用于调试 IOS 12+。对于 IOS 11，它需要额外的步骤，并且适用于 IOS 10 以及可能更旧的版本。

【讨论】：

我当前的问题是应用内 javascript 控制台不会从我在 iPad 上的 chrome 中的其他选项卡中输出任何内容。此外，您的两个链接都指向相同的网址。令人遗憾的是，世界上最富有的科技公司之一在没有精通技术的 windows/linux 用户的帮助下无法为开发人员找到调试简单网站的方法。
@JohnF，不确定我是否理解您当前的问题。
约翰F.他们希望你买一台 Mac，你可以从中调试

【解决方案6】：

我使用 PrePros 进行 CSS 预处理，它具有用于移动调试和 Web 检查器的内置服务器。但这仅适用于本地站点，即使仍然...

【讨论】：

【解决方案7】：

根据我的经验，这通常不是移动 Safari 的问题，而是一般的 Safari。在这些情况下，尝试正常的 Safari（适用于 Windows）并查看是否出现错误会有所帮助。如果是这样，通过这种方式进行调试会容易得多。

【讨论】：

在 mac 上进行测试可能会有所帮助，但在 windows 上则无济于事，因为 safari 已过时且不再维护。
在我的 iPad2 (iOS 8.3) 上，在 Safari 的高级设置中显示：“要使用 WebInspector，请使用电缆连接到计算机上的 Safari，然后从“开发”菜单访问您的 iPad。您可以在您的计算机上启用 Safari 高级首选项中的开发菜单”。我可以在 Windows8 上的 Safari5.1.7 上启用开发菜单。但是从那里我不知道如何启动我 iPad 的 Safari 中显示的 html 页面的调试器。
Stonecrusher：我认为它与在 iPad 上远程调试所需的开发者模式不同。
safari 5 是适用于 Windows 的最新版本。这个版本已经完全过时了……

【解决方案8】：

我没有在PC上尝试过，但是你应该可以去http://[DEVICE_IP_ADDRESS]:9999调试。

【讨论】：

我无法让它工作。你能给我指点这方面的说明/文件吗？
我很难相信这会奏效。为什么端口9999？甚至没有意义
你不再需要这个了。您可以使用开发菜单项。这是 5 年前的官方方式。
@StephenJohnson 什么开发菜单以及在哪里？
@CsabaToth 在 Safari 中，您需要打开 Safari 首选项，转到“高级”，然后打开“在菜单栏中显示开发菜单”。

【解决方案9】：

2021 年更新：

这里是 RemoteDebug 的创建者。我为 RemoteDebug 构建了一个名为 Inspect 的替代品，它将所有内容打包在一起，带来愉快的体验，并支持从 Windows、macOS 和 Linux 轻松进行 iOS Web 调试，并具有一些额外的功能，例如截屏和 wifi 调试。

http://inspect.dev

【讨论】：