Debug React Native App in Android Emulator Using Chrome Debug Tool

Google chrome debugger tool also known as Chrome debug is used by many react native developers to debug react native android apps. Debug means checking the app for errors or API class data in the background using custom tool. The debug tool works with Console.log() method. The Console.log() method allow us to print any sending or coming value in debugger console. If we’re receiving data from a WEB API then we can print all the values in Console method and if the data not shown in the List View or FlatList then we can be sure using console that the data is arrived or not in the app using Api call. So in this tutorial we would learn about How to Debug React Native App in Android Emulator Using Chrome Debug Tool.

Contents in this project Debug React Native App in Android Emulator Using Chrome Debug Tool:-

1. The first step is to start the android emulator in your computer. Now start the NPM server or launch the react native app in your emulator. Make sure you have installed Google Chrome Web Browser in your computer.

2. To open the Debug menu we have to simulate the shack device functionality in our emulator. So if you’re using REAL android device then simply shack the device to open debug menu and if you’re using Android Emulator then press CTRL + M from your computer keyboard to open the debug menu. After opening the menu the menu would look like below screenshot.

3. Click on Debug to open the Chrome Debugger Tool in your computer. After opening the Debug tool in your Chrome in your computer look like this.

4. Now Right Click on the screen -> Inspect .

5. Now you can see the Debugger Console Window on the Right Side of Screen. Select Console TAB.

6. Here you can see two debug message first one is App Called… and in the another Console I’m printing the WEB API JSON data. In this console I’m printing one record only.

7. In below screen shot I’m printing the complete data in the JSON format.

This is how we can debug or react native android application in real device or android simulator.

8. Complete Source Code for App.js file:

<br />
import React, { useState, useEffect } from ‘react’;</p>
<p>import { View, StyleSheet, Text, LogBox } from ‘react-native’;</p>
<p>export default function App() {</p>
<p>  //LogBox.ignoreLogs([‘Remote debugger’]);</p>
<p>  useEffect(() => {<br />
    fetch(‘https://jsonplaceholder.typicode.com/posts’, {<br />
      method: ‘GET’,<br />
    })<br />
      .then((response) => response.json())<br />
      .then((responseJson) => {<br />
        console.log(responseJson);<br />
      })<br />
      .catch((error) => {<br />
        console.error(error);<br />
      });</p>
<p>  }, []);</p>
<p>  console.log(‘App Called…’);</p>
<p>  return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={styleSheet.text}><br />
        Debug App in Android Emulator in React Native using Chrome Debugger Tool.<br />
      </Text></p>
<p>    </View><br />
  );<br />
}</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’<br />
  },</p>
<p>  text: {<br />
    textAlign: ‘center’,<br />
    fontSize: 27,<br />
    padding: 10<br />
  }</p>
<p>});

import React, { useState, useEffect } from ‘react’;

import { View, StyleSheet, Text, LogBox } from ‘react-native’;

export default function App() {

//LogBox.ignoreLogs([‘Remote debugger’]);

useEffect(() => {

fetch(‘https://jsonplaceholder.typicode.com/posts’, {

method: ‘GET’,

})

.then((response) => response.json())

.then((responseJson) => {

console.log(responseJson);

})

.catch((error) => {

console.error(error);

});

}, []);

console.log(‘App Called…’);

return (

Debug App in Android Emulator in React Native using Chrome Debugger Tool.

</Text>

</View>

);

}

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’

text: {

textAlign: ‘center’,

fontSize: 27,

padding: 10

}

});

Screenshot of App:

Debug React Native App in Android Emulator Using Chrome Debug Tool

Contents in this project Debug React Native App in Android Emulator Using Chrome Debug Tool:-

Also Read :

Recent Posts

Search Here