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'; 10import { Collapsible } from '~/ui/components/Collapsible'; 11 12React 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. 13 14## Debugging with Chrome DevTools 15 16As 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](#interacting-with-the-console), [Source](#pausing-on-breakpoints), and [Network](#inspecting-network-requests) tab when using [dev clients](/more/glossary-of-terms/#dev-clients). 17 18You can use the Chrome DevTools on any app using Hermes. To open it, start your app and press <kbd>j</kbd> in the terminal where Expo was started. Once you have opened the Chrome DevTools, it will appear as below: 19 20<ImageSpotlight 21 alt="The Chrome DevTools, showing one of the files under the source tab." 22 src="/static/images/debugging/inspector-source-tab.png" 23/> 24 25### Pausing on breakpoints 26 27You 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. 28 29Once 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](#interacting-with-the-console) tab as part of your app. 30 31<ImageSpotlight 32 alt="The Chrome DevTools, showing one of the files under the source tab." 33 src="/static/images/debugging/inspector-breakpoint.png" 34/> 35 36> **warning** 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 a `debugger` statement instead of a breakpoint. 37 38### Pausing on exceptions 39 40If 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. 41 42<ImageSpotlight 43 alt="Enable Pause on exceptions in the right panel of the sources tab" 44 src="/static/images/debugging/inspector-pause-exception.png" 45 style={{ maxWidth: 320 }} 46/> 47 48> **info** 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. 49 50### Interacting with the console 51 52The 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 was part of your app. The code is executed in the global scope by default. But, when using breakpoints from the [Source](#pausing-on-breakpoints) tab, it executes in the scope of the reached breakpoint. This allows you to invoke methods and access variables throughout your app. 53 54<ImageSpotlight 55 alt="Use the console with breakpoints to inspect variables and invoke code throught your app" 56 src="/static/images/debugging/inspector-breakpoint-console.png" 57/> 58 59### Inspecting network requests 60 61The **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. 62 63> **warning** This feature is only available from Expo SDK 49 and higher. 64 65<ImageSpotlight 66 alt="Gain insights in the network requests from your app" 67 src="/static/images/debugging/inspector-network-post.png" 68/> 69 70> **info** See the [Inspecting network traffic](#inspecting-network-traffic) for alternative ways to inspect network requests. 71 72## Debugging with VS Code 73 74> **warning** This feature is only available from Expo SDK 49 and higher. 75 76VS 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. 77 78You can use this debugger with the [Expo Tools](https://github.com/expo/vscode-expo#readme) VS Code extension. This debugger allows you to set breakpoints, inspect variables, and execute code through the debug console. 79 80<ImageSpotlight 81 alt="Debug your code while you write it" 82 src="/static/images/debugging/vscode-expo.png" 83/> 84 85To start debugging: 86 87- Connect your app 88- Open VS Code command palette (based on your computer, it's either <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd> or <kbd>Cmd ⌘</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd>) 89- Run the **Expo: Debug ...** VS Code command. 90 91This will attach VS Code to your running app. 92 93## Debugging with React DevTools 94 95React DevTools is a great way to look at your components' props and state. You can open it by pressing <kbd>Shift</kbd> + <kbd>m</kbd> in the terminal where Expo was started. Once it's open, it will appear as below: 96 97<ImageSpotlight 98 alt="Inspect your components using the React DevTools" 99 src="/static/images/debugging/react-devtools.png" 100/> 101 102React DevTools can also be paired with the [element inspector](#showhide-element-inspector), allowing you to inspect props, state, and instance properties by tapping components inside your app. 103 104## Developer menu 105 106This 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 <kbd>m</kbd> in the terminal where Expo was started. 107 108<Collapsible summary="Or use any of the alternative options"> 109 110- Android device (without USB): Shake the device vertically. 111- Android Emulator or device (with USB): 112 113 - Press <kbd>Cmd ⌘</kbd> + <kbd>m</kbd> or <kbd>Ctrl</kbd> + <kbd>m</kbd> 114 - Run `adb shell input keyevent 82` 115 116- iOS device (without USB): 117 - Shake the device. 118 - Touch 3 fingers to the screen. 119- iOS Simulator or device (with USB): 120 - Press <kbd>Ctrl</kbd> + <kbd>Cmd ⌘</kbd> + <kbd>z</kbd> or <kbd>Cmd ⌘</kbd> + <kbd>d</kbd> 121 122</Collapsible> 123 124Once you have opened the Developer menu, it will appear as below: 125 126<ImageSpotlight 127 alt="The Expo Go Developer Menu, showing the menu options available." 128 src="/static/images/debugging/expo-go-developer-menu.png" 129 style={{ maxWidth: 320 }} 130/> 131 132The Developer menu provides multiple options: 133 134- Reload: reloads your app. Usually not necessary since Fast Refresh is enabled by default 135- Copy Link: copy the [`exp://`](/guides/linking/#linking-to-expo-go) link of your app. 136- Go Home: leave your app and navigate back to the Expo Go app's Home screen 137- Enable/Disable Fast Refresh: toggle automatic refreshing of the JS bundle whenever you make changes to files in your project using a text editor 138 139Now let's explore some of the more exciting functionalities. 140 141### Debug Remote JS 142 143> **warning** Debug remote JS does not support apps using Hermes, see the [Chrome DevTools](#debugging-with-chrome-devtools) section. 144 145Opens 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. 146 147It uses [`@react-native-community/cli-debugger-ui`](https://github.com/react-native-community/cli/tree/main/packages/cli-debugger-ui): 148 149<ImageSpotlight 150 alt="The Expo Go Element Inspector, showing details about an element after inspecting it." 151 src="/static/images/debugging/react-native-community-cli-debugger-ui.png" 152/> 153 154> **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 section below. 155 156### Show Performance Monitor 157 158Opens up a small window giving you performance information about your app. It provides: 159 160- RAM usage of your project 161- JavaScript heap (this is an easy way to know of any memory leaks in your application) 162- 2 numbers for Views, the top indicates the number of views for the screen, the bottom indicates the number of views in the component 163- 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. 164 165### Show/Hide Element Inspector 166 167Opens up the Element Inspector overlay: 168 169<ImageSpotlight 170 alt="The Expo Go Element Inspector, showing details about an element after inspecting it" 171 src="/static/images/debugging/expo-go-element-inspector.png" 172 style={{ maxWidth: 320 }} 173/> 174 175This overlay has capabilities to: 176 1771. Inspect: Inspect elements 1782. Perf: Show Performance overlay 1793. Network: Show network details 1804. Touchables: Highlight touchable elements 181 182## React Native Debugger 183 184> **warning** The React Native Debugger does not support apps using Hermes, see the [Chrome DevTools](#debugging-with-chrome-devtools) section. 185 186The 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. 187 188We'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. 189 190You can install it via the [release page](https://github.com/jhen0409/react-native-debugger/releases), or if you're on macOS you can run: 191 192<Terminal cmd={['$ brew install react-native-debugger']} /> 193 194### Startup 195 196After 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 `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. 197 198In 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. 199 200If 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. 201 202<Video file="debugging/react-native-debugger.mp4" /> 203 204### Inspecting network traffic 205 206It'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`. 207 208There 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: 209 210- [Charles Proxy](https://www.charlesproxy.com/documentation/configuration/browser-and-system-configuration/) (~$50 USD, our preferred tool) 211- [Proxyman](https://proxyman.io) (Free version available or $49 to $59 USD) 212- [mitmproxy](https://medium.com/@rotxed/how-to-debug-http-s-traffic-on-android-7fbe5d2a34#.hnhanhyoz) 213- [Fiddler](http://www.telerik.com/fiddler) 214 215## Debugging production apps with Sentry 216 217In 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. 218 219Expo 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. 220
