Learn about different tools available to debug your Expo project.
This page lists a few tools to help debug your Expo project.
This menu gives you access to several functions which are useful for debugging and is built into the Expo Go app. The way you open it is a bit different depending on where you're running the Expo Go app:
adb shell input keyevent 82in your terminal
adb shell input keyevent 82in your terminal
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.
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
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 React DevTools sections 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 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-debugger
After firing up React Native Debugger, you'll need to specify the port (shortcuts: Cmd ⌘ + t on macOS, Ctrl + t on Linux/Windows) to
19000 (if you use SDK <= 39, the port should be
19001>). 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
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
There are however some limitations, so there are a few other alternatives, all of which require using a proxy:
In bare workflow apps you can use Flipper to inspect network traffic.
Redux is a popular library for managing and centralizing application state shared throughout the app. You can use Redux DevTools on React Native Debugger for debugging the application's state changes. The setup is as follows:
__REDUX_DEVTOOLS_EXTENSION__as shown here.
You're now good to go! If you are experiencing any issues or want to learn more about how to use these tools, refer to this guide.
React DevTools is a great way to get a look at each of your components' props and state. First, you'll need to run
# Install React DevTools with npm
npm install -g react-devtools
# If you are using Expo SDK <= 37: npm install -g react-devtools@^3
(if you don't want to install it globally, run
npm install --dev react-devtools to install it as a project dependency).
npx expo start in your project's root directory, use a separate terminal tab to run
react-devtools. This will open up the React DevTools console (for it to connect, you need to select
Debug remote JS from the Developer Menu in the Expo Go app). From this console, you can search for your React components at the top, or open up the Developer Menu and enable the Element Inspector. Once you do that, you can tap on any element on screen and React DevTools will automatically find and display that element in the tree. From there, you can inspect the elements state, props, etc.
React DevTools can also be paired with remote debugging, allowing you to inspect props, state, and instance properties in the Chrome console. If you have any questions on setting that up, give the next section a look!
To ensure the best debugging experience, first, change your host type to
npx expo start --lan or
npx expo start --localhost. If you use
npx expo start --tunnel with debugging enabled, you are likely to experience so much latency that your app is unusable.
If you are using
npx expo start --lan, make sure your device is on the same Wi-Fi network as your development machine. This may not work on some public networks.
npx expo start --localhost will not work for iOS unless you are in the simulator, and it only works on Android if your device is connected to your machine via USB.
Open the app on your device, reveal the developer menu then tap on
Debug JS Remotely. This should open up a Chrome tab with the URL
Line numbers for
console.log statements don't work by default when using Chrome debugging. To get correct line numbers open up the Chrome Dev Tools settings, go to the "Blackboxing" tab, make sure that "Blackbox content scripts" is checked, and add expo/build/logs/RemoteConsole.js as a pattern with "Blackbox" selected.
When you run a project on your device with
npx expo start or
npx expo run:android, the Expo CLI automatically tells your device to forward
localhost:19000 to your development machine, as long as your device is plugged in or emulator is running. If you are using
localhost for debugging and it isn't working, close the app and open it up again using
Open on Android. Alternatively, you can use the following
adb command if you have the Android developer tools installed:
adb reverse tcp:19000 tcp:19000.
Source maps and async functions aren't 100% reliable. React Native doesn't play well with Chrome's source mapping in every case, so if you want to make sure you're breakpointing in the correct place, you should use the
debugger call directly from your code.
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've 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.