Debugging React Native Apps: Tools and Techniques

As an application grows in size, developers often find themselves tracking down and fixing pesky bugs. This process can be made significantly less cumbersome by utilizing different programs (called debuggers) and methodologies. These bugs are not always the result of poorly implemented code; they can arise due to the inherent complexity of the tasks at hand.

React offers a range of features and options to facilitate the debugging process, making it straightforward and simple. In this article, we will explore the tools and techniques for debugging React Native apps, helping developers effectively debug applications.

What is Debugging?

Debugging, at its core, is the art of pinpointing and correcting flaws in code, a fundamental aspect of software development. It involves the use of debugging tools and methods. By following proper methods and employing the right tools, you can save time and reduce effort.

Bugs are inevitable, especially as an app grows in size; you're likely to encounter them. For React Native developers, there are multiple methods and tools available to help address these bugs.  Now, let's explore the tools and methods used by React Native developers.

React Native Debugging Tools & Methods

React Native comes equipped with an in-app debugging tool, which includes a variety of debugging options to help developers tackle bugs and resolve issues. You can enable different methods or options through the React Native Dev Menu.

You can access it by either shaking your device or using keyboard shortcuts:

• iOS Simulator: Cmd ⌘ + D (or Device > Shake)
• Android emulators: Cmd ⌘ + M (macOS) 
• Ctrl + M (Windows and Linux)

Alternatively, for Android devices and emulators, you can run adb shell input keyevent 82 in your terminal.

As you can see, React Native provides debugger and React DevTools to streamline and enhance the debugging process.

Additionally, it includes features including Reload and Show Inspector to make it easier further.

1. Reload: For developer convenience, React Native includes a "Reload" feature to provide immediate, near-instant feedback when making changes to components. It is helpful in quickly identifying and resolving bugs. While it's typically enabled by default, you have the option to toggle it on or off by using the "Enable Fast Refresh" setting.
2. Show Inspector:  A popup will appear, and you can tap on any part of the UI to get info about it. 
3. Open Debugger: When you click on "Open Debugger," it will launch Chrome Developer Tools, opening a new tab at http://localhost:8081/debugger-ui.
4. React DevTools:  It is a standalone tool for debugging non-browser-based React applications.

1. LogBox

React shipped LogBox with version 0.63 to handle errors and warnings. It is a modified version of the initial RedBox and YellowBox, with more concise, well-formatted, and actionable logging output.

The Red LogBox displays errors in three sections:

• Source: This section shows the file and line number where the error occurred.
• Component Stack: This section shows the hierarchy of components that led to the error.
• Call Stack: This section shows the chain of function calls that led to the error.

Yellow LogBox displays warnings in two sections:

• Source: This section shows the file and line number where the warning occurred.
• Call Stack: This section shows the chain of function calls that led to the warning.

You can enable LogBox by importing React Native.

require('react-native').unstable_enableLogBox();

LogBox Functions:

LogBox addresses concerns about errors and warnings being overly verbose, poorly formatted, or lacking actionable information. It shows warnings and errors as notifications. When you tap the notification, you can view the full-screen information about the log.

Code snippet to display warning and error manually:

console.warn(‘this is my warning’)
console.error(‘this is my error)

You can also hide these notifications when giving product demos by using LogBox.ignoreAllLogs()

import {LogBox} from 'react-native';

// Ignore log notification by message:

LogBox.ignoreLogs(['Warning: ...']);

//Ignore all log notifications:

LogBox.ignoreAllLogs();

1. For unhandled JavaScript errors, a full-screen LogBox will open. This means that unhandled JavaScript errors should always be addressed. However, you can minimize and dismiss the LogBox.
2. If there is a syntax error, the LogBox will open with the stack trace and location of the syntax error. This error cannot be dismissed, meaning it must be addressed.

2. Chrome DevTools

Within the React Native Dev Menu, you can open the debugger, which typically takes you to http://localhost:8081/debugger-ui.

Chrome DevTools is a popular way for debugging web applications, including React Native apps. Chrome DevTools offers a range of features, including the capacity to establish breakpoints, inspect elements, and monitor network requests. With Chrome DevTools, you can examine the component hierarchy, establish breakpoints, and step through your code line by line.

Here are some of the actions you can perform with Chrome DevTools when debugging React Native apps:

• Inspect the component hierarchy and see how your components are nested.
• Set breakpoints on specific lines of code and step through your code line by line.
• Examine the props and state of your components.
• Log messages to the console.
• Modify the DOM and CSS of your app.
• Chrome DevTools is a powerful tool for debugging React Native apps. By learning how to use it, you can save yourself a lot of time and frustration when tracking down bugs.

3. Safari Developer Tools

For React Native iOS apps, you can also use Safari to debug your iOS version of React Native application and use workflows like setting breakpoints, inspecting variables, etc.

• On your physical iOS device, navigate to the Settings app.
• Scroll down and tap on "Safari."
• Under the "Advanced" section, ensure that "Web Inspector" is switched on. (Please note: This step is not required when using the Simulator.)

On your Mac, let's get Safari all set up for debugging:

• Open Safari and click on "Preferences."
• Navigate to the "Advanced" tab.
• Here, check the box that says "Show Develop menu in menu bar."

Now you can debug your app.

• Go back to Safari and look for the new "Develop" menu in the menu bar.
• Click on "Develop," and you'll see a list of devices, including the Simulator and your connected iOS devices.
• Choose the one you want to debug, and you'll be presented with the option to select a specific JSContext.

To debug React Native JavaScript code in Safari, you need to enable inline sourcemap, as the JSC debugger in Safari does not use the network stack. Enabling inline sourcemap makes it easier to debug JavaScript code. Once you enable it, Safari can recognize the sourcemaps and open the source files.

This can be done by adding a single line to your AppDelegate.m file:

[NSURL URLWithString:[[[[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil] absoluteString] stringByAppendingString:@"&inlineSourceMap=true" ]];

4. React Developer Tools

The React Native Debugger is a standalone debugger for React Native apps. It offers several features that are not found in Chrome DevTools, including the capability to debug asynchronous code and inspect the state of React components. You can integrate with Chrome DevTools, and You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

To begin the debugging process with React Developers Tools, you must install React Native Debugger first.

You can do so by installing it from GitHub. Alternatively, if you are using macOS, you can execute this command in your terminal:

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

Once you've downloaded and installed the package, you can start using it. To use it, run your app and activate the debug mode by either shaking your mobile device

Or

 pressing Command + Shift + Z (macOS) 

or 

Ctrl + M (Windows) 

and selecting the debug option. For developers’ ease, it includes UI Inspector, Debug Redux, Network Inspector, AsyncStorage management, Breakpoints, and more.

5. Reactotron

Reactotron is an open-source application for debugging React Native applications. It features a rich interface for debugging your app, which includes the ability to inspect Redux or MobX-State-Tree application state, view custom logs, run custom commands such as resetting state, store and restore state snapshots, and other helpful debugging features for React Native apps.

Additionally, you can install it on Expo. Kindly refer to this article detailing how to install it. 

Debugging React Native Apps on iOS and Android 

There are a few things to keep in mind when debugging React Native apps on iOS and Android:

• To debug a React Native app on iOS, you will need to use Xcode. Xcode is the integrated development environment (IDE) for iOS development. For more details, refer to the Debug guide from Apple.
• To debug a React Native app on Android, you will need to use Android Studio. Android Studio is the IDE for Android development. For more details, refer to the Android debug guide from Google.

Debug React Native on Physical Devices

To debug your React Native app on Android, you can use the adb command to set up port forwarding from your device to your computer. This will allow you to use the Chrome Developer Tools to debug your app.

adb reverse tcp:8081 tcp:8081

Alternatively, select "Settings" from the Dev Menu, then update the "Debug server host for device" setting to match the IP address of your computer.

To debug your React Native app on iOS, you need to change the localhost variable in the RCTWebSocketExecutor.mm file to the IP address of your computer. Then, you can select "Debug JS Remotely" from the Developer Menu to start debugging your app.

Advanced debugging techniques

There are a number of advanced debugging techniques that developers can use for React Native apps. Some of these techniques include:

• Using Redux DevTools to debug Redux state. Redux DevTools is a standalone debugger that can be used to debug Redux state and is also used as a browser extension. It provides a number of features, such as the ability to time travel through the state history and to inspect the state of Redux reducers.
• Use React Profiler to identify performance bottlenecks. React Profiler is a built-in tool that can be used to identify performance bottlenecks in React components.
• Use the React Native Flipper plugin to debug React Native apps. The React Native Flipper plugin is a Flipper plugin that provides a number of features for debugging React Native apps, such as the ability to inspect the state of React components and monitor network requests.

Best practices for debugging React Native apps

• Use descriptive variables and function names. This will make your code easier to read and understand, which can make it easier to debug.
• Add comments to your code. Comments can be helpful for explaining what your code does and why it is written the way it is. This can be helpful for debugging yourself and for other developers who may need to work on your code.
• Use a debugger. A debugger can be a lifesaver when debugging React Native apps. It allows you to step through your code line by line, and inspect the values of variables and objects using breakpoints.
• Test your code thoroughly. The more you test your code, the fewer bugs you will have to debug. Make sure to write unit tests and integration tests for your code.
• Use a continuous integration (CI) server. A CI server can automatically build and test your code every time you commit changes. This can help you to catch bugs early on before they cause problems for your users.

Conclusion

We hope you find this article useful. In this article, we have discussed some React Native debugging tools and techniques that will help you debug your application and save you time.

At Brilworks, we provide React Native development services. If you need React Native development services to develop, modernize, or fix bugs in your application, whether you require a dedicated company or are looking to hire a React Native developer, connect with us today to get started.