iOS远程调试

Question

随着最近发布的Chrome for iOS，我想知道如何为Chrome iOS启用远程调试？

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

Answer 1

所选答案仅适用于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服务器复制bookmarklet url（与上面相同）。不幸的是，它不起作用，因为它没有正确编码。因此，打开JavaScript控制台并输入：

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

您现在应该在剪贴板中有url编码的书签。将其粘贴到移动书签下的新书签中。称之为weinre或简单的输入。它应该非常快速地同步到您的移动设备，因此请加载您要检查的页面。然后在url-bar中键入书签名称，您应该将bookmarklet视为自动完成建议。单击它以运行bookmarklet代码：）

Answer 2

<强>更新

这是不最佳答案，请遵循gregers'建议。

新答案：

使用Weinre。

旧回答：

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

以下是http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

的快速翻译

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

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

设置＆gt; Safari＆gt;私人浏览＆gt; OFF

Answer 3

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

您有几个选择。

选项1：Remote-debug Mobile Safari using Safari's inspector. 如果您的问题在Mobile Safari中重现，这绝对是最佳选择。事实上，通过iOS模拟器更容易。

选项2：Use Weinre for a slimmed down debugging experience。 Weinre没有太多功能，但有时它还不错。

选项3：远程调试正常运行的uiWebView。

这是实现这一目标的最佳方式。您需要install XCode。

1. 转到github.com/paulirish/iOS-WebView-App和＆＃34;下载Zip＆＃34;或克隆。
2. 打开XCode，打开现有项目，然后选择刚刚下载的项目。
3. 打开WebViewAppDelegate.m并将urlString更改为您要测试的网址。
4. 在iOS模拟器中运行应用程序。
5. 打开Safari，打开开发菜单，选择 iOS模拟器并选择您的网页浏览。
6. Safari Inspector现在将检查您的uiWebView。

Answer 4

根据我的理解，Google Chrome使用的是iOS的UIWebView，而不是像Android版本那样完整的Chrome实现。

Answer 5

I recommend Vorlon, works like weinre. I like the UI of Vorlon, and it support SSL, my application is in HTTPS, I tried weinre with ngrok, ghostlab and vorlon, only vorlon works fine.

Answer 6

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

问题是注入调试代码有点棘手，因为Chrome不允许您安装bookmarklet。

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

复制bookmarklet JS代码，返回第一个选项卡，使用应调试的页面，并将bookmarklet代码粘贴到位置栏中。

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

Answer 7

我还没试过，但是iOS WebKit debug proxy（ios_webkit_debug_proxy / iwdp）据说可以让你远程调试UIWebView。来自README.md

  

ios_webkit_debug_proxy（又名iwdp）允许开发人员进行检查   通过 真实 上的MobileSafari和 UIWebViews 以及模拟iOS设备   Chrome DevTools用户界面和Chrome远程调试协议。 DevTools   请求被转换为Apple的远程Web检查器服务   调用

Answer 8

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

设置＆gt; Safari＆gt;私人浏览＆gt; OFF

Answer 9

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在localhost上运行的应用程序。有关详细信息，请参阅https://stackoverflow.com/a/45443203/2073920

<强>参考

http://vorlonjs.com

https://ngrok.com

<强>声明

我只是一个用户而且我不隶属于Vorlon.JS和ngrok

Answer 10

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

Answer 11

即使我正在寻找相同的功能，截至今天，它还没有实现。我可以想到两个选择，

1. 我注意到Chrome和Safari的行为完全相同; Chrome甚至支持Safari支持的陀螺仪和其他相关事件。我目前正在调试我的Web App，方法是在Safari上启用调试控制台（通过设置 - ＆gt; Safari）

2. 还可以尝试Adobe Shadow，它允许远程调试/检查和同步。

HTH。

Answer 12

Chromium上存在一个漏洞：https://bugs.chromium.org/p/chromium/issues/detail?id=584905

不幸的是，他们依靠Apple在WKView中打开一个API来实现这一目标，之后可以从Safari获得可能的调试。

Answer 13

我正在使用remotedebug-ios-webkit-adapter， 适用于IOS和调试器在Windows 10上的Chrome中打开。

如果能帮助某人Link

，我们会很高兴

Answer 14

注意：我与Ghostlab的创作者Vanamco没有任何联系。

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

强烈推荐。

Answer 15

iOS WebKit debug proxy是最简单的解决方案-直接在Chrome中调试和实时预览。

Answer 16

  

免责声明：我在BrowserStack工作。 ^{[确认]是否允许发布此内容（Can I suggest a product of the company am working at?）}

在iOS上调试Safari （目前不适用于Chrome，请提前阅读以获取更多详细信息。）

这是如何运作的？

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

将DevTools与Real Phones一起使用

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

使用DevTools在真实手机中执行JavaScript

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

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

在BrowserStack上支持DevTools？

• DevTools可在以下网址获得：

  • 真实设备 - iOS - Safari（适用于iOS Chrome的DevTools在我们的路线图中）
  • Real Devices - Android - Chrome（目前仅在Android设备上提供Chrome）

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

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

有关此问题的更多详情，请参阅Mobile Features page上的 DevTools 部分。

Answer 17

打开Safari桌面iOS

开发 - ＆gt;响应式设计模式

点击设备

下的“其他”

粘贴：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检查工具。