iOS远程debugging

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

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

更新:

不是最好的答案,请按照格雷格的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

所选答案仅适用于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议。 点击它来运行小书签代码:)

在这里输入图像描述

您目前无法直接在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。

在这里输入图像描述

在这里输入图像描述

在这里输入图像描述

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

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

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

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

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

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

我没有尝试过,但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检查器服务调用。

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

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

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

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

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

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

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

HTH。

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

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

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

免责声明:我在BrowserStack工作。 [确认]是否允许发布这个( 我可以build议一个公司的产品在工作吗? )

在iOS上debuggingSafari (截至目前不适用于Chrome,请阅读详情。)

这是如何工作的?

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

与真正的手机使用DevTools

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

真正的手机上的DevTools,调试响应网站。


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

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

在使用devtools的真实手机上执行JavaScript


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部分。

打开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检查工具。