iOS 远程调试答案

【问题标题】：iOS Remote DebuggingiOS 远程调试
【发布时间】：2012-07-01 00:16:51
【问题描述】：

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

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

【问题讨论】：

现在可以在 Mac 上使用 Safari 进行远程调试。但是，如果您在 Linux 或 Windows 上开发，您仍然必须使用 weinre（如 gregers 回答中所述）。
用 Safari 进行远程调试只支持 Mobile Safari，不支持 iOS Chrome。
请看medium.com/@nikoloza/…

标签： google-chrome google-chrome-devtools chrome-for-ios

【解决方案1】：

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

问题在于注入调试代码有点棘手，因为 Chrome 不允许您安装书签。

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

复制书签 JS 代码，返回第一个选项卡，包含应调试的页面，然后将书签代码粘贴到位置栏中。

最后一步是滚动到地址栏的开头并添加“javascript:”，因为 Chrome 会删除它。

【讨论】：

损坏的网址 farjs.com
是的，我将其重命名为 farjs.net，因为它是更便宜的域名。

【解决方案2】：

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

【讨论】：

【解决方案3】：

Vorlon.JS可用于iOS或任何其他客户端的远程调试。

只需使用npm i -g vorlon 全局安装即可
使用vorlon启动服务器
在服务器运行的情况下，在浏览器中打开 http://localhost:1337 以查看 Vorlon.JS 仪表板
最后一步是通过将这个脚本标签添加到您的应用程序来启用 Vorlon.JS：
<script src="http://<yourExternalIP>:1337/vorlon.js"></script>
所有连接的客户端，例如iPhone、Android 将在 Vorlon.JS 仪表板的客户端列表中可用

请注意，这种方法也可用于调试不在本地主机上运行的应用程序，使用 ngrok。详情请见https://stackoverflow.com/a/45443203/2073920。

免责声明

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

【讨论】：

我按照所有步骤操作，但在 Mac 中运行的 VorlonJS 中没有检测到我的 iPhone 外观

【解决方案4】：

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

能够调试特定于 Chrome 的问题对我来说很重要，因此我开始寻找可以帮助我解决此问题的方法。最后我很高兴地把钱扔给了Ghostlab 3。我可以测试 Chrome 和 Safari 移动浏览器，就像在桌面上查看它们一样。它只是给了我一个 LAN 地址，用于我想调试的任何设备。使用该地址的每个应用程序都将出现在 Ghostlab 的列表中。

强烈推荐。

【讨论】：

【解决方案5】：

我正在使用 remotedebug-ios-webkit-adapter，在 Windows 10 上的 Chrome 中打开 IOS 和调试器对我来说效果很好。

如果对某人有帮助会很高兴Link

【讨论】：

【解决方案6】：

我推荐Vorlon，像 weinre 一样工作。我喜欢 Vorlon 的 UI，它支持SSL，我的应用程序是 HTTPS，我用 ngrok、ghostlab 和 vorlon 尝试了 weinre，只有 vorlon 可以正常工作。

【讨论】：

【解决方案7】：

Chromium 上有一个未解决的错误：https://bugs.chromium.org/p/chromium/issues/detail?id=584905

不幸的是，他们依赖 Apple 在 WKView 中打开一个 API 来实现这一点，之后也许可以从 Safari 进行调试。

【讨论】：

【解决方案8】：

更新：

这不是最好的答案了，请听从gregers'的建议。

新答案：

使用Weinre。

旧答案：

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

这里是http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector的快速翻译

通过 USB 将您的 iDevice 连接到您的 Mac
在 Mac 上打开 Safari 并激活开发工具
在您的 iDevice 上：转到设置 > Safari > 高级并激活网络检查器
使用您的 iDevice 访问任何网站
在您的 Mac 上：打开开发者菜单并从您的 iDevice 中选择网站（它位于 Safari 菜单的顶部）

正如Simons answer 所指出的，需要关闭隐私浏览才能进行远程调试。

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

【讨论】：

是的，我已经在使用这个了。最后！可惜windows版的Safari没有它。
我希望 Chrome 能尽快启用相同的功能，以便它适用于所有操作系统。
是的 - 如果这回答了所提出的问题，那就太好了！
不再需要关闭隐私浏览。
投反对票原因：问题要求 Chrome 而不是 Safari。

【解决方案9】：

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

ios_webkit_debug_proxy（又名 iwdp）允许开发人员检查真实和模拟 iOS 设备上的 MobileSafari 和 UIWebViews 通过 Chrome DevTools UI 和 Chrome 远程调试协议。开发工具请求被翻译成 Apple 的 Remote Web Inspector 服务来电。

【讨论】：

对 Chrome webview 的支持理论上是通过：github.com/RemoteDebug/remotedebug-ios-webkit-adapter 实现的，它建立在 iOS webkit 调试代理之上。到目前为止，我自己在该项目上取得的成功有限，但我希望它会变得更好。

【解决方案10】：

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

转到github.com/paulirish/iOS-WebView-App 并“下载 Zip”或克隆。
打开XCode，打开已有项目，选择刚刚下载的项目。
打开 WebViewAppDelegate.m 并将 urlString 更改为您要测试的 URL。
在 iOS 模拟器中运行应用程序。
打开 Safari，打开开发菜单，选择 iOS 模拟器 并选择您的 web 视图。
Safari Inspector 现在将检查您的 uiWebView。

【讨论】：

如何使用 chrome 在 Windows 上检查 iOS (iPhone / iPad)？有什么方法吗？
@SurjithSM 当您无法在 Windows 上安装 XCode 并创建 ios 应用程序时，此答案对 Windows 没有帮助。试试这个stackoverflow.com/a/22047495/1737158
我已经体验过github.com/google/ios-webkit-debug-proxy 这个很棒的工具，昨天还尝试使用 iOS 模拟器调试 Google Chrome - 这是最棒的体验。感谢#3

【解决方案11】：

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

【讨论】：

Adobe Edge Inspect 不再列在 Adobe Creative Cloud 中。见adobe.com/products/edge-inspect.html。
是的，但是您仍然可以使用当前订阅下载它，尽管它不再处于开发阶段。在此处查看操作方法：helpx.adobe.com/creative-cloud/kb/…
但是，iOS 应用程序不再可用。仍在使用 Android，但不再使用 iOS：itunes.apple.com/app/id498621426

【解决方案12】：

所选答案仅适用于 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)
当您在 Clients 下看到一条绿线时，浏览器已连接

小书签安装起来有点麻烦。如果您为桌面版和移动版 Chrome 启用了书签同步功能，这是最简单的。从本地 weinre 服务器复制书签 url（同上）。不幸的是，它不起作用，因为它的 url 编码不正确。所以打开 JavaScript 控制台并输入：

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

您现在应该在剪贴板中拥有 url 编码的书签。将其粘贴到 Mobile Bookmarks 下的新书签中。称它为 weinre 或简单的类型。它应该很快同步到您的手机，因此请加载您要检查的页面。然后在 url 栏中输入书签名称，您应该会看到书签作为自动完成建议。点击它运行书签代码:)

【讨论】：

这是唯一正确的答案，其他都与 Safari 相关（在公园散步）
非常有用的说明！我只是补充一点，要安装小书签，而不是复制，您只需将提供的“weinre 目标调试”小书签链接拖到您的书签工具栏（如果工具栏不可见，则使用 Ctrl-Shift-B 使工具栏可见）。
安装小书签后，我需要刷新浏览器才能正常工作。
npm install -g weinre 不适合我。所以我不得不使用版本npm install -g weinre@2.0.0-pre-I0Z7U9OV 运行它。在此处查看最新版本npmjs.com/package/weinre。
FWIW，weinre 目前不支持 shadow dom - 它只显示顶级元素及其 light dom。除了顶级元素和它们的 shady-dom（以及 light dom）之外，它也不适用于 shady dom。

【解决方案13】：

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

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

【讨论】：

不知道为什么人们不赞成这个答案。确实需要关闭隐私浏览以允许远程调试。
@basecode 因为它是一个补充答案，应该在评论中。
@GusDeCooL 我明白了，谢谢！一位反对者的评论解释了这一点会很有帮助。

【解决方案14】：

据我了解，Google Chrome 使用的是 iOS 的 UIWebView，而不是像 Android 对应的 Chrome 的完整实现。

【讨论】：

是的，在我提出这个问题后发现了这一点。这真的是苹果的耻辱。如果有人想出了一个办法，我会留下这个问题。

【解决方案15】：

即使我也在寻找相同的功能，但截至今天，它尚未实现。不过，我可以想到两个选择，

我注意到 Chrome 和 Safari 的行为完全相同； Chrome 甚至支持 Safari 支持的陀螺仪和其他相关事件。我目前正在通过在 Safari 上启用调试控制台来调试我的 Web 应用程序（通过设置->Safari）
也可以试试 Adobe Shadow，它允许远程调试/检查和同步。

HTH。

【讨论】：