No way to debug iOS issues in web apps from Windows?

Question

I've found a few bugs while testing a web app on an iPad Pro and iPhone 7 Plus that I can't replicate with any browser in Windows or Android and I cannot find any way to remote debug Safari in Windows.

I tried using RemoteDebug iOS WebKit Adapter but the devices don't appear to be discoverable with either the Chrome or VS Code debuggers.

I've confirmed that Web Inspector is enabled in Safari, the device is discoverable and trusted using iTunes, and that all necessary/recommended dependencies are installed. The server starts fine, there are just no devices listed in the debuggers.

Some searching through replies to previously submitted questions suggests that this has been broken for versions of iOS > 11 but the latest commit to that repo suggests support for iOS 12.2+ has been added as of January 2 of this year. (I'm trying to debug the app for iOS 13.3)

I'm curious if anyone else has run into this and have found any workarounds for debugging iOS specific issues using a Windows PC. Or if there are good alternate solutions (short of buying a Mac) if not.

Answer 1

2021 update:

The creator of remotedebug-ios-webkit-adapter here. I've built a replacement for RemoteDebug called Inspect, which packages everything together in a pleasant experience and enables easy iOS web debugging from Windows, macOS, and Linux, with a few extra features like screencasting and wifi debugging, that you might find useful.

Answer 2

as I faced the same problem... I would like to share my findings:

Followed the steps described by John Washam. I did tried this yesterday (iPAD Pro with iOS 14 and Windows 10) and I can confirm that it works ;-)

Here to summarize the solution for remote debugging iOS devices > iOS 11:

1. Install iTunes on your Windows 10 PC

2. Install Node.js

3. Download the most recent ZIP release file of the remotedebug-ios-webkit-adapter

4. Create a new folder named "ios-webkit-debug-proxy-1.8.8-win64-bin" at the following location (assumes you installed Node.js in the default directory):

   %AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\vs-libimobile\

5. Extract the files from the ZIP to that folder %AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\vs-libimobile\ios-webkit-debug-proxy-1.8.8-win64-bin

--> The folder vs-libimobile was missing in my case thus I simply created it

7. Edit the iosAdapter.js file.

   Open the file from the following location: %AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\out\adapters\iosAdapter.js

On line 125ff., change the proxy variable to the following value (path to the ois_webkit_debug_proxy.exe):

const proxy = path.resolve(__dirname, '../../node_modules/vs-libimobile/ios-webkit-debug-proxy-1.8.8-win64-bin/ios_webkit_debug_proxy.exe');

8. Go to %AppData%\npm, open PowerShell and tpe in the following command:

.\remotedebug_ios_webkit_adapter --port=9000

9. Open up Chrome on your Win PC and browse to chrome://inspect/#devices

   Since we set the adapter to listen on port 9000, we need to add a network target. Click “Configure” next to Discover network targets:

10. Enable web inspector on your iOS device. Take your iOS device and go to Settings > Safari > Advanced and enable Web Inspector

11. Open Safari on your iOS device and browse to a website. You should almost immediately see the website appear in Chrome under the Remote Target section.