Debugging Tips For Your Ionic App

This is a guest post from Simon Grimm, Ionic Insider and educator at the Ionic Academy. Simon also created the Built with Ionic book where he breaks down popular apps like Netflix and rebuilds them completely with Ionic styling and interactions!

Debugging Ionic apps is not always easy, as apps usually behave differently on the browser and when deployed as a native mobile app.

This also means you need to be proficient in different debugging tools and understand when you need to apply which technique to confidently spot and fix every bug in your code.

In this guide we will go through different ways to debug Ionic apps, inspect API calls inside your app and figure out how to access the underlying database and even explore the stored app files, which are some of the most challenging tasks when debugging your Ionic app.

But before we do all of that, let’s start with the basics for debugging.

Browser Debugging Tools

Since our Ionic app is basically a website, most of our debugging is like debugging a standard website. I usually use Google Chrome, but Firefox or Safari and other major browsers offer mostly the same capabilities for debugging web applications these days.

Within Chrome you can toggle the developer tools by pressing CMD+ option + i on a Mac (Control+Shift+I on Windows) to toggle the developer tools area, which is your essential view for all further actions.

These options not only help to see your console message but do basically allow every debugging task from setting breakpoints to inspecting your memory consumption. Yes, the web has come a long way!

Remote Debugging iOS Apps

Even if we deploy our app to a native device, it’s still a web application and as such we can continue to use the browser debugging tools!

This process is known as remote debugging and we now even got access to all the real native device logs that happen inside our apps!

It is called like that because we need to connect our browser debugging tools to a remote webview, so let’s do this for iOS first.

Get started by deploying your Ionic app to either your connected device or a simulator, which you can do even with livereload when using Capacitor like this:

ionic cap run ios --livereload --external

Now the fun begins when you open Safari because this is not working with Chrome for iOS.

First, enable Show Develop menu in menu bar within the preferences of Safari.

Next select from the top develop menu that you now have the device and the running webview inside the device!

Voilà – a new window with all the known browser debugging tools comes up. Within this window you can now debug your running Ionic application just like you would do inside your normal browser preview.

Remote Debugging Android Apps

The process to connect with a running Android application is mostly the same, so again begin by deploying your app to a connected device:

ionic cap run android --livereload --external

To inspect your app with remote debugging, open Chrome and now navigate to chrome://inspect/devices, which will show you all connected devices.

Click on inspect for the instance you want to debug and a new window with the familiar Chrome debugging tools comes up.

I recommend hiding the app preview since it’s not really adding any benefit to your debugging unless you want to select a DOM element, and it just feels clumsy and laggy.

Anyway, at this point you are ready to debug an Ionic app on every platform using the browser debugging tools, so let’s take a look at some concrete examples that will improve your Ionic debugging skills.

It’s also worth noting that if you prefer to use browsers like Edge or Brave, the same technique applies here since these browsers are based on Chromium.

Debugging API Calls

If your app connects to any kind of API, you might (or might not) send and receive data. The trouble starts when you see a red error inside the log that indicates something with your API call went wrong.

At that point you can dive into the Network tab of the debugging tools to inspect all the outgoing API calls from your application.

On the left hand side you can see the names of the different endpoints that your app is calling, on the right you got more tabs to drill down into the header information, the preview of your outgoing call and the actual response from the server.

If any of the elements inside the list on the left side is red, you should inspect that call in detail.

Why your API call fails is something you need to figure out now, based on the status code you get back, or a potential error message that you can find inside the response from the server (if your app received a response!).

One of the most common issues you still see is a CORs error – but this is something that needs to be changed inside the server and can’t be easily fixed inside the Ionic app unless you add a proxy server to your API calls.

Check out the Ionic CORS troubleshooting guide for help on this specific topic!

Debugging Ionic Storage

When you store data in either the simple browser localStorage or using Ionic Storage, you might want to inspect the stored data or even manually change it while developing and debugging your Ionic app.

In order to find your data, you can dive into the Application tab of the debugging tools to bring up all possible storage locations.

From the list you can now select the location that your app is using. If you are using Ionic Storage, you can most likely find your data under IndexedDB and then the name of your database.

If you are using Capacitor Storage instead the data will be inside localStorage.

Not sure about the different storing mechanisms? Check out my video about differences between Ionic Storage, Capacitor Storage and SQLite!

Debugging SQLite Database Files

While we can debug Ionic Storage or Capacitor storage easily on the browser, it becomes more challenging if our tools use the native implementation on a real device like the underlying SQLite database.

Debugging the underlying SQLite database can be scary, as you need to extract the SQL database from your app to see its content.

Nonetheless, this is possible and you should know how to do it in case something goes wrong with your data saving logic.

SQLite on iOS

We need to download our apps container on iOS first, for this we nee to open Xcode -> Window -> Devices & Simulators to bring up a list of our connected devices.

Under the devices tab you should see your device and the installed apps. From here, select the Ionic app, click the settings wheel at the bottom of the list and pick Download Container

Hold on, we are not yet finished!

Find the container you just saved to your drive and right click it and pick Show Package Contents which will let you dive into the application data. From there you can find the database file like in the image below, or on a slightly different path if you used a specific location for the SQLite database inside your configuration.

Now you can open the database file with a tool like the SQLite Browser and inspect all the data which your Ionic application stored inside the database!

SQLite on Android

For Android you can do all of the work from the command line. Simply build and deploy your app like alway and once you want to get the database you can use the ADB shell to extract it from your app to your local filesystem like this:

adb shell 'run-as io.ionic.starter sh -c "cat ~/databases/mydb"' > db-file.sqlite

Note: The previous command might not work correctly on Windows, so use this one instead:

run-as io.ionic.starter sh -c "cat ~/databases/mydb" > /sdcard/db-file.sqlite

Just make sure that you are using the right bundle ID of your application and also the correct name that you used for your database in both cases!

With the SQLite database file on your drive you can inspect it like you would do with any other database file.

Access Device Files

If you app is creating its own files, like writing some settings or keeping track of user generated content, you might need to see even more information and access the actual file system.

Sounds scary, but good news everyone – it’s actually quite easy!

For iOS you can follow the same process like before to extract the app container and simply navigate into the folder that you picked for storing your documents on the filesystem.

As an example I used this code to create a folder and write two files using the Capacitor Filesystem plugin:

  async writeFiles() {
    await Filesystem.mkdir({
      path: 'secrets/cool-folder',
      directory: Directory.Documents,
      recursive: true,
    });

    await Filesystem.writeFile({
      path: 'secrets/simonstext.txt',
      data: 'This is a test message from Simon',
      directory: Directory.Documents,
    });

    await Filesystem.writeFile({
      path: 'secrets/cool-folder/another.txt',
      data: 'This is a test message from Simon',
      directory: Directory.Documents,
    });
  }

This is the resulting path of the app container with our created files:

For Android, the data is by default not written to the apps folder but a global documents folder that all apps can access (unless you pick a different directory).

But that’s not a big deal because there’s actually a great tool called Device file explorer which lets you browse all the files of your connected device right from Android Studio!

After bringing up the tool using the View menu you can scroll down until you find your documents folder, which should have your created data.

Teardown

These were some of the most challenging topics for debugging Ionic apps (next to memory leaks), and understanding how to find the right information or files is crucial to debug Ionic apps.

Being able to use all available tools means you can be confident in your problem solving skills, which means you can be confident in developing Ionic apps in general!

If you want to get even more support for your apps, check out the Ionic Academy in which I helped thousands of Ionic developers to build amazing Ionic apps and support them through our private community.

Now, would you like to see a second part about breakpoints and diving into native code from Xcode and Android Studio?

Leave a comment on what you would like to see and we will make it happen!