Impossible to open Safari web inspector

Ionic Framework Ionic Angular
1

:triangular_flag_on_post: Issue :triangular_flag_on_post:

I was debugging my application when I got a blank screen (simulator + web inspector). After a few seconds I decided to close both.

When I restarted the application via capacitor.
npx ionic cap run ios -l
All my ‘custom’ devices/simulators are gone. So I reinstalled some of them. But when I restarted my application (in debug mode) I realized that I was not able to open the web inspector anymore.

image
image1474×382 90.3 KB

As you can see, Safari is able to display the device name but not the web inspector.

:information_source: Notice: I still have the possibility to access it by running my application on a real Ipad and Iphone

:x: Already tried :x:

  • Remove my last changes - :x:
  • Restart my PC - :x:
  • Mac updates - :x:
  • Empty the Safari Cache & Ios Derived Data - :x:
  • Install Safari Technology Preview - :x:
  • Open test in several emulators (Iphone 8, Ipad Mini, Iphone PRO 14 …) - :x:
  • Open test with different targets (13.0 → 16.0) - :x:
  • Remove the Ios platform and reinsert it (ionic cap add ios) - :x:
  • Ionic Repear (+npm ci) - :x:
  • Update Node/Npm (16.17.0 → 18.15.0) - :x:
  • Uninstall/Reinstall XCode - :x:

Ps: I’m not comfortable with XCode if you have any ideas on this side I am highly interested

:computer: PC Info :computer:

  • Safari - Version 16.2 (18614.3.7.1.5)
  • XCode - 14.3

:pill: Ionic Info :pill:

Ionic:

   Ionic CLI                     : 6.20.8
   Ionic Framework               : @ionic/angular 6.6.1
   @angular-devkit/build-angular : 14.2.10
   @angular-devkit/schematics    : 14.2.10
   @angular/cli                  : 14.2.10
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.4.0
   @capacitor/android : 4.4.0
   @capacitor/core    : 4.4.0
   @capacitor/ios     : 4.4.0

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v18.15.0
   npm    : 9.5.0
   OS     : macOS

:hammer_and_wrench: Temporary fix :hammer_and_wrench:

source - “feat: New webkit feature - Inspectable WebKit, inspect production apps”
by thmclellan

Thanks @alexcroox for sharing this. It seems like a breaking change from iOS 16.3, which allowed for in-app webview contents to be inspected by default while running from Xcode.

For anyone who just upgraded to iOS 16.4 and lost their Safari > Develop > iPhone options, here is a temporary workaround that you can add to the end of the func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) function in the main AppDelegate class in Xcode.

// When running from Xcode in debug mode, enable webView inspection 5 seconds after startup
#if DEBUG
  if #available(macOS 13.3, iOS 16.4, tvOS 16.4, *) {
        DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
              if let vc = self.window?.rootViewController as? CAPBridgeViewController {
                  vc.bridge?.webView?.isInspectable = true;
              }
        }
  }
#endif

Not elegant at all with the 5 second delay but hopefully it helps someone waiting on a future update or plugin. Tested on Capacitor 4.4.0 with Xcode 14.3 RC2 with ionic serve project setup. I found Safari Technology Preview (16.4) was required to get console logging; Safari 16.3 connected but didn’t actually show logs.

2

There were some changes in iOS 16.4. Maybe this workaround helps you: feat: New webkit feature - Inspectable WebKit, inspect production apps · Issue #6441 · ionic-team/capacitor · GitHub

Edit: This is now fixed in Capacitor v4.8.0.

6 Likes
3

That was the solution thank a lot !

5

@robingenz thank you for this - I spent ages trying to work out why I could not get this to work. I had not realised it was an iOS 16.4 issue. Your temporary workaround has fixed it for me.

6

you saved me a lot of time! Thank you

2 Likes