10

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.

1
  • same issue. did you come up with a solution? Commented Jun 6, 2020 at 14:47

4 Answers 4

17

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.

4
  • 7
    A helpful answer, and important to note the replacement is commercial with a 30 day free trial. "Inspect is an independent venture, and we think great developer tools should cost money."
    – Doug
    Commented Jul 27, 2021 at 8:10
  • I do agree with Doug about great developer tools should cost money, if the developer used only his knowledge to built it. But if the developer used other developers to test his code as beta testers (guinea pigs) the code is not proprietary but collective, which seems to be the case of this. Specially when the "Archived" code was funded by Microsoft.
    – raphie
    Commented Oct 25, 2021 at 15:01
  • So is the simple answer to this that, yes, there is no way in 2021 to remote debug iOS Safari just using the tools I already have or can download for free? I don't disagree with paying for your work in principle, I'm just surprised neither Apple nor Microsoft makes this available with all the other tools they give developers to get them on their platforms. Commented Dec 24, 2021 at 16:17
  • 1
    Seems to work as advertised with iOS 15.2.1 and Windows 10; 14 day trial now. Requires iTunes installed on Windows.
    – Ben in CA
    Commented Feb 10, 2022 at 17:04
11

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.

4
  • some corrections: step 7 -> line 132 not '125ff', step 8 -> no need to Go to %AppData%\npm
    – kofifus
    Commented Oct 19, 2020 at 7:14
  • When I run the command .\remotedebug_ios_webkit_adapter --port=9000 I have error: SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at Request._callback (C:\Users\pp\AppData\Roaming\npm\node_modules\remotedebug-ios-webkit-adapter\out\adapters\iosAdapter.js:44:38) at Request.self.callback (C:\Users\pp\AppData\Roaming\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\request\request.js:185:22) at Request.emit (events.js:210:5) at Request.<anonymous>...
    – DiPix
    Commented Apr 28, 2021 at 9:56
  • 1
    Ok it seems that it working fine under the different port: .\remotedebug_ios_webkit_adapter --port=9222
    – DiPix
    Commented Apr 28, 2021 at 10:06
  • Firstly, thank you. This does work, although, like others, I had to use a different port. However, it is extremely buggy. It barely works, and most actions cause it to crash and disconnect. This is the case in any Chromium-based browser I've tried,m and on two different Windows PCs. Perhaps it just doesn't work that well anymore on Windows 11 and with newer versions of iOS. Any insight from others would be really helpful; Thank you in advance! Commented Nov 11, 2022 at 13:10
4

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.

2
  • 1
    I had this issue. Worked with nodejs and not python. My issue was the Windows Store link overriding my python in the env path. The script contains Get-Command "python3.exe". Running the returned source path form that in PS opened the windows store, even though I already have python installed on my path. To disable in Windows 11: Settings > Apps > Advanced app settings > App execution aliases. Look for the entries labelled: App Installer python3.exe also python.exe as well. Update start.ps1 if your system uses python.exe instead of python3.exe Commented Sep 28, 2023 at 20:20
  • 1
    For future readers: I fixed this bug, it will now detect whether Python is actually installed or just the Store shortcut.
    – Himbeer
    Commented Jan 29 at 22:39
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.