Debugging Your Apache Cordova iOS App With Safari

Previously I wrote how to properly test your Ionic Framework application and how to debug your application using ADB for Android.  However, I get many questions from people regarding how to test their Apache Cordova, PhoneGap or Ionic Framework application running on iOS.

In this guide I’m going to walk through the steps for troubleshooting code using an iOS simulator and the Safari web browser.

Before going any further, note that you’ll need a Macintosh computer with Xcode.  This is not only for building and running iOS applications, but also to troubleshoot them.  Also note we will be using Ionic Framework, which is just a framework for Apache Cordova.  You’re welcome to use vanilla Apache Cordova or PhoneGap as the testing process will be the same.

Let’s go ahead and create a new project and introduce some bugs into it.  From the Terminal, run the following:

With the project created, crack open the project’s www/js/app.js file because we’re going to add a controller with some code:

Our MainController has just one console output inside a $scope function called showLog.

Open the project’s www/index.html file and attach this controller to the <ion-content> tags like so:

Also take note of the button we added to call the showLog function.  We’re now going to run our project and see what happens.

From the Terminal, run the following:

If you get errors in your Terminal regarding the simulator, you probably have not yet installed the ios-sim package through NPM.  It can be done like so:

Re-run the emulate command if necessary.

At this point the simulator should be running fine with your application.  Open the Safari Mac OS application on your Mac and enable the Develop menu if it hasn’t already been enabled.  This can be done in Safari’s advanced preferences:

Safari Develop Menu

With the Develop menu enabled, you can now connect to the iOS simulator.  From the Develop menu choose iOS Simulator -> AppleProject -> index.html to bring up an inspector:

Safari iOS Simulator

You can now inspect the console logs!  If for some reason that option is not available, check to see if you have the Web Inspector enabled in your iOS simulator or device:

iOS Web Inspector

Click that button we added and our console.log message should appear in the inspector.  This is a controlled environment though because we initiated that log via button press.  What happens if we legitimately receive an error in our application?

Remove the showLog button and make your controller look like the following:

Notice we are going to try to use $rootScope even though we haven’t injected it into the controller like we did $scope.

Run the application now and the following should appear in your Safari inspector:

A true error!  Most of this output is not important to us though.  Look at the following in particular:

We have an error with $rootScope in www/js/app.js on line 17.  Not exactly our line, but pretty close.  That information is solid enough for us to go correct the problem.

Conclusion

Knowing how to troubleshoot your own application is a very important skill.  Just like how I demonstrated with Android, debugging your iOS application is not too different and possibly even easier.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Bernd L

    Great post! It was really helpful. With your device connected you can even debug mobile web apps or mobile websites that run in your browser.
    But is it also possible to debug an ionic app running in ionic view? That’s an issue I currently get stuck.

    • Under no circumstance do I recommend you use ionic view, ionic serve, or ionic live-reload. These are alpha / beta services known to have a ton of problems.

      I recommend you build and install apps how they were intended. Your testing and user experience will benefit from this.

      Best,