React Native Debugger: How to easily and swiftly debug your app

Issues arise whether you’re developing your app locally, sending it to beta testers, or launching it in app stores. Luckily, with React Native, you can choose from a large number of tools to debug. In this article, we’re going to use our fav one for this task: React Native Debugger. And with all its features and ease of use, you’ll understand our choice.

Before we get started, here’s a little piece of advice: when you’re working to identify and solve your errors, dividing them into two categories can be helpful. Those categories are “errors you encounter in development” and “errors you or your users encounter in production”. Ready to go?

Debugging is about detecting problems in your app, so it’s a key element in the development process. The more you understand the debugging techniques, the less time you’ll spend developing and fixing issues in your process.

As we said before, React Native has multiple tools to enable debugging. But our favorite one is React Native Debugger. This one mixes many useful features in just one single standalone app. It takes less than 5′ to install and set it. You can install it relying on the release page, but if you’re using macOS, you can run this:

→ brew install --cask react-native-debugger

Now it’s time to run your React Native project, open the Developer Menu and choose Debug remote JS. Et voilà! The debugger should be happily automatically connected.

But wait, it’s not a happy ending yet. Before we jump into its features, we have some tips that will enhance your debugging abilities. Try right-clicking anywhere in React Native Debugger. See? You have helpful shortcuts to enable or disable the element inspector, and network inspector, reload your JS, and even log and clear your AsyncStorage content. Plus, in the debugger console, you can check out the props, state, Element tree, and children of the element you want—and select, of course. If you’re using the Chrome console on the right, try typing $r, it’s better than magic; it’s the breakdown of the element you’ve chosen. 

Let’s check out some of the most helpful features that React Native Debugger comes with, what they do and how to start using them.

UI Inspector

Maybe the “inspector” element sounds familiar. In our chosen React Native Debugger it works quite the same way. This feature shows you all the tags used in your app and inspects their styling. Plus, you can also use it to test your UI and modify the styling from it, if you need to.

It’s really helpful and efficient to check out and debug the UI hierarchy in your React Native projects. It can even help you accelerate UI testing and the entire process of creating UI successfully.

Debug Redux

Redux is a popular state management library that can help you manage and centralize your shared app state. This leading library needs debugging too. With React Native Debugger, you can debug your Redux-based app. Want more? You can debug real-time state and use Redux time travel to debug your state over time. This last use is really helpful, if you’re working on large projects.

Network inspector

Fetching data from the cloud or a server is just one of the reasons why you might need to connect your app to the internet or a network. And, you might find that you have to monitor a request, for instance, when you make an API call, and you want to check if the API parameters are OK or even verify the response from the server.

Using React Native Debugger to debug a request is pretty simple. Just stand in the React Native Debugger and right-click anywhere. Then you have to select Enable Network Inspect. This allows you to inspect requests of fetch and XMLHttpRequest.

AsyncStorage management

We talked about AsyncStorage a few days ago; here’s the article in case you’ve missed it [link al artículo que escribimos]. React Native Debugger comes with built-in AsyncStorage support. To print, clear, or log your AsyncStorage in the console, you just have to use this command:

console.log(showAsyncStorageContentInDev())

After that, all your AsyncStorage data will be printed or reported in the terminal on React Native Debugger.

Breakpoints

Breakpoints are powerful: they can help you fully understand app’s behavior and easily spot issues. Using breakpoints in React Native comes handy when you’re looking for a solution to stop your code execution at a specified time. If that’s not a sound reason to convince you of its possibilities, you can also check out the code execution flow and even verify a variable’s value.

You’ll also have access to sources of information that can be insightful. Threads and Call Stack With Threads, you can help you visualize the callstack of a thread in which the breakpoint is executed. This last feature is commonly used for larger codebases.

React Native Debugger is an easy-to-use tool, really powerful and fast. Are you ready to incorporate it into your development process? If you’re looking for more information on React Native and other tech news, don’t miss our blog.