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:

1. Logging
2. Debugging in Chrome browser
3. Debugging in Visual Studio Code

Logging:

It is a very quick and easy technique to debug your application in 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 logging 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: 

Javascript

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 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 npm start on the terminal to execute run your app.

Step 2: 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+M in Mac or ctrl+M in 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: Click on Debug Remote JS to enable remote debugging. This will open a tab in the Chrome browser that will have the URL http://localhost:19000/debugger-ui/

Step 4: 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 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 Native Tools 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 and enable the Live Reload. Now we can start debugging in VS Code.

Reference:https://reactnative.dev/docs/debugging