React Native Debugger:

Issues arise whether you’re developing your app locally, sending it to beta testers, or launching it in app stores, especially when working across environments typical of Cross-Platform App Development Services. 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 earlier, React Native provides multiple tools for debugging. But our favorite one is React Native Debugger. This one combines many useful features into a single standalone app. It takes less than 5 minutes 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, 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 use it to test your UI and modify its styling 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 reason 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 fetch and XMLHttpRequest requests.

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 an app’s behavior and easily spot issues. Using breakpoints in React Native is handy when you want to stop 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 insightful sources of information. Threads and Call Stack. With Threads, you can help visualize the call stack 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, and when combined with practices like deploying updates to React Native apps with CodePush, it helps teams iterate and fix issues even faster in real-world environments. If you’re looking for more information on React Native and other tech news, don’t miss our blog.