【问题标题】:Accessing iOS Safari Web Inspector from Windows Machine从 Windows 机器访问 iOS Safari Web Inspector
【发布时间】:2012-09-15 10:22:52
【问题描述】:

新的 iOS 6 Safari 带有 Web Inspector 功能,允许通过 USB 电缆从桌面 Safari 连接到它。然后,它允许您从桌面调试在 iOS Safari 中打开的页面。但据我所知,目前仅在 Mac Safari 上支持此功能,在 Windows 上不支持?我是对的,还是 Windows Safari 也有这种可能?或者以后可能会推出?

【问题讨论】:

标签: ios windows safari web-inspector


【解决方案1】:

使用iOS WebKit debug proxy

它允许您通过实时预览直接在 Chrome 中进行调试。

【讨论】:

    【解决方案2】:

    在 Windows 上设置 Vorlon

    npm i -g vorlon
    vorlon
    

    验证 Vorlon 是否正在运行

    打开网络浏览器并导航到http://localhost:1337

    设置 Ngrok

    • 下载Ngrok:https://ngrok.com/download
    • 解压
    • 打开命令提示符:Start -> Search -> cmd
    • 导航到 ngrok.exe:cd <ngrok_path_where_ngrok.exe is stored>/
    • 运行它:ngrok.exe http <port> 例如ngrok.exe http 1337

    Ngrok 提供了一个网址,例如https://0ad8c32f.ngrok.io -> localhost:1337

    将 ngrok 网址复制并粘贴到您的网页中。

    <script src="https://0ad8c32f.ngrok.io/vorlon.js"></script>
    

    在您的设备上导航到正在测试的页面:

    http://thepageiwanttotest.com/testing123
    

    参考文献

    【讨论】:

    【解决方案3】:

    在尝试将 Weinre 安装在运行 IIS 和 localhost 客户端的 Windows 10 机器上但始终无法正常工作后,我寻找了替代解决方案。

    原来 Safari for Windows 已被 Apple 停产,但我在发现以下链接后能够获得一份副本。哦,Safari 中的 Web Inspector 能够帮助我在我的应用程序安装后找到问题。

    https://apple.stackexchange.com/questions/68836/where-can-i-download-safari-for-windows

    安装 Safari 后,我需要打开开发者工具。这需要进入“首选项”>“高级”>选中“在菜单栏中显示开发菜单”>(单击 sprocket 图标旁边的页面图标,将鼠标悬停在“开发”上)开始在 JavaScript 中调试。从这里开始,它感觉非常像 Chrome...:-)

    【讨论】:

      【解决方案4】:

      我经常使用weinre。它基本上运行一个网络服务器,该服务器又充当检查器增强的代理来浏览网页和网站。可以通过向页面添加脚本或运行小书签来启动检查器。

      weinre 是一个网页调试器,例如 FireBug(用于 FireFox)和 Web Inspector(用于基于 WebKit 的浏览器),但它被设计为远程工作,特别是允许您在移动设备上调试网页,例如作为电话。

      要安装它,您需要 NodeJS 和 NPM(包含在 NodeJS 中)。您还需要在桌面/接收端(Safari、Google Chrome 或 Chromium)上使用基于 WebKit 的浏览器。它应该可以在 Windows、OSX 和 Linux 上运行。

      如果你已经安装了 NodeJS 和 NPM,你可以安装并运行它:

      npm i -g weinre
      weinre
      # Go to the URL that it outputs for instructions to use it
      

      更新:

      @EvAlex 指出了另一个与 Weinre 非常相似的工具,称为Vorlon.js。它是可插拔的,支持同时在多个设备的检查器之间查看/切换。

      【讨论】:

      • 太棒了!我轻松安装了节点包。之后我启动了两个 ngrok 实例,其中一个服务于我的本地开发网站,另一个服务于 weinre。然后我添加了脚本标签(指向 weinre 的公共 ngrok DNS 名称 js 包括)。然后我可以在 iPad 上使用公共 ngrok 地址查看网站 plus 可以从我的本地 Linux 或 Windows 调试它。这真的让我很开心!
      • 感谢 weinre 和 ngrok。我现在正在考虑 vorlon.js 而不是 weinre。
      • 在 Windows 10 上使用 iOS 10 和 Nginx,我无法正常工作。浪费了几个小时。我现在对苹果很失望。
      • 哇,就在我放弃的时候,我发现了undefinednull.com/2015/03/17/… 现在我似乎可以正常工作了。我在 Windows 命令提示符下的命令是 weinre --boundHost 192.168.0.103 --httpPort 8080,我将其添加到网页顶部:&lt;script&gt; window.WeinreServerURL="http://192.168.0.103:8080"; &lt;/script&gt; &lt;script src="http://192.168.0.103:8080/target/target-script-min.js#anonymous"&gt;&lt;/script&gt; 然后在我的 iPhone 上我浏览到 192.168.0.103。谢谢。希望这将有助于在 iOS 上调试 JS。
      • Weinre 不是 100% 可靠的调试解决方案。一方面,它将代码注入运行时环境,这些代码可能会干扰您的应用程序(您尝试调试的应用程序),其中不再出现错误。我坐在这里,在我遇到 Web 应用程序问题(通过 Apache Cordova 框架显示在所谓的“Web 视图”中)的地方拉扯头发,只要我链接 Weinre 调试器脚本,问题就会消失。因此,没有 Weinre(我没有 Mac)我无法调试,我也无法使用它进行调试。看看 Weinre 的代码,你就会明白为什么了。
      【解决方案5】:

      我发现了一个很棒的工具,叫做GapDebug

      这对我来说是正确的解决方案:)

      【讨论】:

      • 记得在有你的应用的PhoneGap Build网站的设置中指明Debug build。 GapDebug 也对我有用。
      • 遗憾地报告 GapDebug 已于 2016 年终止使用。它仅适用于旧版本的 ios(我认为是 9 或 10),因此几乎不再是一种选择。但是那个产品太棒了!
      【解决方案6】:

      偶然发现了这个博客which shows how to debug iOS web app on Windows,使用的是 Telerik 的一个名为 AppBuilder 的 stdalone 应用程序。您应该在使用之前在他们的平台上创建一个帐户,并且有 30 天的试用期。

      我在带有 iOS 7.1 的 iPad 上的原版 Web 应用程序和 Phonegap 应用程序的 windows 7 64 位上都使用了它,并且它可以工作。您可以获得与 Chrome 中的非常相似的 Web 开发工具。

      【讨论】:

        【解决方案7】:

        它似乎需要 Safari 6,该版本尚未针对 Windows 发布。关于 Safari 6 在 Windows 上不可用,Apple 表示“Safari 6 可用于 Mountain Lion 和 Lion。Safari 5 继续可用于 Windows。”

        【讨论】:

        • 我通常有点喜欢苹果,但这很烦人。
        • 我不是苹果的忠实粉丝,这很烦人 ;-)
        • 我猜在 PC 上使用 iDevices 不会有“真实设备方法”网络检查...
        • 我从来都不是苹果的粉丝,但现在我讨厌他们。
        • 我也是这样。我有一台 iPad,但没有其他 Apple 设备。所以我需要买一个苹果台式机或者走 hackintosh 路线。
        猜你喜欢
        • 2016-06-17
        • 1970-01-01
        • 2015-01-06
        • 2013-10-06
        • 2013-10-14
        • 2016-06-24
        • 1970-01-01
        • 2015-08-20
        • 2014-11-02
        相关资源
        最近更新 更多