Debug ipad safari from PC

Question

I want to check my site on Safari on my ipad. I only have another computer. Is there a way for me to remotely debug, such as ADB with mobile Chrome? I searched on StackOverflow, it seems that there is Adobe Edge Inspect CC, but I do not know if this is a good choice.

Thank!

Answer 1

You can try using Telerik AppBuilder (a Windows client) as a replacement on Windows for the Safari debugger on Mac with remote debugging. There's a good blog entry on the steps to do this in the link below. I would prefer not to retell the information, as there are also screenshots, and this is a lot of text. But, in fact, you install the application, open it, connect the device via USB, then you can find it in the application and open the developer / debugger tools for it. For non-public websites, you will have to open port 80 with some firewall configurations documented in the message.

http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder

The tool requires a license, or you can use a trial version, which will later become the base version. I think the basic edition will still allow you to debug. I am going to try it myself.

You can also try these iOS apps, you can find them in the iTunes App store. They provide you with a built-in developer tool feature (right on iOS without remote debugging) that mobile Safari does not offer.

MIH tool - basic version https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8

HTTPWatch Basic https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8

I gave them a try, and they are at least better than the mobile Safari you get on iOS if you don’t need targeting for full compatibility with Safari for mobile devices. I assume that the pro / paid releases of these applications give you more / better features.

Answer 2

Updated and tested on 06/24/2017

Using Chrome on Windows 8 and later :

• Download and install Node

• Download and install iTunes and connect it to your device. (A popup should show your iPad to get authorization) Make sure the web inspector in your iPad

• Download and install the remote webkite adapter

Using Powershell (as administrator):

npm install remotedebug-ios-webkit-adapter -g

• Adapter Run:

Using Powershell (with administrator privileges):

remotedebug_ios_webkit_adapter --port=9000

You should get a similar result:

C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...

• Open Chrome and go to the following link:

chrome: // inspect / # devices

• Click "Settings" next to "Discover network targets" and add the following: local: 9000

Make sure that the web page you want to debug is open on safari, you should see it on the chrome inspector page in the Remote target section

Extra step for iOS 11 Thanks @skaurus

Answer 3

There is actually a fairly simple way to debug a website in Safari on iOS using Firefox on a Windows computer.

NOTE. Ryan wrote in the comments below that this can only work on iOS 8 and below. I can’t confirm, but keep in mind.

I wrote a detailed blog post about this, but here are the highlights:

• Install iTunes to get the Apple Mobile Device Support and Apple Application Support apps. (uninstall iTunes after that if you want)
• Connect your iOS device via USB.
• Enable web inspector on iOS (available on iOS 6 and later).
• Open Safari on your iOS device and go to the website.
• Open Firefox on your Windows computer and press Shift + F8 to open WebIDE, which should include the optional Valance add-on if you use Firefox Developer Edition (any version) or Firefox 37 and later (any channel).
• For some reason, I could not connect to my iOS device until I downloaded the ios-webkit-debug-proxy-win32 program and launched it. It opens an empty command line, but after I returned to WebIDE after opening it, I disconnected, then reconnected, and I saw debugging information for the website that I opened in Safari. Perhaps you do not need to do this, as the other user just needs to add an exception from his firewall, then disconnect / reconnect, and it works.

The debugging information available is not as comprehensive as the Chrome developer tools (in particular, there is no "Network" tab), but it was enough for me to see what was happening in the console.

Answer 4

I use PrePros for CSS preprocessing and have a built-in server for debugging mobile devices and a web inspector. But this is only useful for local sites even ...

Answer 5

In my experience, this is often not a problem with mobile Safari, but Safari in general. In these cases, this can help try the usual Safari (for Windows) and see if errors appear there. If so, it is much easier to debug something this way.

Answer 6

I have not tried this on a PC, but you should be able to go to http: // [DEVICE_IP_ADDRESS]: 9999 for debugging.