使用PC调试ipad safari

dar*_*ord 66 debugging mobile-safari ipad ios

我想在我的ipad上测试Safari上的网站.我只有另一台电脑.有没有办法像移动Chrome一样进行ADB等远程调试?我在StackOverflow上搜索,似乎有一个Adobe Edge Inspect CC,但我不知道这是不是一个好选择.

谢谢!

mon*_*dev 84

于24/6/2017更新并测试

Windows 8和更新版本上使用Chrome:

  • 下载并安装Node
  • 下载并安装iTunes并将其连接到您的设备.(弹出窗口应显示给您的iPad以获得授权).务必在iPad中允许Web检查器

  • 下载并安装远程webkit适配器

使用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并转到以下链接:

铬://检查/#设备

  • 单击"发现网络目标"旁边的"配置",然后添加以下内容: localhost:9000

确保在safari上打开要调试的网页,您应该在Remote Target下的chrome inspector页面上看到它

iOS 11的额外步骤感谢@skaurus

  • 这在Win 10 + iOS 11上对我不起作用,但我在这里找到了一个解决方案:https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/79 (7认同)
  • 管理以使用iOS10在Windows 10中工作.我需要下载调试代理的x64版本,因为其他版本会引发错误(Direct Link:https://sourceforge.net/projects/ios-webkit-debug-proxy-win32/files/ios-webkit-debug-proxy -win64.zip/download)此外,提供的URL刀片对我不起作用,只有第二个URL. (5认同)
  • 我在Windows 10上尝试了上述功能,使用Chrome和Canary,但浏览器找不到设备.我今天下载了最新的iTunes,用admin priv执行了iTunes.与ios相同... proxy.exe.有什么想法吗? (3认同)
  • 很棒,这是迄今为止最简单的解决方案.你也可以使用内置的DevTools来链接`chrome-devtools://devtools/bundled/inspector.html?ws = localhost:9222/devtools/page/1` (2认同)

Joh*_*ham 32

有关在iOS 8+的Windows 8+机器上进行调试的最简单方法,请参阅Lemmy4555的答案.我使用该答案和其他来源的信息更新了我的博客文章,并记录了一个屏幕共享.如果需要,下面的方法仍然适用于iOS 8及以下版本.

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

注意:Ryan在下面的评论中写道,这可能仅适用于iOS 8及以下版本.我无法确认,但请注意.

我写了一篇关于此的详细博客文章,但以下是重点:

  1. 安装iTunes以获得随附的"Apple移动设备支持"和"Apple应用程序支持"应用程序.(如果你愿意,之后卸载iTunes)
  2. 通过USB连接iOS设备.
  3. 在iOS上启用Web检查器(在iOS 6及更高版本上可用).
  4. 在iOS设备上打开Safari并浏览网站.
  5. 在Windows计算机上打开Firefox,按Shift + F8打开WebIDE,如果您使用的是Firefox Developer Edition(任何版本)或Firefox 37及更高版本(任何频道),则应包含必要的Valance附加组件.
  6. 出于某种原因,在我下载ios-webkit-debug-proxy-win32程序并运行它之前,我无法连接到我的iOS设备.它打开一个空白的命令提示符,但在打开它后我回到WebIDE,我断开连接,然后重新连接,我看到我在Safari中打开的网站的调试信息.您可能不需要这样做,因为另一个用户只需要在防火墙上添加一个例外,然后断开/重新连接,它就可以了.

可用的调试信息并不像Chrome开发者工具那样详尽(特别是没有"网络"选项卡),但这足以让我能够查看控制台中发生的事情.

在此输入图像描述


Dav*_*vid 18

在远程调试时,您可以尝试使用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 App Store中找到它们.它们为您提供了移动Safari不提供的内置开发人员工具功能(在iOS上没有远程调试).

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

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

我给了他们一个尝试,他们至少比你在iOS上获得的移动Safari更好,除非需要针对完整的移动Safari兼容性.我猜这些应用程序的专业/付费版本为您提供更多/更好的功能.

2018年更新:

自原帖以来,博客帖子已经死亡,Telerik App Builder已停产,不再提供.添加此更新以通知读者,以防他们没有阅读此答案帖子后面的用户评论.至于博文,对于那些仍然感兴趣的人,这里是一个网络缓存副本.关于博客,我认为该博客的公司已关闭.

当我有机会的时候,我会看到我是否保存了应用程序构建器的副本,以便我可以在线发布给那些仍然有兴趣使用它的人,以及可能的另一个博客文章的缓存副本.


Sin*_*isa 9

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

控制台

它是一种 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>
Run Code Online (Sandbox Code Playgroud)

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

非常整洁!

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


Ben*_*arp 5

2019 年 10 月

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

但是,您可以使用以下解决方案之一:

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