React Native Debugging

Debugging is essential in React Native to identify and fix errors efficiently, ensuring faster and smoother app development. Using Expo CLI simplifies running and debugging applications.

• Use console.log() to track values and app flow.
• Enable React Native Debugger for inspecting state and network requests.
• Use Expo's developer tools for real-time debugging.
• Leverage Error Boundaries to catch and handle runtime errors gracefully.
• Use Chrome or Flipper DevTools for inspecting components and performance.

Logging

A quick and easy way to debug during development by logging important information using console.log().

• Helps track app flow and variable values.
• Provides insight into the functioning of the app.
• Should be removed before production to avoid unnecessary overhead.

import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
import {useDimensions, useDeviceOrientation} from 
        '@react-native-community/hooks';

export default function App() {
  
  console.log("App executed");

  return (
    <View style = {styles.container}>
      <Text>
        Hello World
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Output: We will see the following output on the console.

Debugging in the Chrome browser

We can enable Remote Debugging in our application which will enable the React Native code to run in a Chrome browser tab where we can debug it in a manner similar to how we debug web applications using Chrome developer tools. 

Steps Involved:

Debugging in React Native can be done efficiently using Chrome Developer Tools or VS Code with React Native Tools, allowing developers to inspect errors, set breakpoints, and run code step-by-step for faster and precise issue resolution.

Step 1: Run the app

Run the below command on the terminal to execute your app. 

npm start 

Step 2: Open Developer menu

Once your app has compiled and is running. According to the device that you are using, use the appropriate command:

• Android Virtual device: Press cmd+Min Mac orctrl+Min PC to bring up the developer menu.
• IOS simulator: Press cmd+D or ctrl+D and then cmd+D to bring up the developer menu.
• Your Phone: Shake it to bring up the developer menu.

The developer should look like this.

Step 3: Open JS Debugger

Click on Open JS Debugger to enable remote debugging. This will open a new Expo Go tab in your PC as mentioned in below image.

Step 4: OpenChrome developer tools

Now, press Ctrl+Shift+I to open the Chrome developer tools. The navigation panel will look like this:

Here in the Console tab we can view the errors in our applications as well as the logs created by our application. In the Sources tab, we should enable caught exceptions in order to identify the line on which the error occurred. Additionally, we can do a line-by-line run of the code and step into functions for a more detailed view of the program execution.

Once we are done with our debugging session, we should turn off remote debugging by clicking on the Stop Remote Debugging option in the developer tools of your app. This will prevent your app from being slow, as Remote Debugging significantly reduces the speed of the application.

Debugging in Visual Studio Code

VS Code’s React Native Tools extension allows easy debugging of React Native apps with proper configuration.

• Install the React Native Tools extension in VS Code.
• Create a launch.json file to configure debugging.
• Enable Debug JS Remotely and Live Reload.
• Start debugging directly within VS Code.

Step Involved

Step 1: Install Extensions

Install the VS Code Extensions mentioned below.

• React Native Tools: It consists of all debugging and integrated commands for React Native.

Step 2: Create a launch.json file

• Go to the "Run and Debug" section in VSCode.
• Click on "Create a launch.json file".

• Then, it will ask you to select debugger, select "React Native" as mentioned in below image.

• It will again ask you to pick debug configurations, only select "Attach to packager" as mentioned in below image and click on "OK".

• Then, the file will be created inside the .vscode folder.

Step 3: Activate Attach to Packager

Run the App and go to "Run and Debug" section in VS code and click on "Attach to packager" as mentioned in below image.

Step 4: Break Points

Open the App.js file and click to the left of any line containing logic. This will display a red dot and open the Run and Debugger section in Visual Studio Code. All breakpoints will be shown there, as illustrated in the image below.

Then, when the code is executed, all debug logs will display in the DEBUG CONSOLE.