How To Debug React Native Debugger

React Native Debugger is a powerful tool that helps developers debug React Native applications more quickly. It provides a suite of impressive features, such as UI inspector, redux inspector, breakpoints and networking inspector. In this article, we are going to learn how to install and use the React Native Debugger, which will boost your development productivity by an order of magnitude. In layman’s terms, a Debugger is a tool used for debugging. If you are a developer of any programming background, you must have already come across a debugger in your life. React Native Debugger is a standalone debugger tool built using the Electron framework. You can easily integrate this debugger tool along with the Chrome Dev tool. This debugger tool is based on the remote debugger which is included in React Native out of the box. However, the React Native debugger packs a lot more features than the remote one. Installing React Native Debugger The installation process is quite easy. We can simply download the latest installation file from the . For macOS, we can use Homebrew Cask to install. We can run the following command in the terminal: release page brew update && brew cask install react-native- debugger After installation, simply open the file in your Applications folder (or use Spotlight search to locate it). React Native Debugger.app Using The React Native Debugger After a successful installation, we can simply open the React Native Debugger launch file. Hence, we will see the re-connection status on the title bar of the debugger app window. The debugging process will be executed on port 8081 as shown in the screenshot below: Now when we run the React Native App on debug mode, we no longer need to open the browser. To have your React Native app enter debug mode, simply shake your device and choose “Debug” in the menu that pops up. If you are on a simulator, simply press to open the menu. Command + Shift + Z Once the app is in the debug mode, with the React Native Debugger already opened, you will notice that the app connects to the React Native Debugger instead of the Chrome Dev Tools. All the console logs and debugging options will appear in the debugger app as shown in the screenshot below: Now, as we have learned about the installation and use cases, we are ready to use this Debugger app. Chrome Dev Tools, React Dev Tools, Redux Dev tools As you can notice, all these above important debugging extensions are under a single window. One benefit is that the app window size does not need to be full screen. Hence, we can use the debugger adjacently with the emulator as shown in the screenshot below: The Network Inspector When developing an app that needs to connect to a server, in general, we may not know what is going on behind the scenes. For example, when we are sending a request to the server, it may be difficult to track an error if it occurs. Developers usually debug this by printing or alerting error messages, but this is extremely time-consuming (despite the fact that most people do that), since it takes a lot of iterations to understand the entire state properly. So, with the help of the React Native Debugger, we can easily monitor every inbound and outbound traffic request between app and server. We can monitor React components, Redux store, also network activity all under a single window.We can modify CORS on the fly.We can modify the request header configurations such as names, origin, and user-agent. It enables us to control everything in a network request. AsyncStorage Management We can also debug AsyncStorage configurations using the React Native Debugger. We can simply log it to the console using the line in the code snippet below: .log(showAsyncStorageContentInDev()) console Once you add that line to your project, you will get the following result in the React Native Debugger console window: Debugging Redux State & Actions As mentioned in the official React Native Debugger documentation, the tool already has an amazingly powerful built-in Redux Dev Tool. However, redux devtools will not work properly until we explicitly activate in our app. In order to use redux devtools in the react-native-debugger, we need to activate redux in our app by adding some configuration lines to our file or to our redux main function as highlighted in the code snippet below: redux devtools App.js composeEnhancers = .__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; store = createStore(reducers, composeEnhancers(middlewares)); const window const /* preloadedState, */ Now if we reload our RN Debugger tool and run some actions, we will get the following result in our debugger console: As you can see, the React Native Debugger exposes the whole Redux state, so there’s no need for you to add breakpoints or console logs to understand how the data flows within the redux ecosystem. One amazing feature is that you can actually go back in time directly from the debugger, to reverse the Redux actions and re-run them again. Another huge feature is that you can visualize the precise diff between two state transitions, which is extremely helpful for apps with complex Redux states. UI Inspector in React Native Debugger The React Native Debugger tool also offers a powerful UI Inspector. We can use it to inspect app UI layouts that will help us tremendously in understanding the app’s UI structure. We can fix the UI elements style just by inspecting the layout. This is by far the most efficient way to inspect the UI hierarchy in React Native apps and to debug layout issues. Breakpoints in React Native Debugger React Native Debugger also enables us to stop the execution task on a certain point. This will enable developers to understand app behavior or view some data states at any point in the app’s lifecycle. You can learn more details on adding and using breakpoints in our article. Debugging React Native app with Breakpoints Debugging Expo Apps If you opted to use Expo CLI instead of React Native CLI for your app development, the good news is that the React Native Debugger works great with Expo too. Usually, the Expo Debugger runs on port 19001. To switch to React Native Debugger for support, you need to run the following command: open "rndebugger://set-debugger-loc?host=localhost&port=19001" Conclusion In this article post, we discovered the React Native Debugger tool, its installation process, how it works, use-cases, and core features. Surely, it will make the life of any React Native developer easier, more productive, and more efficient. Your apps will also be more performant and will contain fewer bugs. We highly recommend using the React Native Debugger instead of the Chrome Dev Tools, since it contains a set of core features that will boost your development speed tremendously. Next Steps Now that you have learned about the React Native Debugger tool, here are some other topics you can look into next: Firebase — Push notifications | Firebase storage How To in React Native — Getting Stared | WebView | Gradient | Camera | Adding GIF | Google Maps | Redux | Debugging | Hooks | Dark mode | Deep-link | GraphQL | AsyncStorage | Offline | Chart | Walkthrough | Geolocation | Tinder swipe | App icon | REST API Payments — Apple Pay | Stripe Authentication — Google Login | Facebook login | Phone Auth Best Resource – App idea | Podcasts | Newsletters | App templates | Tools If you need a base to start your next React Native app, you can save months of development by leveraging one of our React Native themes . Cheers! Previously published at https://www.instamobile.io/mobile-tools/react-native-debugger/