How to debug blank screen with TestFlight app; works OK built locally in XCode

Capacitor
1

I’m having trouble debugging my Ionic React app built with Capacitor 5.5.0.

When I build locally and deploy via XCode, it’s fine; the app starts and I can log in and use all the features.

However, when I build using GitHub Actions and deploy via TestFlight, I see my splash screen and then I get a blank screen. I want to debug what is going wrong here, so I connected my iPhone via USB and in Safari, I tried to use Develop -> iPhone from the menu, but it says “No inspectable applications.”

I have Developer mode and Web Inspector turned on for the iPhone.

In capacitor.config.ts, I set webContentsDebbugingEnabled to true. So what more do I need to do to debug a release build?

Here’s the full content of my capacitor.config.ts:

// eslint-disable-next-line import/no-extraneous-dependencies
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my AppI',
  webDir: 'build',
  plugins: {
    CapacitorHttp: {
      enabled: true,
    },
    CapacitorCookies: {
      enabled: true,
    },
    PushNotifications: {
      presentationOptions: ['badge', 'sound', 'alert'],
    },
    SplashScreen: {
      // Show for five seconds.
      launchShowDuration: 5000,
      launchAutoHide: true,
      showSpinner: true,
      iosSpinnerStyle: 'large',
      androidSpinnerStyle: 'large',
      spinnerColor: '#007849',
    },
  },
  server: {
    // https://capacitorjs.com/docs/updating/5-0#update-androidscheme
    androidScheme: 'http',
  },
  cordova: {
    preferences: {
      BILLING_KEY:
        '123',
    },
  },
  ios: {
    webContentsDebuggingEnabled: true,
  },
  android: {
    webContentsDebuggingEnabled: true,
  },
};

export default config;
2

Since you are already using ios.webContentsDebuggingEnabled, try restarting desktop safari or using safari technology preview. That should be enough for making the WebView debuggable on iOS >= 16.4

1 Like
3

Thanks. I tried with Safari and Safari Technology Preview but I still don’t see my iPhones. I have one iPhone that is iOS 15.5 and another that is 17.0, both with TestFlight builds installed.

Safari Technology Preview and regular Safari can both debug the content of webpages I open in Safari on iOS on each iPhone, but I can’t get my Ionic app to appear in the debug list on Safari on macOS.

4

On the iOS 15.5 device it won’t work, the feature to debug production iOS apps was added in iOS 16.4

Which Xcode version are you using to build?
webContentsDebuggingEnabled will only work on Xcode 14.3 or newer, but also some of the apps I’ve tested recently were randomly not debuggable if built with Xcode 15 even in debug mode.

1 Like
5

Screenshot 2023-10-18 at 1.54.29 PM
Screenshot 2023-10-18 at 1.54.29 PM1958×722 63.2 KB

Try with this code

6

Thanks for this suggestion. In the future, it’s easier for other users if you cut-and-paste the code and use the “code formatting” button in the editor toolbar because it is easier to cut-and-paste than to read a screenshot.

Also, it’s helpful to add the name of the file where the edits are to be done.

7

Thank you very much! I reverted to XCode 14 and now the build works on the iOS 17 phone.

8

Capacitor already does what that code does, so it’s not needed.
Also your code only sets the value to true for debug builds, while Capacitor allows to set it to true for release builds too, which is what ptmkenny wants.

9

yes, I didn’t read what version I had, in the version I use that is not added.