CODEWITHSUNDEEP
ioswindowssafari
makewavesnotwar
makewavesnotwar

Reputation: 1015

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

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.

Upvotes: 12

Views: 30429

Answers (4)

Ivan Sanz Carasa
Ivan Sanz Carasa

Reputation: 1387

With WSL2 you can install a webkit browser that behaves almost the same as Safari desktop to debug your CSS issues.

Here's an article that explains step by step how to install a webkit browser in Windows

Upvotes: 3

benchvondaranch
benchvondaranch

Reputation: 379

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.

  6. 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');

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

    .\remotedebug_ios_webkit_adapter --port=9000

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

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

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

Upvotes: 11

Kenneth Auchenberg
Kenneth Auchenberg

Reputation: 489

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 screen-casting and Wi-Fi debugging, that you might find useful.

Upvotes: 18

Hans
Hans

Reputation: 79

After many hours googling and trying to get iTunes to recognize the phone (needed driver update from Windows update), and then trying to get to work with remotedebug-ios-webkit-adapter since it doesn't work properly for iOS 13+ and breaks when inspecting styles or objects, found ios-safari-remote-debug-kit which worked correctly on Windows 10 machine to debug a webpage running on an iPhone 7 with iOS 15.4.

Additional steps: For me, the Python webserver didn't work, so had to remove the condition at line 46 of start.ps1 script to just use the NodeJS one.

Update: Installing Python3 from Windows Store fixed Python server issue.

Upvotes: 6

Related Questions