Ionic app - Cordova - Safari Debug not working

Issue

In the past I was able to run my Ionic Cordova app onto my iPhone and plug it into my Mac, then open Safari on my Mac and go to Develop -> PHONE_NAME -> localhost to inspect my app.

Currently when I go to the Develop menu, PHONE_NAME shows up however, the app does not show up as an option.

If I open Safari on my phone it shows up as an option so I know it works, just not with my Ionic app.

I saw that cordova-ios 6.3.0 mentions they fixed a bug with this:

This release contains a fix to allow inspecting of WebView content with the latest iOS and Xcode versions. It also fixes an iOS 16 bug and issues with NodeJS 18. Blockquote

https://cordova.apache.org/announcements/2023/04/15/cordova-ios-release-6.3.0.html

But after updating to cordova-ios 6.3.0 the problem persists.

Any ideas what else to try?

Mac OS Version: Ventura 13.4

iPhone iOS Version: 16.5

xCode Version: 14.3.1

Solution

After looking into this more, it seems the problem has been fixed on cordova-ios, however ionic uses it's own webkit.

So the fix would have to be applied to Ionic's plugin: https://github.com/ionic-team/cordova-plugin-ionic-webview

I found there is already a pull request on that plugin with the fix: https://github.com/ionic-team/cordova-plugin-ionic-webview/pull/677

I was able to get the inspect working for me locally by forking the master branch, applying the changes then updating my package.json like so:

"cordova-plugin-ionic-webview": "github:< YourGithubUsername >/cordova-plugin-ionic-webview"

Answered By - DanielRead