iOS远程debugging

随着近期发布的iOS版Chrome，我想知道如何为Chrome iOS启用远程debugging？

更新：随着iOS 6的发布，远程debugging现在可以用Safari来完成。

Answer 1

更新：

这不是最好的答案，请按照格雷格的build议。

新答案：

使用Weinre 。

老答案：

您现在可以使用Safari进行远程debugging。 但它需要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菜单顶部）select网站，

正如Simons所指出的，人们需要closures隐私浏览function来进行远程debugging。

设置> Safari浏览器>隐私浏览>closures

Answer 2

所选答案仅适用于Safari。 目前无法在iOS上的Chrome上进行真正的远程debugging，但是与大多数移动浏览器一样，您可以使用WeInRe进行一些简单的debugging。 这是一个设置工作，但让你检查DOM，看样式，更改DOM和控制台玩。

build立：

• 安装nodejs
• npm install -g weinre
• weinre --boundHost -all-
• 打开http：// {wifi-ip-address}：8080 /并复制目标脚本代码
• 将脚本标签粘贴到您的页面（或使用书签）
• 点击debugging客户端用户界面的链接（http：// {wifi-ip-address}：8080 / client /＃anonymous）
• 当客户端下方出现绿线时，连接浏览器

小书签有点麻烦安装。 如果您为桌面设备版和移动版Chrome浏览器启用了书签同步function，那么最为简单。 从本地weinre服务器复制bookmarklet url（与上面相同）。 不幸的是，它不工作，因为它没有正确的url编码。 所以打开JavaScript控制台并input：

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

你现在应该在你的剪贴板中有URL编码的书签。 将其粘贴到“ 移动书签”下的新书签中。 称它为weinre或简单的types。 它应该同步到您的手机相当快，所以加载你想检查的网页。 然后在url-bar中input书签名称，你应该看到书签是一个自动完成的build议。 点击它来运行小书签代码:)

Answer 3

您目前无法直接在iOS上远程debuggingChrome。 它使用的uiWebView可能与Mobile Safari有微妙的不同。

你有几个select。

选项1： 使用Safari的检查器远程debuggingMobile Safari。 如果您的问题在移动Safari再现，这绝对是最好的方式。 事实上，通过iOS模拟器更容易。

选项2： 使用Weinre减lessdebugging经验 。 Weinre没有太多的function，但有时它已经足够好了。

选项3：远程debuggingfunction相同的适当的uiWebView。

这是做到这一点的最好方法。 你需要安装XCode 。

1. 去github.com/paulirish/iOS-WebView-App和“下载邮编”或克隆。
2. 打开XCode，打开现有项目，然后select刚刚下载的项目。
3. 打开WebViewAppDelegate.m并将urlString更改为要testing的URL。
4. 在iOS模拟器中运行应用程序。
5. 打开Safari，打开开发菜单，selectiOS模拟器，然后select你的网页视图。
6. Safari Inspector现在将检查您的uiWebView。

Answer 4

根据我的理解，Google Chrome利用了iOS的UIWebView，而不是象Android那样的Chrome的全面实现。

Answer 5

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

问题是注入debugging代码有点棘手，因为Chrome不允许你安装bookmarklets。

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

复制小书签的JS代码，返回到第一个标签，应该被debugging的页面，并将小书签代码粘贴到位置栏中。

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

Answer 6

我没有尝试过，但iOS WebKitdebugging代理 （ios_webkit_debug_proxy / iwdp）据说可以让你远程debuggingUIWebView。 从README.md

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

Answer 7

我推荐Vorlon ，像Weinre一样工作。 我喜欢Vorlon的用户界面，它支持SSL ，我的应用程序是在HTTPS，我试着用ngrok，ghostlab和vorlon，只有vorlon工作正常。

Answer 8

您还需要closures“隐私浏览”。

设置> Safari浏览器>隐私浏览>closures

Answer 9

Vorlon.JS最适合iOS或任何其他客户端的远程debugging。

1. 只需使用npm i -g vorlon将其全局安装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仪表板上的客户列表中可用

请注意，这种方法也可以用来debugging不在本地主机上使用ngrok运行的应用程序。 有关详细信息，请参阅https://stackoverflow.com/a/45443203/2073920

参考

http://vorlonjs.com

https://ngrok.com

放弃

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

Answer 10

即使我正在寻找同样的function，截至今天，它还有待执行。 但是我可以想到两个select，

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

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

HTH。

Answer 11

Adobe Edge Inspect（ https://creative.adobe.com/products/inspect ）是debugging所有移动设备IOS和Android的另一种方式（不过，不支持Windows Phone）。 它使用weinre进行远程DOM检查/更改。 这不是最快的方法，但它适用于Windows。

Answer 12

在Chromium上有一个开放的错误： https ： //bugs.chromium.org/p/chromium/issues/detail？ id = 584905

不幸的是，他们依靠苹果公司在WKView中打开一个API来实现这一点，之后可能会从Safari中获得debugging信息。

Answer 13

免责声明：我在BrowserStack工作。 ^{[确认]是否允许发布这个（ 我可以build议一个公司的产品在工作吗？ ）}

在iOS上debuggingSafari （截至目前不适用于Chrome，请阅读详情。）

这是如何工作的？

• 您需要在BrowserStack上的任何真实设备（有模拟器，但需要在真实设备上启动一个会话）开始一个会话，比如说iPhone 6S – Safari / Chrome（Chrome还没有开发工具，但是在我们的路线图中）
• inputurl
• 您可以触发DevTools来检查在BrowserStacks远程设备上打开的网页。 我已经在下面分享了相同的屏幕。

---

与真正的手机使用DevTools

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

---

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

切换到Console选项卡，执行JavaScript代码，检查console.log()输出等…

---

networking选项卡，检查请求标题，响应等…

---

在BrowserStack上支持DevTools？

• DevTools可用于：

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

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

注意：你需要购买一个计划来testing所有真实的设备，作为一个免费的用户，你会得到几个真正的Android设备（包括平板电脑）和一对真正的iOS设备（包括平板电脑）。 此外，强调真实设备这个词，因为它们也提供仿真器。

有关详情，请参阅移动function页面上的DevTools部分。

Answer 14

打开Safari桌面iOS

开发 – >响应式devise模式

点击设备下的“其他”

粘贴：Mozilla / 5.0（iPad;像Mac OS X的CPU OS 10_2_1）AppleWebKit / 602.1.50（KHTML，如Gecko）CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

使用Safari检查工具。