> For the complete documentation index, see [llms.txt](https://sydrawat.gitbook.io/react-native/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sydrawat.gitbook.io/react-native/debugging/debugging-react-native-apps.md).

# Debugging React Native Apps

## What to Debug?

![What can we debug?](/files/-McdDZTFZqCLUJqBSPyN)

### Debugging on physical devices

With an expo app running on a physical device, we can debug  it too. We need to shake the device a little to bring up the developer menu. There, we can enable the remote debugger and other features.

## Handling error messages

### Read the error message

In often cases, the errors are mostly straight forward, or are self explanatory. In case you do not understand the error message, a simple Google search will suffice, since you might not be the first person to encounter such an error.

Another way to debug your app is by adding logs using the `console.log()` method. It is very useful in understanding code flow, and how your app is working behind the scenes.

## Debugging

### Remote debugger & Breakpoints

To open the developer menu on physical devices, just shake the device. On android and iOS simulators, we have different ways to bring this developer menu up.

1. iOS:\
   For iOS simulator devices, we can bring up the developer menu by pressing `⌘ + D`
2. Android: For android emulator devices, we cab bring up the developer menu by pressing `⌘ + M`

{% hint style="info" %}
The key does not have to be an uppercase character, `⌘ + d` and `⌘ + m` work just fine as well.
{% endhint %}

With the developer menu up, we can then select the option to `Debug Remote JS` to debug our app on the browser. Make sure that the connection is a `LAN` or `Local` in the expo developer webpage, because these options are faster than the `Tunnel` option.

This will open up a webpage in our browser in which we can open the browser developer tools to view all the logs that are generated in our app. Definitely helpful in debugging our react native app!

{% hint style="danger" %}
Always disable remote JS  debugging when you're done, since it tends to slow our app down!
{% endhint %}

###  Device devtools overlay

From the previous section, we learnt how to bring up the devtools overlay on our native devices. From this overlay, we can do a lot of things:

* **Reload**: We can reload our app
  * `Android` shortcut: `RR` typing the character `r` twice in the android emulator reloads it.
  * `iOS` shortcut: `⌘ + R` reloads the iOS simulator.
* **Disable Live Reloading**: Disable the automatic reloading whenever the app code is updated.
* **Enable Hot Reloading**: Reload parts of the app without  actually reload the whole app, i.e, only those components that have been updated in the code.
* **Show Performance Monitor**: This shows the app performance on the  top-right side of the emulator screen. This is a very useful devtool to help analyze our app performance. This is not the final app performance since there are many overheads and overlays in our development app, so it's just an indicator of our app performance.
* **Toggle Inspector:** This devtool is used to debug UI components of our application. This  works like the devtools that opens in our browser. A better way to debug the UI for our  react native app is to use the `React Native Debugger`.

## [React Native Debugger](https://github.com/jhen0409/react-native-debugger)

To debug the UI components of our react native app, we can use the [`react-native-debugger`](https://github.com/jhen0409/react-native-debugger) tool that is open-sourced and can be downloaded, which is a standalone app based on the official debugger of react native. This tool also includes React Inspector and Redux Devtools!

To install the react native debugger on a MacOS system, use the following command:

```bash
brew update && brew install --cask react-native-debugger
```

With the react native debugger installed, we can start it up, and use the `⌘ + T` and enter the expo app development server port here. This is visible in the expo developer webpage that opens when we run the `yarn start` command to start up the expo server.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sydrawat.gitbook.io/react-native/debugging/debugging-react-native-apps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.