Accessing iOS Safari Web Inspector from Windows Machine

Question

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?

See also [iOS6 - removed console log for IPad - how to use web inspector on windows?](http://stackoverflow.com/questions/12583275/ios6-removed-console-log-for-ipad-how-to-use-web-inspector-on-windows). — , Aug 12 '13 at 17:40

score 44 · Accepted Answer · answered Oct 22 '12 at 11:58

44

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

answered Oct 22 '12 at 11:58

ghenne

1,903
2
19
29

49

I'm normally a bit of an Apple fanboy, but this is pretty irritating. – aaaidan Nov 08 '12 at 05:42
136

I'm not much of an Apple fanboy, and this is pretty irritating ;-) – Jeroen Oct 23 '13 at 09:52
I guess there will be no 'Real Device Method' web inspecting with iDevices on PC's... – Ben Racicot Dec 10 '13 at 17:34
40

I never was much of an apple fanbody, but now I hate them. – Rolf May 09 '14 at 15:03
3

I'm in the same shoes. I have an iPad, but no other Apple devices. So I need to buy an Apple desktop or walk down the hackintosh route. – Csaba Toth Mar 24 '16 at 19:53

DaAwesomeP · Answer 2 · 2016-08-25T01:17:00.527

27

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.

edited Aug 25 '16 at 01:17

answered May 25 '14 at 23:09

DaAwesomeP

585
5
18

2

That's awesome! I easily installed the node package. After that I started two ngrok instances, one of them serving my local development website and the other serving weinre. Then I added the script tag (pointing to the weinre's public ngrok DNS name js include). Then I can view the website on the iPad using the public ngrok address *plus* can debug it from my local Linux or Windows. That really made my day! – Csaba Toth Mar 24 '16 at 22:09
3

Thanks both for weinre and ngrok. I'm thinking about vorlon.js instead of weinre now. – EvAlex Aug 24 '16 at 20:24
Using iOS 10 and Nginx on Windows 10, I couldn't get this working. A waste of several hours. I'm so frustrated with Apple right now. – Ryan Jan 21 '17 at 17:25
Whoa, right as I was giving up, I discovered https://www.undefinednull.com/2015/03/17/remote-debugging-localhost-with-weinre/ Now I seem to have it working. My command in Windows command prompt is `weinre --boundHost 192.168.0.103 --httpPort 8080` and I added this to the top of my webpage: ` ` Then on my iPhone I browsed to http://192.168.0.103. Thanks. Hopefully this will help with debugging JS on iOS. – Ryan Jan 21 '17 at 17:36
Weinre is not a 100% reliable debugging solution. For one, it injects code into the runtime environment, code that may interfere with your application (the one you are trying to debug) where bugs no longer appear. I am sitting here and pulling my hair out where I have an issue with a Web application (displayed in the so-called "web view" through Apache Cordova framework) where as soon as I link the Weinre debugger script, the issue disappears. So I can't debug without Weinre (I don't have a Mac) and I can't debug with it either. Look at Weinre's code and you'll see why. – Armen Michaeli Mar 02 '19 at 16:55

score 9 · Answer 3 · answered Aug 01 '17 at 16:33

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

http://vorlon.herokuapp.com/dashboard/default to quickly get setup. Good Luck... — Aakash, May 29 '18 at 03:39

score 3 · Answer 4 · answered Apr 01 '14 at 13:10

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.

score 1 · Answer 5 · answered Jul 05 '16 at 09:53

1

I have found a great tool called GapDebug

that's was the right solution for me :)

answered Jul 05 '16 at 09:53

Eran Levi

877
2
12
31

Remember to indicate Debug build in Settings on PhoneGap Build website that has your app. GapDebug worked for me too. – user1036944 Jul 12 '16 at 00:27
Sad to report that GapDebug was end-of-life'd in 2016. It only works for old versions of ios (9 or 10 I think) so pretty much not an option anymore. But that product was fantastic! – Marcus Pope Aug 17 '17 at 03:17

score 0 · Answer 6 · edited Apr 13 '17 at 12:45

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

score 0 · Answer 7 · answered Oct 19 '20 at 10:05

0

Use iOS WebKit debug proxy

It allows you to debug directly in Chrome with live preview.

answered Oct 19 '20 at 10:05

Mike

378
1
8

Accessing iOS Safari Web Inspector from Windows Machine

7 Answers7

UPDATE:

Linked