Debugging Native Apps

Introduction

When changing your native mobile app or designing a custom widget, you may need to debug your implementation. The Make It Native app exposes a developer mode which supports debugging native mobile apps for expert developers.

Debugging Your Native App

To start a debugging session in a custom developer app built with a debug configuration, do the following:

1. Run your Mendix app locally on your desktop.
2. Start your custom developer app.
3. Select Enable dev mode on the initial screen of the app.
4. Start your app on your mobile device in Mendix Studio Pro by clicking View App > View on your device.
5. With your mobile device, tap Scan QR code, then scan the QR code on your desktop.

When the custom developer app finishes loading your app, do the following:

1. Open the developer menu by using a three-finger long press.
2. Tap Open DevTools.

React Native DevTools opens on your desktop and connects to your app. You can inspect your app and set breakpoints in its JavaScript files.

Using React Developer Tools

React Developer Tools is an app which will allow you to investigate the way your native page is rendering, adjust things like spacing in a live editor, and inspect the state and props of your pluggable and native widgets. To proceed, you must also have Node and NPM installed.

You can consult the React Native documentation for extra information, but this document teaches you the basics of using React Developer Tools.

To install React Developer Tools, do the following:

1. Open your CLI and run NPX (an executable runner for NPM) with this code: npx react-devtools.

Debugging with iOS Simulator and Android Emulators

Open your native app in iOS Simulator or Android emulator and then do the following:

1. Select Enable dev mode on your native app.

2. Run npx react-devtools.

3. React Developer Tools will launch and connect to Simulator. You can now inspect and modify the React Native elements the same way you could modify HTML elements in Chrome:

   

4. In the Make It Native App, use a three-finger tap to Toggle Element Inspector and enable enhanced inspection capabilities.

Debugging with the Make It Native App

To use the Make It Native app with React Developer Tools, do the following:

1. Connect your mobile device to your laptop with a USB cord.

2. Run adb devices to ensure your device is listed.

3. Start your native app on your device with Enable dev mode selected.

4. Run adb reverse tcp:8097 tcp:8097 to allow the applet to interact with your device.

5. Run npx react-devtools.

6. React Developer Tools will launch and connect to your device. You can now inspect and modify the React Native elements the same way you could modify HTML elements in Chrome:

   

Debugging Your Styling

With the Make It Native app, you can examine your styling and the structure of your pages. This makes it easier to debug, test, and inspect styling. Inspect and debug your styling by doing the following:

1. Install the LTS of Node.js.
2. Open your command-line interface (CLI).
3. Run npm i -g react-devtools to install the React developer tools.
4. Run react-devtools.

After running react-devtools you will see the React developer tools GUI. To use the tools to debug your styling, do the following:

1. Open your app in the Make It Native app with Enable dev mode selected.
2. When running your app, shake your device to open developer settings.
3. Tap Toggle Element Inspector to start inspecting.
4. Tap any styled element in your app (like a text element) to see its style information on your device and inspect and debug it in your React developer tools GUI.
5. Shake your device and tap Toggle Element Inspector to turn off the inspector off.

Debugging the OS Logs

When your Mendix app is crashing or the logging in Mendix Studio Pro is incomplete, you might want to dive into your operating system's log files for information. There are two options:

1. You could start the app in Xcode or Android Studio, either of which will give you more information and allow you to set breakpoint and inspect variable values. This approach is a bit more cumbersome.
2. Get the log files directly from your device.

The first approach is self-explanatory. For information on getting log files directly from your device, however, see below.

Using Android Logcat

The Android Debug Bridge (ADB) can get the log files via command line (specifically logcat) by following these steps:

1. Set up your phone:
   
   1. If not already, enable Developer Mode by opening Settings > System and tap 7 times om the Build Number.
      
   2. In Settings open the Developer Options.
      
   3. Enable USB Debugging.
2. Download the Latest Android Tools for Windows.
3. Unzip the files in a working directory, for example C:\adb.
4. Open a command line tool the in the working directory.
5. Execute the command adb start-server.
6. Connect your phone via USB, then accept the Allow USB debugging? dialog box on your phone.
7. Execute the command adb logcat > output.txt. All output will be written in output.txt.
8. Open your Mendix app and implement the actions that you want to debug.
9. Stop the log capturing in your command line tool by pressing Ctrl + C.
10. Open output.txt in a text editor.
11. Search for your issue.

For more detailed steps how to set up ADB, see Install ADB. To learn more about ADB in general, see Command ADB.