1--- 2title: Debugging tools 3description: Learn about different tools available to debug your Expo project. 4sidebar_title: Tools 5--- 6 7import ImageSpotlight from '~/components/plugins/ImageSpotlight'; 8import { Terminal } from '~/ui/components/Snippet'; 9import Video from '~/components/plugins/Video'; 10 11This page lists a few tools to help debug your Expo project. 12 13### Developer menu 14 15This 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: 16 17- Android Device: Shake the device vertically, or if your device is connected via USB, run `adb shell input keyevent 82` in your terminal 18- Android Emulator: Either press <kbd>Cmd ⌘</kbd> + <kbd>m</kbd> or <kbd>Ctrl</kbd> + <kbd>m</kbd> or run `adb shell input keyevent 82` in your terminal 19- iOS Device: Shake the device, or touch 3 fingers to the screen 20- iOS Simulator: Press <kbd>Ctrl</kbd> + <kbd>Cmd ⌘</kbd> + <kbd>z</kbd> on a Mac in the emulator to simulate the shake gesture, or press <kbd>Cmd ⌘</kbd> + <kbd>d</kbd> 21 22Once you have opened the Developer menu, it will appear as below: 23 24<ImageSpotlight 25 alt="The Expo Go Developer Menu, showing the menu options available." 26 src="/static/images/expo-go-developer-menu.png" 27 style={{ maxWidth: 320 }} 28/> 29 30The Developer menu provides multiple options: 31 32- Reload: reloads your app. Usually not necessary since Fast Refresh is enabled by default 33- Copy Link: copy the [`exp://`](/guides/linking/#linking-to-expo-go) link of your app. 34- Go Home: leave your app and navigate back to the Expo Go app's Home screen 35- Enable/Disable Fast Refresh: toggle automatic refreshing of the JS bundle whenever you make changes to files in your project using a text editor 36 37Now let's explore some of the more exciting functionalities. 38 39#### Debug Remote JS 40 41Opens 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. 42 43It uses [`@react-native-community/cli-debugger-ui`](https://github.com/react-native-community/cli/tree/main/packages/cli-debugger-ui): 44 45<ImageSpotlight 46 alt="The Expo Go Element Inspector, showing details about an element after inspecting it." 47 src="/static/images/react-native-community-cli-debugger-ui.png" 48/> 49 50> **warning** 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](#react-native-debugger) and [React DevTools](#debugging-with-react-devtools) sections below. 51 52#### Show Performance Monitor 53 54Opens up a small window giving you performance information about your app. It provides: 55 56- RAM usage of your project 57- JavaScript heap (this is an easy way to know of any memory leaks in your application) 58- 2 numbers for Views, the top indicates the number of views for the screen, the bottom indicates the number of views in the component 59- Frames Per Second for the UI and JS threads. The UI thread is used for native Android or iOS UI rendering. The JS thread is where most of your logic runs, including API calls, touch events, and so on. 60 61#### Show/Hide Element Inspector 62 63Opens up the Element Inspector overlay: 64 65<ImageSpotlight 66 alt="The Expo Go Element Inspector, showing details about an element after inspecting it" 67 src="/static/images/expo-go-element-inspector.png" 68 style={{ maxWidth: 320 }} 69/> 70 71This overlay has capabilities to: 72 731. Inspect: Inspect elements 742. Perf: Show Performance overlay 753. Network: Show network details 764. Touchables: Highlight touchable elements 77 78### React Native Debugger 79 80The React Native Debugger includes many tools listed later on this page, all bundled into one, including [React DevTools](#debugging-with-react-devtools) and network request inspection. For this reason, if you use one tool from this page, it should probably be this one. 81 82We'll give a quick look at it here, but check out their [documentation](https://github.com/jhen0409/react-native-debugger#documentation) for a more in-depth look. 83 84You can install it via the [release page](https://github.com/jhen0409/react-native-debugger/releases), or if you're on macOS you can run: 85 86<Terminal cmd={['$ brew install react-native-debugger']} /> 87 88#### Startup 89 90After firing up React Native Debugger, you'll need to specify the port (shortcuts: <kbd>Cmd ⌘</kbd> + <kbd>t</kbd> on macOS, <kbd>Ctrl</kbd> + <kbd>t</kbd> 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. 91 92In 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. 93 94If 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. 95 96<Video file="debugging/react-native-debugger.mp4" /> 97 98#### Inspecting network traffic 99 100It'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`. 101 102There are however [some limitations](https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md#limitations), so there are a few other alternatives, all of which require using a proxy: 103 104- [Charles Proxy](https://www.charlesproxy.com/documentation/configuration/browser-and-system-configuration/) (~$50 USD, our preferred tool) 105- [Proxyman](https://proxyman.io) (Free version available or $49 to $59 USD) 106- [mitmproxy](https://medium.com/@rotxed/how-to-debug-http-s-traffic-on-android-7fbe5d2a34#.hnhanhyoz) 107- [Fiddler](http://www.telerik.com/fiddler) 108 109> In bare workflow apps you can use [Flipper](https://fbflipper.com/) to inspect network traffic. 110 111### Debugging Redux 112 113[Redux](https://redux.js.org/) 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: 114 1151. Download React Native Debugger from the [releases page](https://github.com/jhen0409/react-native-debugger/releases). 1162. Open the app, press <kbd>Cmd ⌘</kbd> + <kbd>t</kbd> or <kbd>Ctrl</kbd> + <kbd>t</kbd> to open a new window, then set the port to 19000. 1173. Start your app, open the in-app developer menu, and select “Debug JS Remotely.” 1184. Configure `__REDUX_DEVTOOLS_EXTENSION__` as [shown here](https://github.com/zalmoxisus/redux-devtools-extension#11-basic-store). 119 120You'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](https://medium.com/@tetsuyahasegawa/how-to-integrate-react-native-debugger-to-your-expo-react-native-project-db1d631fad02). 121 122### Debugging with React DevTools 123 124React DevTools is a great way to get a look at each of your components' props and state. First, you'll need to run 125 126<Terminal 127 cmdCopy="npm install -g react-devtools" 128 cmd={[ 129 '# Install React DevTools with npm', 130 '$ npm install -g react-devtools', 131 '', 132 '# If you are using Expo SDK <= 37: npm install -g react-devtools@^3', 133 ]} 134/> 135 136(if you don't want to install it globally, run `npm install --dev react-devtools` to install it as a project dependency). 137 138After running `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. 139 140<Video file="debugging/react-devtools.mp4" /> 141 142React 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! 143 144### Remote debugging with Chrome Developer Tools 145 146You can debug React Native apps using the Chrome debugger tools. Rather than running your app's JavaScript on your phone, it will instead run it inside of a webworker in Chrome. You can then set breakpoints, inspect variables, execute code, etc., as you would when debugging a web app. 147 148- 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. 149 150- 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. 151 152- 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 `http://localhost:19000/debugger-ui`. From there, you can set breakpoints and interact through the JavaScript console. Shake the device and stop Chrome debugging when you're done. 153 154- 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. 155 156#### Troubleshooting localhost debugging 157 158When 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`. 159 160#### Source maps and async functions 161 162Source 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. 163 164### Debugging production apps with Sentry 165 166In 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. 167 168Expo provides a wrapper called [`sentry-expo`](/guides/using-sentry) 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. 169
