Learn about different tools available to inspect your Expo project at runtime.
React Native consists of both JavaScript and native code. Making this distinction is very important when it comes to debugging. If an error is thrown from the JavaScript code, you might not find it using debugging tools for native code. This page lists a few tools to help you debug your Expo project.
As with websites, you can use Chrome DevTools to gain insights into the JavaScript code of your app. With this tool, you can access the Console, Source, and Network tab when using dev clients.
You can use the Chrome DevTools on any app using Hermes. To open it, start your app and press j in the terminal where Expo was started. Once you have opened the Chrome DevTools, it will appear as below:
You can pause your app on specific parts of your code. To do this, set the breakpoint under the Sources tab by clicking the line number, or add the debugger statement in your code.
Once your app is executing code that has a breakpoint, it will entirely pause your app. This allows you to inspect all variables and functions in that scope. You can also execute code in the Console tab as part of your app.
Breakpoints set through the Chrome DevTools depend heavily on source maps. Unfortunately, these source maps are not always 100% accurate. In some cases, you might have to use adebuggerstatement instead of a breakpoint.
If your app throws unexpected errors, it can be hard to find the source of the error. You can use Chrome DevTools to pause your app and inspect the stack trace and variables the moment it throws an error.
Some errors might be caught by other components in your app, such as Expo Router. In these cases, you can turn on Pause on caught exceptions. It will enable you to inspect any thrown error, even when handled properly.
The Console tab gives you access to an interactive terminal, connected directly to your app. You can write any JavaScript inside this terminal to execute snippets of code as if it were part of your app. The code is executed in the global scope by default. But, when using breakpoints from the Source tab, it executes in the scope of the reached breakpoint. This allows you to invoke methods and access variables throughout your app.
The Network tab gives you insights into the network requests made by your app. You can inspect each request and response by clicking on them. This includes fetch requests, external loaded media, and in some cases, even requests made by native modules.
This feature is only available from Expo SDK 49 and higher.
See the Inspecting network traffic for alternative ways to inspect network requests.
Profiles are not yet symbolicated with sourcemaps, and can only be used in debug builds. These limitations will be addressed in upcoming releases.
You can enable the JavaScript Profiler tab within Chrome DevTools to record and analyze the performance of your app JavaScript. The Performance tab is not currently supported. To profile the native runtime, use the tools included in Android Studio or Xcode.
This feature is only available from Expo SDK 49 and higher.
VS Code is a popular code editor, which has a built-in debugger. This debugger uses the same system as the Chrome DevTools — the inspector protocol.
You can use this debugger with the Expo Tools VS Code extension. This debugger allows you to set breakpoints, inspect variables, and execute code through the debug console.
To start debugging:
This will attach VS Code to your running app.
React DevTools is a great way to look at your components' props and state. You can open it by pressing Shift + m in the terminal where Expo was started. Once it's open, it will appear as below:
React DevTools can also be paired with the element inspector, allowing you to inspect props, state, and instance properties by tapping components inside your app.
Pressing the shift + m shortcut will also show installed dev tools plugins to provide additional ways to inspect your app.
This menu gives you access to several functions which are useful for debugging and is built into the Expo Go or dev client apps. If you are using the emulator, simulator, or have your device connected via USB, you can open this menu by pressing m in the terminal where Expo was started.
Android device (without USB): Shake the device vertically.
Android Emulator or device (with USB):
adb shell input keyevent 82iOS device (without USB):
iOS Simulator or device (with USB):
Once you have opened the Developer menu, it will appear as below:
The Developer menu provides multiple options:
exp:// link of your app.Now let's explore some of the more exciting functionalities.
Debug remote JS does not support apps using Hermes, see the Chrome DevTools section.
Opens a React Native Debugger tab in your browser to allow you to use DevTools. For example, you can use the Console tab to read the console.log statements.
It uses @react-native-community/cli-debugger-ui:
The Network tab will not work out of the box. To enable the Network tab and other debugging tools, additional setup is required, see the React Native Debugger and section below.
Opens up a small window giving you performance information about your app. It provides:
Opens up the Element Inspector overlay:
This overlay has capabilities to:
The React Native Debugger does not support apps using Hermes, see the Chrome DevTools section.
The React Native Debugger includes many tools listed later on this page, all bundled into one, including React DevTools and network request inspection. For this reason, if you use one tool from this page, it should probably be this one.
We'll give a quick look at it here, but check out their documentation for a more in-depth look.
You can install it via the release page, or if you're on macOS you can run:
- brew install react-native-debuggerAfter firing up React Native Debugger, you'll need to specify the port (shortcuts: Cmd ⌘ + t on macOS, Ctrl + t on Linux/Windows) to 8081 (for SDK 48 and lower, the port is 19000). After that, run your project with npx expo start, and select Debug remote JS from the Developer Menu. The debugger should automatically connect.
In the debugger console, you can see the Element tree, as well as the props, state, and children of whatever element you select. You also have the Chrome console on the right, and if you type $r in the console, you will see the breakdown of your selected element.
If you right-click anywhere in the React Native Debugger, you'll get some handy short-cuts to reload your JS, enable/disable the element inspector, network inspector, and to log and clear your AsyncStorage content.
It's easy to use the React Native Debugger to debug your network request: right-click anywhere in the React Native Debugger and select Enable Network Inspect. This will enable the Network tab and allow you to inspect requests of fetch and XMLHttpRequest.
There are however some limitations, so there are a few other alternatives, all of which require using a proxy:
In a perfect world, your app would ship without any bugs. However, that's usually not the case. So, it's a good idea to implement a crash and bug reporting system into your app. This way, if any user experiences a fatal JS error (or any event that you have configured to notify Sentry) you can see the details in your Sentry dashboard.
Expo provides a wrapper called sentry-expo which allows you to get as much information as possible from crashes and other events. Plus, when running in the managed workflow, you can configure sourcemaps so that the stracktraces you see in Sentry will look much more like the code in your editor.