iOS 远程调试
Posted
技术标签:
【中文标题】iOS 远程调试【英文标题】:iOS Remote Debugging 【发布时间】: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/… 【参考方案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://***.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 没有帮助。试试这个***.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 并使用控制台。
设置:
安装nodejsnpm 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。
【讨论】:
以上是关于iOS 远程调试的主要内容,如果未能解决你的问题,请参考以下文章
React Native:防止远程调试器在 Chrome 中打开