[update 1/21/2017 – I was recently notified this solution may only work for iOS 8 and down. I don’t have easy access to an iOS 9+ device and have been unable to confirm, so be aware of this if you can’t get this to work for iOS 9+. Please let me know in the comments below if this did or did not work for you!]
I found some tutorials suggesting to use tools such as weinre or jsconsole.com. But one website I happened by mentioned WebIDE in Firefox. I had never even heard of it, but the description intrigued me:
WebIDE enables you to create, edit, run, and debug web apps using the Firefox OS Simulator or a real Firefox OS device.
It also enables you to connect the Firefox Developer Tools to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS.
I figured it was worth a shot, especially since WebIDE is built into Firefox, a browser I already had installed.
After browsing through the documentation, it mentioned you have to use Valence to debug Safari on iOS, and that add-on for WebIDE is already installed “if you use Firefox Developer Edition (any version) or Firefox 37 and later (any channel).”
The instructions under the “Safari, Firefox, and other WebViews on iOS setup” headline were a good start. I went ahead and enabled developer support on the iPad and installed iTunes on my Windows 10 machine. After connecting the iPad to my machine, Windows detected it. So far, so good.
Don’t forget that you need to have Safari open on the iOS device and have a website pulled up.
I loaded up Firefox 44 and used the keyboard shortcut Shift + F8 to open WebIDE. I then clicked the “Safari, Firefox, and other WebViews on iOS” button. A firewall dialog message popped up, and I accepted it. WebIDE looked like it was connected, but nothing happened. No messages, no dialogs. I could click the “Disconnect” button and click the other button to connect again, but still nothing.
After searching for help, I couldn’t find a direct answer, but I discovered that Firefox has a console for the browser itself to see errors and messages. The keyboard shortcut is Ctrl + Shift + J. I only noticed two log messages saying it was connecting, then connected, but nothing further. Clicking to disconnect and reconnect didn’t reveal any more details.
I finally went back to the Valence documentation again, and this time noticed a statement that iOS support uses a plugin for Windows called ios-webkit-debug-proxy-win32. It seemed to say that you didn’t need to install anything additionally, but I figured, “What the heck.” I downloaded the ZIP file, extracted to a folder, and ran the ios-webkit-debug-proxy.exe file.
It simply opened a blank Command Prompt window. No messages – nothing. That’s weird. Well, I went back to WebIDE, disconnected and reconnected – and voila! I suddenly saw the website I had pulled up in Safari on the iPad under the “TABS” heading in WebIDE:
I tapped the refresh button in Safari on the iPad, and I saw console messages appearing in the “Console” in WebIDE! Success!
This is pretty dang cool. You can now debug a website in Safari on iOS! One thing that isn’t the same as Chrome Developer Tools is that the tools in WebIDE don’t have a “Networking” tab that shows all requests, but I was able to make it work with what they do provide. Being able to debug, period, is awesome.
Have you tried debugging a website in Safari on iOS with a Windows machine before? How did it work out for you, and what tool(s) did you use?