Akshay Rana I'm a self-taught, full-time programmer. I have experience working with various technologies including React, React Native, WordPress, Node.js, Express.js, Raspberry Pi, Python, REST APIs, and GraphQL. I love to explore new technologies and update my skills.

Debugging your app with React Native Debugger

2 min read 731

React Native Logo

In this tutorial, we’ll show you how to use React Native Debugger to — you guessed it — debug React Native apps.

You might be wondering, why not use the default React Native debug tool? What makes React Native Debugger unique? Read on to learn the answers to these questions and see how React Native Debugger works.

Installing React Native Debugger

To start debugging, we need to install React Native Debugger. You can install React Native Debugger from GitHub. Or, if you’re on macOS, you can run this command in your terminal:

brew update && brew install --cask react-native-debugger

After downloading and installing the package, you can start using React Native Debugger.

Let’s launch the debugger tool. You can see that React Native Debugger is in waiting state and the debugger tool is listening at port 8081:

Debugger Tool

Connecting a React Native app to React Native Debugger

To connect your app with React Native Debugger, you need to run your app and start debug mode.

To start debug mode, shake your mobile device or press Command + Shift + Z or Ctrl + M and choose the debug option.

Now you’ll see that your app is connected with the React Native Debugger tool:

React Native Debugger Tool

We made a custom demo for .
No really. Click here to check it out.

We’re all set to begin using React Native Debugger.

Features of React Native Debugger

What sets React Native Debugger apart is that it combines a wide range of features into a single standalone app. Some of the coolest features include:

Let’s zoom in on each feature in more detail.

UI Inspector

If you’re a web developer, you should be familiar with the element inspector. In React Native Debugger, the UI Inspector works the same way: you can see all the tags you use in your app and check the styling. Even more amazing, you can test your UI and change styling from the inspector.

Debugging UI React Native

This makes your UI testing much faster and accelerates the process of building your UI accordingly.

Debugging Redux in React Native

Whether you’re working on a React or React Native app, you’ll eventually need a state management library. Redux is one of the leading state management libraries available.

That said, using Redux can be a pain if you can’t debug your state, especially in React Native. React Native Debugger enables you to easily debug your Redux-based app. You can even debug real time state.

Debugging Redux App

You can use Redux time travel to debug your state over the time. This technique is especially helpful when working on big projects.

To use the Redux dev tool, you need to activate Redux in your app. To do this, you need to add the following code to your App.js. Or, you can add it to main function of Redux.

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
const store = createStore(reducers, /* preloadedState, */ composeEnhancers(middlewares));

Network inspector

Today, it’s very common for an app to fetch data from the cloud or a server. To perform such a task, we need to connect to the internet or a network.

You may encounter the need to monitor a request. For example, when making an API call, you may need to check whether you’re sending the right API parameters. Or you might want to verify the response from the server.

To debug a request, we can use the network inspector feature in React Native Debugger. Click the Network tab, as shown below:

Network tab React Native Debugger

After opening the network inspector, if you make a network request, you can see all the request and their responses in this tab.

AsyncStorage management in React Native

If you want to print or log your AsyncStorage in the console, you can do so easily with the following command:

console.log(showAsyncStorageContentInDev())

This will print or log the AsyncStorage data in the console on React Native Debugger.

Asyncstoage

Using breakpoints in React Native

Breakpoints can be very helpful when you need to stop your code execution at a certain time.

Breakpoints

You can also check the code execution flow and see a variable’s value. Put simply, breakpoints help you understand your app’s behavior and spot errors within seconds.

Conclusion

In this tutorial, we covered how to use React Native Debugger to debug React Native apps. We also reviewed some of React Native Debugger’s most important features designed to help accelerate and streamline the development process.

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Akshay Rana I'm a self-taught, full-time programmer. I have experience working with various technologies including React, React Native, WordPress, Node.js, Express.js, Raspberry Pi, Python, REST APIs, and GraphQL. I love to explore new technologies and update my skills.

One Reply to “Debugging your app with React Native Debugger”

Leave a Reply