Skip to content

Update native debugging docs for React Native DevTools #12045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MxKevinBeqo wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Update native debugging docs for React Native DevTools #12045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
87b0455
Update native debugging docs for React Native DevTools
MxKevinBeqo Oct 7, 2026
8d64552
Mark styling section as optional for Studio Pro 11.6 and above
MxKevinBeqo Oct 8, 2026
089cb71
Move Open DevTools known issue to the introduction
MxKevinBeqo Oct 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 23 additions & 27 deletions content/en/docs/refguide/mobile/distributing-mobile-apps/native-debug.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,48 +9,40 @@ aliases:

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

{{% alert color="warning" %}}
**Open DevTools** appears in the developer menu of the Make It Native app, but it does not open React Native DevTools. This is a known issue and a limitation of React Native, which does not include its debugger in release builds of an app. As the Make It Native app is distributed as a release build, you cannot use React Native DevTools with it.

To debug with React Native DevTools, use a custom developer app built with a debug configuration, for example the `devDebug` variant. For more information, see [Creating a Custom Developer App](/refguide/mobile/distributing-mobile-apps/building-native-apps/how-to-devapps/). To inspect your app in the Make It Native app, use [React Developer Tools](#rn-dev).
{{% /alert %}}

## Debugging Your Native App

To start a debugging session, do the following:
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 the Make It Native app.
3. Select **Enable dev mode** in the Make It Native app.
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 Make It Native app finishes loading your app, do the following:
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 **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 **Stop** ({{% icon name="controls-stop" %}}), then click **Run Locally** ({{% icon name="controls-play" %}}) again to restart your app.

You should see this page:
2. Tap **Open DevTools**.

{{< figure src="/attachments/howto/mobile/native-mobile/distribution/build-native-apps/native-debug/debug-waiting.png" alt="debug waiting" class="no-border" >}}

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:

{{< figure src="/attachments/howto/mobile/native-mobile/distribution/build-native-apps/native-debug/debug-active.png" alt="debug active" class="no-border" >}}

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](#rn-dev) section below. Regardless of which tool you use, remember that Mendix uses a different port (8083) than a default React Native installation would (8080).
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{#rn-dev}

React Developer Tools is [an app](https://github.com/facebook/react/tree/main/packages/react-devtools) 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](https://nodejs.org/en/download/) installed.
React Developer Tools is [an app](https://github.com/facebook/react/tree/main/packages/react-devtools) 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](https://nodejs.org/en/download/) installed.

You can consult Facebook's [official documentation](https://reactnative.dev/docs/debugging) for extra information, but this document teaches you the basics of using React Developer Tools.
You can consult the [React Native documentation](https://reactnative.dev/docs/debugging) 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@^3`. The `@^3` ensures compatibility with Mendix's React Native version.
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

Expand All @@ -71,19 +63,23 @@ 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@^3`.
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:

{{< figure src="/attachments/howto/mobile/native-mobile/distribution/build-native-apps/native-debug/min-app-rn-devtools.png" alt="debug min app" width="350" class="no-border" >}}

## Debugging Your Styling

{{% alert color="info" %}}
This section is optional for Studio Pro version 11.6 and above. React Native includes React Native DevTools, which is also bundled with Studio Pro. If you use the Make It Native app, you still need these steps, because **Open DevTools** does not open in that app, as described earlier on this page.
{{% /alert %}}

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](https://nodejs.org/en/).
2. Open your command-line interface (CLI).
3. Run `npm i -g react-devtools@3` to install the React developer tools.
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:
Expand Down
48 changes: 20 additions & 28 deletions content/en/docs/refguide10/mobile/distributing-mobile-apps/native-debug.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,45 @@ url: /refguide10/mobile/distributing-mobile-apps/native-debug/
weight: 40
description: "A guide for debugging native mobile apps using the Make It Native app."
aliases:
- /howto10/mobile/native-debug/
- /howto/mobile/native-debug/
---

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

{{% alert color="warning" %}}
**Open DevTools** appears in the developer menu of the Make It Native app, but it does not open React Native DevTools. This is a known issue and a limitation of React Native, which does not include its debugger in release builds of an app. As the Make It Native app is distributed as a release build, you cannot use React Native DevTools with it.

To debug with React Native DevTools, use a custom developer app built with a debug configuration, for example the `devDebug` variant. For more information, see [Creating a Custom Developer App](/refguide10/mobile/distributing-mobile-apps/building-native-apps/how-to-devapps/). To inspect your app in the Make It Native app, use [React Developer Tools](#rn-dev).
{{% /alert %}}

## Debugging Your Native App

To start a debugging session, do the following:
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 the Make It Native app.
3. Select **Enable dev mode** in the Make It Native app.
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 Make It Native app finishes loading your app, do the following:
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 **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 **Stop** ({{% icon name="controls-stop" %}}), then click **Run Locally** ({{% icon name="controls-play" %}}) again to restart your app.

You should see this page:

{{< figure src="/attachments/howto10/mobile/native-mobile/distribution/build-native-apps/native-debug/debug-waiting.png" alt="debug waiting" class="no-border" >}}

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:

{{< figure src="/attachments/howto10/mobile/native-mobile/distribution/build-native-apps/native-debug/debug-active.png" alt="debug active" class="no-border" >}}

Your browser's debugging tools should be pointing to your app. Now, you can debug your app like you would any other web app.
2. Tap **Open DevTools**.

Other tools can help you debug Mendix apps, such as the [Using React Developer Tools](#rn-dev) section below. Regardless of which tool you use, remember that Mendix uses a different port (8083) than a default React Native installation would (8080).
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{#rn-dev}

React Developer Tools is [an app](https://github.com/facebook/react/tree/main/packages/react-devtools) 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](https://nodejs.org/en/download/) installed.
React Developer Tools is [an app](https://github.com/facebook/react/tree/main/packages/react-devtools) 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](https://nodejs.org/en/download/) installed.

You can consult Facebook's [official documentation](https://reactnative.dev/docs/debugging) for extra information, but this document teaches you the basics of using React Developer Tools.
You can consult the [React Native documentation](https://reactnative.dev/docs/debugging) 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@^3`. The `@^3` ensures compatibility with Mendix's React Native version.
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

Expand All @@ -71,8 +63,8 @@ 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@^3`.
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:

{{< figure src="/attachments/howto10/mobile/native-mobile/distribution/build-native-apps/native-debug/min-app-rn-devtools.png" alt="debug min app" width="350" class="no-border" >}}
Expand All @@ -83,7 +75,7 @@ With the Make It Native app, you can examine your styling and the structure of y

1. Install the LTS of [Node.js](https://nodejs.org/en/).

@YogendraShelke YogendraShelke Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This entire section can be marked as optional for Studio Pro 11.6 and later versions. React Native ships React Native DevTools package, which then also bundles with Mendix Studio Pro.

Image

@MxKevinBeqo MxKevinBeqo Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, I changed it so that the steps are optional but with a side-note pointing to the documented Known Issue where Make it Native (production) does not include these components. So the steps are needed there to go over it.

Thank you! :)

2. Open your command-line interface (CLI).
3. Run `npm i -g react-devtools@3` to install the React developer tools.
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:
Expand Down
Loading