从 Windows 机器访问 iOS Safari Web Inspector

Accessing iOS Safari Web Inspector from Windows Machine

提问by Stranger

New iOS 6 Safari comes with Web Inspector feature which allows to connect to it from your desktop Safari via USB cable. It then allows you to debug pages opened in iOS Safari from your desktop. But as far as I seen, this feature curently supported only on Mac Safari, not on Windows? Am I right, or Windows Safari also has the possibility? Or it will become available later maybe?

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

采纳答案by ghenne

It appears to require Safari 6, which has not been released for Windows. Regarding the unavailability of Safari 6 on Windows, Apple has stated "Safari 6 is available for Mountain Lion and Lion. Safari 5 continues to be available for Windows."

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

回答by DaAwesomeP

I regularly use weinre. It basically runs a webserver that in turn acts as an inspector-enhanced proxy to browse webpages and websites. The inspector can be started by adding a script to your page or running a bookmarklet.

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

weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

weinre 是一个网页调试器，比如 FireBug（针对 FireFox）和 Web Inspector（针对基于 WebKit 的浏览器），除了它被设计用于远程工作，特别是允许您在移动设备（例如手机）上调试网页.

To install it, you will need NodeJS and NPM (included with NodeJS). You will also need a WebKit-based browser on the desktop/receiver end (Safari, Google Chrome, or Chromium). It should work on Windows, OSX, and Linux.

要安装它，您将需要 NodeJS 和 NPM（包含在 NodeJS 中）。您还需要在桌面/接收端（Safari、Google Chrome 或 Chromium）上使用基于 WebKit 的浏览器。它应该适用于 Windows、OSX 和 Linux。

• Official page: https://people.apache.org/~pmuellr/weinre/
• Documentation & Getting Started: https://people.apache.org/~pmuellr/weinre/docs/latest/
• NPM Package: https://www.npmjs.com/package/weinre

• 官方页面：https: //people.apache.org/~pmuellr/weinre/
• 文档和入门：https: //people.apache.org/~pmuellr/weinre/docs/latest/
• NPM套餐：https://www.npmjs.com/package/weinre

If you already have NodeJS and NPM installed, you can install and run it with:

如果你已经有和的NodeJS安装NPM，您可以安装和使用运行它：

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

UPDATE:

更新：

@EvAlex has pointed out another tool very similar to Weinre called Vorlon.js. It is pluggable and supports viewing/switching between the inspector of multiple devices simultaneously.

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

回答by nu everest

Setup Vorlon on Windows

在 Windows 上设置 Vorlon

npm i -g vorlon
vorlon

Verify Vorlon is Running

验证 Vorlon 正在运行

Open a web browser and navigate to http://localhost:1337

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

Setup Ngrok

设置 Ngrok

• Download Ngrok: https://ngrok.com/download
• Unzip it
• Open a command prompt: Start -> Search -> cmd
• Navigate to ngrok.exe: cd <ngrok_path_where_ngrok.exe is stored>/
• Run it: ngrok.exe http <port>e.g. ngrok.exe http 1337

• 下载 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 provides a url e.g. https://0ad8c32f.ngrok.io -> localhost:1337

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

Copy and paste the ngrok url into your webpage.

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

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

Navigate to the page under test on your device(s):

在您的设备上导航到被测页面：

http://thepageiwanttotest.com/testing123

References

参考

• Vorlon Reference: http://vorlonjs.com/#getting-started
• Ngrok Reference: https://ngrok.com/download

• Vorlon 参考：http: //vorlonjs.com/#getting-started
• Ngrok 参考：https://ngrok.com/download

回答by neno

Stumbled upon this blog which shows how to debug iOS web app on Windowsusing a stndalone app by Telerik called AppBuilder. You're supposed to create an account on their platform before using it and it has a 30 day trial.

偶然发现了这个博客，它展示了如何使用 Telerik 名为 AppBuilder 的独立应用程序在 Windows 上调试 iOS Web 应用程序。你应该在使用之前在他们的平台上创建一个帐户，它有 30 天的试用期。

I've used this on windows 7 64 bit for both vanilla web apps and Phonegap apps both on iPad with iOS 7.1, and it works. You get web development tools very similar to those in Chrome.

我已经在带有 iOS 7.1 的 iPad 上的 Windows 7 64 位上为 vanilla web 应用程序和 Phonegap 应用程序使用了它，并且它可以工作。您可以获得与 Chrome 中的非常相似的 Web 开发工具。

回答by Eran Levi

I have found a great tool called GapDebug

我找到了一个很棒的工具，叫做GapDebug

that's was the right solution for me :)

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

回答by Harvey Mushman

After trying to get Weinre installed on my Windows 10 machine which is running IIS and a localhost client and never being able to get it to work, I looked for an alternate solution.

在尝试将 Weinre 安装在运行 IIS 和 localhost 客户端的 Windows 10 机器上后，我一直无法让它工作，我寻找了替代解决方案。

Turns out Safari for Windows was discontinued by Apple but I was able to fine a copy after discovering the following link. Oh, the Web Inspector in Safari was able to help me find the problem in my application once it was installed.

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

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

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

Once Safari was installed, I needed to turn on the developer tools. This required going into Preferences > Advanced > check "Show Develop menu in menu bar" > (click on page icon next to sprocket icon hover over Develop) Start Debugging in JavaScript. From here on it felt very much like Chrome...:-)

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