Debugging React Native Apps

“Debugging: the process of finding out what your code was supposed to do, instead of what it actually did.” — Anonymous

Debugging is an essential part of the software development process, and this is especially true for React Native applications. React Native allows developers to build native mobile applications using JavaScript and the React framework, but as with any application, things can go wrong. Whether it’s a syntax error, a runtime exception, or a performance issue, being able to debug our React Native application is crucial for identifying and fixing problems.

source: tenor.com

In this article, we’ll explore some of the tools and techniques that one can use to debug React Native applications, as well as some best practices for effective debugging.

Debugging tools can help us in several ways during the software development process:

1. Identifying the root cause of issues: Debugging tools allow us to inspect the state of our application, set breakpoints, and analyze the call stack, which can help us with RCA of runtime exceptions or performance problems.
2. Finding and fixing errors in our code: They help in analyzing our code in detail, which can help us find and fix logical errors.
3. Understanding how different parts of our application are interacting: Inspecting the state of our app and tracking the flow of execution can help us understand how different parts of our app are interacting with each other.
4. Improving the performance and reliability of our application: By using debugging tools to identify and fix issues, we can improve the performance and reliability of our application, which is especially important in the production environment.

Overall, debugging tools are an essential part of the software development process and can greatly improve the quality and stability of our apps.

Debugging with VS Code

One of the benefits of using the Visual Studio Code debugger is that it allows us to debug our code directly in the editor, without having to switch between multiple tools or environments. This can make it easier to identify and fix bugs and save us time in the development process.

To enable debugging in VS code, a few simple steps need to be followed:

• Install React Native Tools extension in VS code
• Create a launch.json file inside the .vscode directory of the workspace as shown :

• Next, add the below code in the launch.json file and specify configurations:

{
    "version": "0.2.0",
    "configurations": []
}

• Each object in the configurations array defines a debugging configuration. So to create a configuration object, click on the Add configuration blue button at the bottom right corner and select React Native from the dropdown. Then, go on selecting the debug configuration (debug/attach), type of application (direct mode/classic), address of the local host, and port number as shown below:

1. Debug Application: This mode allows us to start the debugging process from VS Code by starting the RN application and attaching the debugger to it.
2. Attach to Application: If we use this mode, we can attach the VS Code debugger to an already-running React Native app.
3. Classic Application: This mode is for debugging older React Native apps that use the classic architecture where we get a standalone debugger with a wide range of features.
4. Application in Direct Mode: If we prefer a direct connection to the RN application, or if we don’t need all of the features of the standalone debugger, we can use this mode. It allows debugging React Native apps that use the Hermes engine. Debugging with Hermes enabled is currently experimental, in case of any issues please see this.

1. Once we have set up the debug configuration and the React Native packager is running, we can set breakpoints by clicking on the gutter of the line number where breakpoints are needed. This will cause the execution to pause when it reaches that line, allowing us to inspect variables and step through the code.
2. Press the “Run” button or press “F5” to start debugging. This will start the execution of the program and it will stop at the breakpoints we have set.
3. Once the breakpoint is hit, we can inspect variables, and step over, in, and out of functions using the debug actions. We can also use the call stack to navigate between different call stacks and understand the flow of the program.
4. Once we are done with debugging, we can press the “stop” button to stop debugging and continue running the app normally.
5. We can also use the console.log to print variables and evaluate expressions in the debugging context. We can use the debugging console that VS Code opens to see the output. This can be useful for understanding the state of our app at different points of execution.

Debugging with Flipper

There are quite a few tools out there for debugging React Native apps, but if we want a comprehensive and efficient solution, Flipper is a clear choice. With its advanced debugging capabilities, such as device-level debugging, performance profiling, and network inspection, we can quickly identify and fix issues in our apps. Additionally, its customizability allows us to tailor the tool to our workflows and extend its functionality to suit our specific needs.

Apart from some basic plugins like Database, Layout, Network, Logs, and Crashes, Flipper offers a variety of plugins to debug our apps.

React navigation

React navigation plugin allows us to view and inspect the navigation state of our React Native app. It provides a visual representation of the navigation stack and the routes that are currently active, as well as information about the props and state of each screen.

With this plugin, we can quickly identify issues with navigation, such as missing routes or incorrect props, and quickly make the necessary changes. To know how to install the plugin, read this.

React Navigation plugin in Flipper

Redux Debugger

This plugin allows us to monitor and inspect the state of the Redux stores in our app. It provides a clear picture of the store’s state, including its current state, actions, and the changes that have been made to the state over time. With this plugin, we can easily identify any issues with the store’s state, such as unexpected state changes or missing actions, and make the necessary adjustments. One great thing about this plugin is that it allows us to test and debug different scenarios, such as dispatching actions or updating the store’s state. Follow this to install the plugin.

Redux Debugger plugin in Flipper

Performance Profiler

The Performance Profiler plugin is a powerful tool that profiles the performance of the app and identifies areas that need optimization. It lets us monitor the app’s performance over time and detect trends or patterns that may indicate performance issues and provides detailed performance metrics such as FPS, CPU, and memory usage. For more details, read here.

Performance Profiler plugin in Flipper

NOTE: There are multiple other performance plugins available in flipper, you can read on them here.

React DevTools

This plugin helps us inspect the state and props of components in a React Native app. It provides a detailed view of the component hierarchy, including the component type, props, and state. It also allows us to record profiling data and analyze the rendering of components with the help of flame graphs and ranked charts.

The React DevTools plugin is a default plugin for flipper and can be easily enabled in its settings.

React DevTools plugin in Flipper

Images

The Images plugin displays all the images that have been fetched by our app, along with information about where they are stored. The plugin groups the images based on their visibility on the screen and the cache layer where they are stored. Using the plugin, we can view the dimensions and size of the images and selectively clear the image cache.

Images plugin in Flipper

Debugging in React Native can be a challenging task, but with the right tools, it can become much more manageable.

From the built-in browser developer tools to third-party options like Flipper, there are plenty of resources available to help developers quickly identify and fix issues. By understanding the strengths and limitations of each tool, we can choose the best options to suit our needs and streamline the debugging process.

Keep on coding, and happy debugging!