Debug React Native applications with ease
A quick drive to know debugging techniques precisely
Let’s say your team has developed an amazing application and is ready to release it. You are celebrating with your colleagues with a cup of coffee when the QA warns you of a critical glitch/bug in your application. I can feel your comfort leaving you and your Code Editor fading back into focus.
It is an unarticulated fact that developers love to create new functionality more than debugging. It has always been one of the most crucial events for software development. Here, we will discuss the ways to debug a React Native application.
“Debugging is like being the detective 🕵🏻 in a crime movie where you are also the murderer.” — Filipe Fortes
The different ways covered in this article are:
- Consoles
- Inspect Elements
- Debugging using VS Code
- Reactotron
- React Native Debugger
- Flipper
1. Consoles
So far, the most convenient way to troubleshoot an issue is to backtrace data utilizing consoles throughout the execution cycle. This is one of the most effective options if your problem involves some modest data manipulation and you are unsure of how a certain operation will turn out.
Consoles are mainly used to print values in the console tab of the Terminal/Debugger. It returns a direct output of the element written in the console. Let’s have a look at the list of options that the console offers you.
You can also look at all the operations available for the console by executing console.log(console).
2. Inspect Elements
This option makes debugging interactive.
Inspect Elements can be triggered using the developer menu on Android and iOS, and it can be considered a go-to option to debug UI elements.
Inspect: It provides a selection-based tool that displays the props and style objects applied to the selected element. You can look at the dimensions, CSS, margin, padding, font size, font family, etc.
Network: It provides you with the network call details like type, method, URL, requestHeaders, responseContentType, responseSize, responseHeaders, status, timeout, response, responseURL, etc.
Touchables: It highlights all the touchable elements on the screen.
3. Debugging using VS Code
React Native Developers spend most of their time in VS Code, and switching between debugger and code is burdensome. Let me make this easier for you by introducing you to a more convenient way.
VS Code inherently doesn’t support debugging in React Native. Just go to the Extensions tab and install “React Native Tools”. In the Run & Debug Tab, select “Create a launch.json file”. Then, add configuration for your Android and iOS apps, and you’re good to go.
Here, you can debug line-by-line code using breakpoints similar to the Chrome debugger or Android Studio/Xcode native debugging.
You can find the detailed article at: https://blog.logrocket.com/debugging-react-native-vs-code/
4. Reactotron
Reactotron: The name may sound like Optimus Prime’s teammate in the film Transformers, but it is a React Native debugging tool. It is neither a Chrome debugger replacement nor a debugging tool, but it does provide you with information about what is going on in your application. It can detect the error and show you the visual steps that led to it.
It is one of the most effective tools for tracking API calls and responses. When your app interacts with an API, you can get a complete visual representation of the Response, Response Headers, Request Params, and Requested Headers.
Reactotron supports plugins; hence, by defining the plugins of State Management and Redux, you can get updates regarding value updates in the store, actions performed, etc.
5. React Native Debugger
The React Native Debugger is arguably the best debugger to use if your React Native project uses Redux. It combines Redux’s DevTools and React’s Developer Tools into a single app, eliminating the need to work with two distinct apps for debugging.
The Action Panel: The Action Window is on the left side of the screen. It shows all the Redux Action operations in your application and the time stamp registered when the action was finished.
The Store Panel: The values stored in the Redux Store are preserved in this panel. It provides a visual representation of the store’s data along with real-time updates when the actions are being carried out. Additionally, you may look at the variation between the prior and present values.
The React Native Debugger features a built-in Chrome Debugger and React DevTools Support.
The React Native debugger is possibly the greatest alternative for users who prefer Debug mode and have Redux in their applications.
6. Flipper
It is an open-source debugging tool developed by Facebook to debug iOS and Android React Native apps. It was introduced with default integration with the launch of React Native 0.62 and has evolved over time and is now a trusted, stable React Native Debugging Tool.
Flipper uses remote debugging, which lets the app run in an environment as close to production as possible. It gives confidence when debugging apps in comparison to direct debugging. Additionally, since Flipper connects directly to your React Native application, you do not need to switch to Debug mode.
The major benefit of Flipper, which sets it apart from other debugging tools, is the plugin library that enables you to expand its functionality by installing plugins straight from the Flipper interface. You can also create and distribute your own plugins. The Plugins icon, located beneath the Device icon on the left sidebar, can be used to manage plugins.
Pro Tip: Flipper can be considered a fusion of all the methods listed above; it performs all those operations in a more efficient and effective manner.
Here’s all the information about Flipper and how to debug React Native with Flipper.
Parting Words
There are many different approaches to debugging a React Native application. However, each approach has an edge where it excels; we simply need to understand where to apply the appropriate one to get the desired results.
Keep experimenting and sharing your experience with us!
Happy coding!
