React Native Debugging

Debugging is very important for building applications and removing errors. A good knowledge of debugging techniques allows for the faster and efficient development of software.

Here we are going to discuss a few debugging techniques in React Native. We will be using expo-cli to develop, run, and debug our applications, which is one of the simplest and fastest ways of building a React Native application.

The following are the debugging techniques generally used in React Native:

Logging

It is a very quick and easy technique to debug your application in the development phase. It is one of the easiest techniques to get an insight into the functioning of the application. To do logging, we simply use the console.log() statements to log the required information or indicators. However, we should always remember to remove these console.log() statements before we push our product into the development phase, as these statements will simply create an overhead there.

Example:  

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:

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

We can use React NativeTools which is an extension available in VS Code, and it is used for debugging in React Native applications. After installing the extension, just create a new file named launch.json which is used for debugging the configuration file creation. At last, we have to enable the Debug JS Remotely andenable the Live Reload.Now we can start debugging in 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.