Accessing iOS Safari Web Inspector from Windows Machine

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


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

screenshot of developer tools and ios simulator, showing weinre in action

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.


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

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.


I have found a great tool called GapDebug

that's was the right solution for me :)