logo标签列表

Chrome iOS（和Safari）的远程调试

google-chromegoogle-chrome-devtoolschrome-for-ios
218

最近发布了面向iOS的Chrome，我想知道如何启用Chrome iOS的远程调试？

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

2
现在可以使用Safari在Mac上进行远程调试。但如果您在Linux或Windows上开发，则仍需要使用weinre（如Gregers的答案中所述）。 - Dehalion
3
使用Safari进行远程调试仅支持移动版Safari，而不支持iOS Chrome。 - Matt Jensen
1
请查看 https://medium.com/@nikoloza/how-to-debug-remote-ios-device-using-chrome-devtools-f44d697003a7 - Machado
16个回答
237

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

enter image description here

设置方法：

  • 安装nodejs
  • npm install -g weinre
  • weinre --boundHost -all-
  • 打开 http://{wifi-ip-address}:8080/ 并复制目标脚本代码
  • 将脚本标签粘贴到您的页面（或使用书签工具）
  • 单击链接以进入调试客户端用户界面（http://{wifi-ip-address}:8080/client/#anonymous）
  • 当在Clients下方出现绿色线条时，浏览器已连接

安装书签工具有点麻烦。如果您同时为桌面版和移动版Chrome启用了书签同步，则最容易实现。从本地的 weinre 服务器（与上文相同）复制书签工具URL。不幸的是，它因未正确进行URL编码而无法使用。因此，请打开JavaScript控制台并键入：

copy(encodeURI('')); // paste bookmarklet inside quotes
你现在应该已经拷贝了url编码的书签工具。将其粘贴到移动书签下的一个新书签中，把它命名为weinre或者其他容易输入的名称。它应该很快同步到你的手机上，然后加载你想要检查的页面。然后在url地址栏中输入书签名称，你会看到这个书签工具作为自动完成建议出现。点击运行书签工具代码 :)

enter image description here

27
这是唯一正确的答案，所有其他与Safari（在公园里散步）有关。 - Mars Robertson
2
非常有用的指导！我只想补充一点，安装书签时，您可以直接将提供的“weinre target debug”书签链接拖到书签工具栏上（如果未显示，请使用Ctrl-Shift-B使其可见），而不是复制。 - Kai Carver
我需要在安装书签工具后刷新浏览器才能使其正常工作。 - ooolala
ngrok似乎想让我付费使用TLS，有人绕过这个问题了吗？ - Alex W
1
就目前而言，weinre不支持shadow dom——它只显示顶级元素及其light dom。除了顶级元素和它们的shady-dom（以及light dom），它也无法用于shady dom。 - Max Waterman
显示剩余15条评论
121

更新:

这个答案不再是最佳答案，请参照gregers的建议。

新答案:

使用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菜单顶部）

正如Simon's answer指出的那样，需要关闭私密浏览才能使远程调试起作用。

设置 > Safari > 私密浏览 > 关闭

11
是的，我已经在使用这个了。终于！不过很遗憾 Safari 的 Windows 版本没有这个功能。 - Hyangelo
5
希望Chrome很快能够启用相同的功能，以便它可以在所有操作系统上运行。 - F Lekschas
49
是的，如果它回答了所提出的问题，那当然会很好！ - Irene Knapp
4
不再需要关闭私密浏览模式。 - Miles
3
贬值原因：问题要求Chrome而不是Safari。 - NickG
显示剩余5条评论
53

目前无法直接远程调试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 并下载压缩包或克隆代码。 2. 打开 XCode，选择“打开现有项目”，并选择刚刚下载的项目。 3. 打开 WebViewAppDelegate.m 文件，并将 urlString 更改为您想要测试的 URL。 4. 在 iOS 模拟器中运行应用程序。 5. 打开 Safari，打开 开发 菜单，选择 iOS 模拟器 并选择您的 webview。 6. Safari Inspector 现在将检查您的 uiWebView。

enter image description here

enter image description here

enter image description here

7
如何在Windows电脑上使用Chrome检查iOS（iPhone / iPad）设备？是否有相应的方法？ - Surjith S M
@SurjithSM 这个答案对于Windows不会有帮助，因为你无法在Windows上安装XCode并创建iOS应用程序。请尝试使用这个方法 https://dev59.com/LWgu5IYBdhLWcg3winc3#22047495 - Lukas Liesis
我已经有使用 https://github.com/google/ios-webkit-debug-proxy 的经验，这是一个非常棒的工具。昨天我尝试使用iOS模拟器调试Google Chrome，这是一次非常棒的体验。感谢 #3。 - Oleg Andreyev
12

据我了解，Google Chrome在iOS上使用的是UIWebView而不是像Android版本一样完整的Chrome实现。

1
是的，放上这个问题后我发现了。这对于苹果来说真是遗憾。我还开着这个问题，希望有人可以找到一个解决办法。 - Hyangelo
5

我推荐 Vorlon，它的功能类似于weinre。我喜欢Vorlon的用户界面，并且它支持SSL，我的应用程序使用HTTPS协议。我尝试了ngrok、ghostlab和vorlon三款工具，只有vorlon能正常工作。

3
你还需要关闭“私密浏览”功能。
设置 > Safari > 私密浏览 > 关闭
不确定为什么有人会对这个答案投反对票。确实需要关闭私密浏览才能允许远程调试。 - basecode
14
@basecode 因为这是一个补充答案，应该在评论中提供。 - GusDeCooL
3
@GusDeCooL 我明白了，谢谢！如果有一个解释这个的踩票者的评论会更有帮助。 - basecode
3
许多远程控制台都工作得很好。 http://farjs.net 是我的项目，我能够成功地使用它调试仅在Crome iOS上出现而不在Safari中发生的问题（以及可能所有其他移动浏览器）。
问题是注入调试代码略微棘手，因为Chrome不允许您安装书签小程序。
相反，您可以在要调试的页面上打开一个标签页，另一个标签页打开farjs.com，然后单击“书签小程序”。
复制书签小程序JS代码，返回到应该调试的第一个标签页，并将书签小程序代码粘贴到位置栏中。
最后一步是滚动到位置栏的开头并添加“javascript：”，因为Chrome会将其删除。
损坏的URL farjs.com。 - KumailR
是的，我将它重命名为https://farjs.net/，因为这是一个更便宜的域名。 - BlueStory
3
我没有尝试过，但iOS WebKit debug proxy（ios_webkit_debug_proxy / iwdp）据说可以让您远程调试UIWebView。来自README.md
ios_webkit_debug_proxy（又名iwdp）允许开发人员通过Chrome DevTools UI和Chrome远程调试协议检查MobileSafari和真实和模拟的iOS设备上的UIWebViews。 DevTools请求被翻译成苹果的远程Web Inspector服务调用。
1
理论上支持Chrome webview的实现是通过以下方式：https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter，该方式是基于iOS Webkit调试代理构建的。我自己在这个项目中取得了有限的成功，但我相信它会变得更好。 - Matt Jensen
3
3

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 仪表板的客户端列表中可用 enter image description here

请注意，此方法也可用于使用 ngrok 调试未在 localhost 上运行的应用程序。有关详细信息，请参见 https://dev59.com/J2cs5IYBdhLWcg3w0HOz#45443203。

免责声明

我只是一个用户，与 Vorlon.JS 和 ngrok 无关。

我按照所有步骤操作，但我的 iPhone 在 Mac 上运行的 VorlonJS 中未被检测到。 - Amarjit Dhillon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接