iOS远程调试

在最近发布的iOS版Chrome浏览器中，我想知道如何为Chrome iOS启用远程调试？

更新：随着iOS 6的发布，现在可以使用Safari进行远程调试。

更新：

这不再是最佳答案，请遵循格雷格斯的建议。

新答案：

使用Weinre。

旧答案：

现在，您可以使用Safari进行远程调试。但这需要iOS 6。

这是http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector的快速翻译

1. 通过USB将iDevice连接到Mac
2. 在Mac上打开Safari并激活开发工具
3. 在您的iDevice上：转到“设置”>“ safari”>“高级”，然后激活Web检查器
4. 使用iDevice转到任何网站
5. 在Mac上：打开开发人员菜单，然后从iDevice（位于顶部Safari菜单）中选择网站。

正如Simons指出的那样，需要关闭私有浏览才能使远程调试工作。

设置> Safari>私人浏览>关

所选答案仅适用于Safari。目前，无法在iOS的Chrome中进行真正的远程调试，但是与大多数移动浏览器一样，您可以使用WeInRe进行一些简单的调试。设置有点麻烦，但是可以让您检查DOM，查看样式，更改DOM并使用控制台。

建立：

• 安装nodejs
• npm install -g weinre
• weinre --boundHost -all-
• 打开http：// {wifi-ip-address}：8080 /并复制目标脚本代码
• 将脚本标签粘贴到您的页面中（或使用小书签）
• 单击指向调试客户端用户界面的链接（http：// {wifi-ip-address}：8080 / client /＃anonymous）
• 当您在“ 客户端 ” 下看到绿线时，浏览器已连接

小书签安装起来有点麻烦。如果您同时为台式机和移动版Chrome打开了书签同步功能，这是最简单的方法。从本地weinre服务器复制小书签网址（与上面相同）。不幸的是，它不能正常工作，因为它没有正确的url编码。因此，打开JavaScript控制台并输入：

copy(encodeURI('')); // paste bookmarklet inside quotes

现在，您应该在剪贴板中有url编码的书签。将其粘贴到“ 移动书签”下的新书签中。称它为weinre或简单键入的内容。它应该非常快地同步到您的手机，因此加载您要检查的页面。然后，在网址栏中输入书签名称，您应该将小书签视为自动完成建议。单击它以运行bookmarklet代码：)

您目前无法在iOS上直接远程调试Chrome。它使用的uiWebView可能与Mobile Safari略有不同。

您有几种选择。

选项1：使用Safari的检查器远程调试Mobile Safari。如果您的问题在Mobile Safari中重现，则绝对是最佳方法。实际上，通过iOS模拟器更加容易。

选项2：使用Weinre可获得精简的调试体验。 Weinre没有太多功能，但有时足够好。

选项3：远程调试功能相同的适当uiWebView。

这是执行此操作的最佳方法。您需要安装XCode。

1. 转到github.com/paulirish/iOS-WebView-App并“下载Zip”或克隆。
2. 打开XCode，打开现有项目，然后选择刚刚下载的项目。
3. 打开WebViewAppDelegate.m并将其更改为urlString您要测试的URL。
4. 在iOS模拟器中运行该应用。
5. 打开Safari，打开“ 开发”菜单，选择“ iOS Simulator”，然后选择您的Webview。
6. Safari检查器现在将检查您的uiWebView。

据我了解，谷歌浏览器利用的是iOS的UIWebView，而不是像Android那样完全实现Chrome的实现。

许多远程控制台工作正常。http://farjs.com是我的项目，并且我能够成功调试特定于Crome iOS的问题，而在使用它的野生动物园中没有发生。（可能还有其他所有移动浏览器）

问题在于，由于Chrome不允许您安装书签，因此注入调试代码会有些棘手。

相反，您可以在要调试的页面上打开一个选项卡，在farjs.com上打开另一个选项卡，然后单击“ bookmarklet”

复制小书签JS代码，返回第一个选项卡，其中包含应调试的页面，然后将小书签代码粘贴到位置栏中。

最后一步是滚动到位置栏的开头并添加“ javascript：”，因为Chrome会将其删除。

我推荐Vorlon，就像weinre一样。我喜欢Vorlon的UI，它支持SSL，我的应用程序在HTTPS中，我尝试使用ngrok，ghostlab和vorlon进行测试，只有vorlon可以正常工作。

我还没有尝试过，但是可以通过iOS WebKit调试代理（ios_webkit_debug_proxy / iwdp）远程调试UIWebView。从README.md

ios_webkit_debug_proxy（aka iwdp）允许开发人员通过Chrome DevTools UI和Chrome远程调试协议在真实和模拟的iOS设备上检查MobileSafari和UIWebViews。DevTools请求被转换为Apple的Remote Web Inspector服务调用。

Vorlon.JS可用于iOS或任何其他客户端的远程调试。

1. 只需使用全局安装 npm i -g vorlon
2. 使用启动服务器 vorlon
3. 在服务器运行的情况下，在浏览器中打开http：// localhost：1337以查看Vorlon.JS仪表板
4. 最后一步是通过将以下脚本标记添加到您的应用程序来启用Vorlon.JS：
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. 所有连接的客户端（例如iPhone，Android）将在Vorlon.JS仪表板上的客户端列表中可用

请注意，此方法还可用于使用ngrok调试不在本地主机上运行的应用程序。有关详细信息，请参见https://stackoverflow.com/a/45443203/2073920。

免责声明

我只是一个用户，与Vorlon.JS和ngrok没有关系

您还需要关闭“私人浏览”。

设置> Safari>私人浏览>关

甚至我都在寻找相同的功能，而到今天为止，它尚未实现。我可以想到两个选择，

1. 我注意到Chrome和Safari的行为完全相同。Chrome甚至支持陀螺仪和Safari支持的其他相关事件。我目前正在通过在Safari上启用调试控制台来调试Web应用程序（通过设置-> Safari）

2. 也可以尝试使用Adobe Shadow，它可以进行远程调试/检查和同步。

HTH。

Adobe Edge Inspect（https://creative.adobe.com/products/inspect）是调试所有移动设备IOS和Android（尽管没有Windows Phone）的另一种方法。它使用weinre进行远程DOM检查/更改。它不是最快的方法，但是可以在Windows上运行。

Chromium上存在一个未解决的错误：https : //bugs.chromium.org/p/chromium/issues/detail? id =584905

不幸的是，他们要依靠Apple在WKView中打开一个API来实现此目的，之后也许可以从Safari进行调试。

我正在使用remotedebug-ios-webkit-adapter，在Windows 10的Chrome中打开的IOS和调试器对我来说效果很好。

如果能帮助到某个链接，我们将很高兴

注意：我与Ghostlab创作者Vanamco没有任何隶属关系。

能够调试特定于Chrome的问题对我来说很重要，因此我开始寻找可以帮助我解决问题的方法。我最终开心地把钱扔到了Ghostlab 3上。我可以像在台式机上一样浏览Chrome和Safari移动浏览器。它只是给我一个局域网地址，供我要调试的任何设备使用。使用该地址的每个应用程序都将出现在Ghostlab的列表中。

强烈推荐。

打开Safari桌面iOS

开发->响应式设计模式

点击设备下的“其他”

粘贴以下内容：Mozilla / 5.0（iPad； CPU OS 10_2_1，例如Mac OS X）AppleWebKit / 602.1.50（KHTML，例如Gecko）CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

使用Safari检查工具。

免责声明：我在BrowserStack工作。^{[确认]是否可以发布此信息（我可以建议正在使用该公司的产品吗？）}

在iOS上调试Safari（目前不支持Chrome浏览器，有关更多详细信息，请提前阅读。）

如何运作？

• 您需要在BrowserStack上的任何真实设备（有模拟器，但您需要在真实设备上开始会话）上启动会话，例如iPhone 6S-Safari / Chrome（尚无针对Chrome的devtools，但已在我们的路线图中）
• 输入网址
• 您可以触发DevTools来检查在BrowserStacks远程设备上打开的网页。我已经分享了以下相同的屏幕。

在真实电话中使用DevTools

就像桌面浏览器devtools一样，将鼠标悬停在元素上，编辑HTML，CSS。

使用DevTools在真实电话中执行JavaScript

切换至Console标签页，执行JavaScript代码，检查console.log()输出等...

网络标签，检查请求标头，响应等...

是否在BrowserStack上支持DevTools？

• DevTools可用于：

  • 真实设备-iOS-Safari（适用于iOS Chrome的DevTools已列入我们的路线图）
  • 真实设备-Android-Chrome（目前只有Android设备支持Chrome）

• 客户端浏览器必须是Chrome或Firefox。这意味着您需要在MacOSX或Windows上使用Chrome或Firefox浏览器才能使用BrowserStack Real Device DevTools。

注意：您需要购买在所有真实设备上进行测试的计划，作为免费用户，您将获得几个Real Android设备（包括平板电脑）和几个Real iOS设备（包括平板电脑）。此外，强调“ 真实设备 ”一词因为它们也提供模拟器。

有关更多详细信息，请参阅“ 移动功能”页面上的DevTools部分。