How to debug a Cordova app showing blank screen in XCode Simulator

Colin M 0
Viewed 30

We inherited an app where the frontend is built in Vue 2 and the mobile app built with cordova-ios (6.2.0) and cordova-android (10.1.1). It has built ok and loaded in the XCode (13.2.1) simulator until recently.

It's got some fairly old packages which I upgraded, and managed to get it to run both in vue ui and Android Studio (Chipmunk). (I had upgraded the packages because somewhere along the line that build broke -- so I deleted node_modules and package-lock.json, then upgraded packages one by one until I got it working again.)

However, when I do the Cordova build for iOS, open the project in XCode, do an XCode build, then open it up in a simulator, the screen is completely blank.

These are the only files that changed in version control between releases:

package.json
package-lock.json
babel.config.js
(various Vue files under src/views)

I'm fairly new to mobile development so don't really know how to proceed. How would I go about debugging the project (simulator, XCode, whatever) to see what has broken?

Any extra information you need please ask.

Edit 1: Avinash's suggestion about debugging via Safari Dev Console was a good tip (thanks Avinash). I've checked the app HTML vs a working build and it seems somehow the injection of the app content into <div id="app"> is not happening. In the android version it's fine, so maybe something in the cordova build is not happy.

There's an error message in the debug logging in XCode saying it could not load the "LaunchStoryboard" image referenced from a nib in the bundle with identifier which is also different from the output in a working build.

cordova-ios cordova xcode
1 Answers

Avinash's suggestion is spot on in that it can help troubleshoot startup problems (I've had to do this a bunch of times myself). From your update, it sounds like there's an issue with the splash screen configuration.

There's some iOS specific documentation for the splash screen plugin on the Cordova documentation website. A couple tips that might be useful in tracking down the issue:

  • You can use a single image for the splash screen if desired. I've got just one defined for my app (the needed dimensions are defined in the Cordova docs above):
<platform name="iOS">
  ...
  <splash src="www/res/screen/ios/Default@2x~universal~anyany.png" />
</platform>
  • I have also run into issues where the storyboard file has gotten corrupted, probably by me falling on my keyboard and clicking on something while the editor was open. To rebuild, you can remove and re-add the iOS platform:

$ cordova platform rm ios

$ cordova platform add ios

This should copy over the splash image and rebuild the storyboard file.

eb10
Related