Mark the webview as inspectable in iOS 16.4

[davidb-wz]

Bug Report

Problem

Safari Web Inspector doesn't show current iOS app launched in simulator

What is expected to happen?

Be able to use Safari web inspector to debug the app running in iOS Simulator by setting the "isInspectable" webview option to "true" in project configuration.

What does actually happen?

"No inspectable application" displayed instead of the running app in the Safari menu
Don't know how/where to set the "isInspectable" webview option to "true"

Information

Was working fine until the last xcode update.
Turns out that since iOS 16.4, the webview as to be marked as "inspectable" to enable the functionality of web inspection.
See https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/ for detailed information.
Also https://developer.apple.com/forums/thread/727049 in Apple developers forum

Command or Code

From xcode, run app in simulator
From Safari, select the ‘Develop’ tab from the menu bar, then 'Simulator'

Environment, Platform, Device

Mac Mini, Mac OS Ventura, iOS 16.4

Version information

xcode 14.3

Cordova Packages:

cli: 11.1.0
    common: 4.1.0
    create: 4.1.0
    lib: 11.1.0
        common: 4.1.0
        fetch: 3.1.0
        serve: 4.0.1

Project Installed Platforms:

ios: 6.2.0

Project Installed Plugins:

@havesource/cordova-plugin-push: 4.0.0-dev.0
cordova-plugin-androidx-adapter: 1.1.3
cordova-plugin-device: 2.1.0
cordova-plugin-dialogs: 2.0.2
cordova-plugin-inappbrowser: 5.0.0
cordova-plugin-network-information: 3.0.0
cordova-plugin-statusbar: 3.0.0

Environment:

OS: macOS Ventura 13.3 (22E252) (darwin 22.4.0) arm64
Node: v18.15.0
npm: 9.5.0

ios Environment:

xcodebuild:

Xcode 14.3
Build version 14E222b

Checklist

• [ x] I searched for existing GitHub issues
• [ x] I updated all Cordova tooling to most recent version
• [ x] I included all the necessary information above

[ghost]

Same issue: Safari inspector does not work any longer since latest macos update (13.3) and ios update (16.4). Safari inspector still works with mobile Safari content.

[breautek]

It's an intended change from Apple, starting with iOS 16.4, any builds using the 16.4 SDK the webview is no longer inspectable by default and needs the flag.

If I recall Apple notes correctly, older devices are inspectable if the build is in debug mode, or builds with an older iOS SDK are inspectable while in debug mode (iOS 16.4 devices will use old behaviour logic if the app was built with an older SDK)

The flag will be exposed in 7.0.0 release of cordova-ios via a preference (currently in the PR #1300)

In the meantime, building with an older IOS SDK or using an older iOS version should yield inspectable webviews. Alternatively, for testing purposes, you can use the #1300 fork to get access to the InspectableWebview preference. I would not recommend releasing an app to production however with the fork, or any development version of cordova-ios.

Also, i guess the inspector is always enabled for simulators:

You do not need to enable Web Inspector for simulators; it is always enabled.

However, in my own testing, that doesn't appear to be the case and might be a simulator bug.

Edit: Misinterpreted the blog, that is for the context of enabling inspection on the Safari side. It's not relevant to the xcode/WkWebView inspectable setting.

Ref: https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/

[silverprize]

@breautek Thank you very very much.

[orenagiv]

Seems that this has been released as part of cordova-ios v6.3.0 :)

[breautek]

Seems that this has been released as part of cordova-ios v6.3.0 :)

That is indeed correct. Nik has decided to backport the change to 6.3.0.

The backport was originally intended for 6.2.1 but we bumped to 6.3.0 as it was decided to be a feature rather than a bugfix.

It can be installed by doing:

cordova platform remove ios
cordova platform add ios@6.3

[ThomasAtome]

Hello,
I tried the backport on the 6.3.0 but it seems not working when i build and run on a iOS Simulator and on my personal iPhone 14 Pro.
I have to put the changes of the PR in the file CDVWKWebViewEngine in order to correctly activate the inspectable flag.
Any idea why ?

[breautek]

Hello, I tried the backport on the 6.3.0 but it seems not working when i build and run on a iOS Simulator and on my personal iPhone 14 Pro. I have to put the changes of the PR in the file CDVWKWebViewEngine in order to correctly activate the inspectable flag. Any idea why ?

A common issue is people using the ionic webview, which naturally replaces the cordova webview and it's configurations.

I don't believe Ionic maintains their cordova webview plugin anymore as I believe they have moved on from Cordova. So if you use the ionic webview, now might be a good time to remove it. Their last update to the webview was 3 years ago.

The cordova webview feature supports schemes so you can configure it to use the same ionic:// scheme as before to avoid an origin change.

[ThomasAtome]

How i can change my setup in order to switch ? I'm in Ionic 5 right now

[breautek]

How i can change my setup in order to switch ? I'm in Ionic 5 right now

If you just simply use the webview without using the ionic framework, then you should be able to just remove the cordova-plugin-ionic-webview.

If you use the actual ionic framework, then it may require the ionic webview (I'm not entirely sure, but reasonable to assume that there is a dependency there...). If the ionic framework requires their ionic webview, then I think you have 3 options:

1. Ask ionic to update their webview to support iOS 16.4 debuggable flag and hopefully they will comply
2. Fork their webview plugin and figure out how to add it in yourself.
3. Migrate away from ionic's cordova framework in one way or another.

[maximusthorley]

Add the following preference to your config file:

   <preference name="InspectableWebview" value="true" />

and boom it should work

[aaadipop]

works, but console.log() doesn't print anything ... any hints?

-- edit
works with Safari Technology Preview 16.4