随着最近发布的Chrome for iOS,我想知道如何启用Chrome iOS远程调试?
更新:随着iOS 6的发布,现在可以使用Safari进行远程调试。
随着最近发布的Chrome for iOS,我想知道如何启用Chrome iOS远程调试?
更新:随着iOS 6的发布,现在可以使用Safari进行远程调试。
即使是我也在寻找同样的功能,但到今天为止,它还没有实现。不过我有两个选择,
我注意到Chrome和Safari的行为是完全相同的;Chrome甚至支持Safari支持的陀螺仪和其他相关事件。我目前正在通过启用Safari上的调试控制台调试我的Web应用程序(通过设置->Safari) 也可以试试Adobe Shadow,它允许远程调试/检查和同步。
HTH.
更新:
这已经不是最好的答案了,请听从gregers的建议。
新回答:
使用Weinre。
旧的回答:
现在可以使用Safari进行远程调试。但它需要iOS 6操作系统。
以下是http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector的快速翻译
通过USB连接你的设备和你的Mac 打开Mac上的Safari并激活开发工具 iDevice:进入“设置> safari >高级”,激活web检查器 用你的设备访问任何网站 在Mac上:打开开发者菜单,从你的iDevice上选择该网站(它在Safari菜单的顶部)
正如Simons的回答所指出的那样,需要关闭私人浏览才能进行远程调试。
设置> Safari >私人浏览> OFF
所选答案仅适用于Safari。目前还不可能在iOS上的Chrome中进行真正的远程调试,但与大多数移动浏览器一样,你可以使用WeInRe进行一些简单的调试。它的设置需要一些工作,但是可以让您检查DOM、查看样式、更改DOM和使用控制台。
设置:
安装nodejs 安装-g weinre weinre——boundHost -all- 打开http://{wifi-ip-address}:8080/并复制目标脚本代码 将脚本标记粘贴到页面中(或使用bookmarklet) 单击指向调试客户端用户界面的链接(http://{wifi-ip-address}:8080/client/#anonymous) 当你在Clients下面看到一条绿色的线时,表示浏览器已经连接
bookmarklet的安装有点麻烦。如果你在台式机和移动版Chrome上都开启了书签同步功能,那就最简单了。从本地weinre服务器复制bookmarklet url(如上所示)。不幸的是,它不能工作,因为它的url编码不正确。打开JavaScript控制台,输入:
copy(encodeURI('')); // paste bookmarklet inside quotes
现在剪贴板中应该有url编码的书签。将其粘贴到移动书签下的新书签中。就叫它weinre吧,或者简单点的。它应该是同步到你的手机相当快,所以加载你想要检查的页面。然后在url栏中输入书签名称,您应该会看到bookmarklet作为一个自动完成建议。点击它来运行bookmarklet代码:)
Adobe Edge Inspect (https://creative.adobe.com/products/inspect)是调试所有移动设备IOS和Android(虽然没有Windows Phone)的另一种方式。它使用weinre进行远程DOM检查/更改。它不是最快的方法,但在Windows上有效。
目前无法在iOS上直接远程调试Chrome。它使用的uiWebView可能与Mobile Safari略有不同。
你有几个选择。
选项1:使用Safari的检查器远程调试Mobile Safari。如果您的问题在Mobile Safari中重现,这绝对是最好的方法。事实上,通过iOS模拟器更容易。
选项2:使用Weinre简化调试体验。Weinre没有太多特色,但有时也足够好了。
选项3:远程调试一个功能相同的uiWebView。
这是最好的方法。你需要安装XCode。
访问github.com/paulirish/iOS-WebView-App并“下载Zip”或克隆。 打开XCode,打开现有的项目,选择你刚刚下载的项目。 WebViewAppDelegate开放。m并将urlString更改为您想要测试的URL。 在iOS模拟器中运行应用程序。 打开Safari,打开开发菜单,选择iOS模拟器,选择你的webview。 Safari检查器现在将检查你的uiWebView。
许多远程控制台工作正常。http://farjs.net是我的项目,我能够成功地调试特定于Crome iOS的问题,而不是在safari中使用它。(可能包括所有其他移动浏览器)
问题是注入调试代码有点棘手,因为Chrome不允许你安装bookmarklet。
相反,您可以在要调试的页面上打开一个标签,在farjs.com上打开另一个标签,然后单击“bookmarklet”。
复制bookmarklet JS代码,回到第一个选项卡,返回要调试的页面,并将bookmarklet代码粘贴到位置栏中。
最后一步是滚动到位置栏的开头并添加“javascript:”,因为Chrome会删除它。
我还没有尝试过,但是iOS WebKit调试代理(ios_webkit_debug_proxy / iwdp)应该可以让你远程调试UIWebView。来自README.md
ios_webkit_debug_proxy(又名iwdp)允许开发人员检查 MobileSafari和UIWebViews在真实和模拟iOS设备上通过 Chrome DevTools用户界面和Chrome远程调试协议。DevTools 请求被翻译成苹果的远程网络检查服务 调用。
Chromium上有一个开放的bug: https://bugs.chromium.org/p/chromium/issues/detail?id=584905
不幸的是,他们依赖于苹果在WKView中打开一个API来实现这一点,之后可能会从Safari中调试。
我推荐Vorlon,就像weinre。我喜欢Vorlon的UI,它支持SSL,我的应用程序是在HTTPS,我尝试了weinre与ngrok, ghostlab和Vorlon,只有Vorlon工作良好。
Vorlon.JS可以用于iOS或任何其他客户端远程调试。
只需要使用npm i -g vorlon全局安装它 使用vorlon启动服务器 服务器正在运行时,在浏览器中打开http://localhost:1337以查看Vorlon.JS仪表板 最后一步是通过添加这个script标签到你的应用程序来启用Vorlon.JS: < script src = " http:// < yourExternalIP >: 1337 / vorlon.js " > < /脚本> 所有连接的客户端,如iPhone, Android将在Vorlon.JS仪表板的客户端列表中可用
注意,这种方法也可以用ngrok来调试不在本地主机上运行的应用程序。详情见https://stackoverflow.com/a/45443203/2073920。
免责声明
我只是一个用户,我没有隶属于Vorlon.JS和ngrok
我使用的是remotedebug-ios-webkit-adapter, 对我来说,在Windows 10上,IOS和Chrome中打开的调试器运行得很好。
如果它能帮助到别人,你会很高兴的,Link
注意:我与Ghostlab的创造者Vanamco没有任何联系。
能够调试chrome特有的问题对我来说很重要,所以我开始寻找一些可以帮助我解决这个问题的东西。最后我很高兴地把钱花在了《Ghostlab 3》上。我可以测试Chrome和Safari移动浏览器,就像我在桌面上浏览它们一样。它只是给我一个LAN地址,用于我想调试的任何设备。每个使用该地址的应用程序都将出现在Ghostlab的列表中。
强烈推荐。