Debugging Native Apps

Last modified: October 22, 2024

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. Using Google Chrome is recommended for this, as it starts automatically during debugging.

Debugging Your Native App

To start a debugging session, do the following:

Run your Mendix app locally on your desktop.
Start the Make It Native app.
Select Enable dev mode in the Make It Native app.
Start your app on your mobile device in Mendix Studio Pro by clicking View App > View on your device.
With your mobile device, tap Scan QR code, then scan the QR code on your desktop.

When the Make It Native app finishes loading your app, do the following:

Open the developer menu by using a three-finger long press.
Tap Enable Remote js Debugging.

Your mobile app should start reloading, and a Chrome window should launch on your desktop pointing to a debugging address. Change the address in your browser’s navigation bar to localhost:8083/debugger-ui manually and go to that page.

If Chrome launches but does not load your app, check that your app is running in Mendix Studio Pro. If it is, click the Stop button, then click Run Locally () again to restart your app.

You should see this page:

If the status remains at Waiting, use the reload command (pictured above) to refresh your app. The Waiting status should change and indicate an active session:

Your browser’s debugging tools should be pointing to your app. Now, you can debug your app like you would any other web app.

Other tools can help you debug Mendix apps, such as the Using React Developer Tools section below. Regardless of which tool you use, remember that Mendix uses a different port (8083) than a default React Native installation would (8080).

Using React Developer Tools

React Developer Tools is an app which will allow you to see 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 Facebook’s official documentation for extra information, but This document teaches you the basics of using React Developer Tools.

To install React Developer Tools, do the following:

Open your CLI and run NPX (an executable runner for NPM) with this code: npx react-devtools@^3. The @^3 ensures compatibility with Mendix’s React Native version.

Debugging with iOS Simulator and Android Emulators

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

Select Enable dev mode on your native app.
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:
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:

Connect your mobile device to your laptop with a USB cord.
Run adb devices to ensure your device is listed.
Start your native app on your device with Enable dev mode selected.
Run adb reverse tcp:8097 tcp:8097 to allow the applet to interact with your device`.
Run npx react-devtools@^3.
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:

Install the LTS of Node.js.
Open your command-line interface (CLI).
Run npm i -g react-devtools@3 to install the React developer tools.
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:

Open your app in the Make It Native app with Enable dev mode selected.
When running your app, shake your device to open developer settings.
Tap Toggle Element Inspector to start inspecting.
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.
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:

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.
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:

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.
Download the Latest Android Tools for Windows.
Unzip the files in a working directory, for example C:\adb.
Open a command line tool the in the working directory.
Execute the command adb start-server.
Connect your phone via USB, then accept the Allow USB debugging? dialog box on your phone.
Execute the command adb logcat > output.txt. All output will be written in output.txt.
Open your Mendix app and implement the actions that you want to debug.
Stop the log capturing in your command line tool by pressing Ctrl + C.
Open output.txt in a text editor.
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.