Accessing iOS Safari Web Inspector from Windows Ma

问题:

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?

回答1:

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."

回答2:

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 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.

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.

• 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

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

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.

回答3:

For anyone still struggling with this, the Firebug Lite 'bookmarklet' will allow you to debug javascript in ios6 Safari. Follow this tutorial: https://iosbookmarklets.com/firebug-lite-bookmarklet/

回答4:

Setup Vorlon on Windows

npm i -g vorlon
vorlon

Verify Vorlon is Running

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

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

Copy and paste the ngrok url into your webpage.

<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

回答5:

Stumbled upon this blog which shows how to debug iOS web app on Windows using 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.

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.

回答6:

I have found a great tool called GapDebug

that's was the right solution for me :)

回答7:

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.

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.

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...:-)