best way to debug React-Native application? - debugging

Question

I am new to React-Native Development.
Previously, I developed many applications in different Hybrid mobile application frameworks (Ionic, Cordova, etc.)
Debugging is very easy on Ionic, Cordova frameworks applications.
Please suggest the best way to debug React-Native applications

Answer 1

if you’re using Android Emulator then press CTRL + M from your computer keyboard to open the debug menu.
if you’re using iOS Simulator then press CMD + D from your computer keyboard to open the debug menu.
Click on Debug with Chrome to open the Chrome Debugger Tool in your computer. After opening the Debug tool in your Chrome.
Right Click on the screen -> Inspect .
Now you can see the Debugger Console Window on the Right Side of Screen. Select Console TAB.
Now in your app you can putlogs to debug app.
console.log('debugging');
Example:
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 (
<View style={styleSheet.MainContainer}>
<Text style={styleSheet.text}>
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
}
});

Answer 2

If you use expo for your react-native project you should use the expo-cli
otherwise the react-native-cli with an emulator or a phone connected in debug mode.

Answer 3

As per my past experience, the best and easy way to debug React Native Applications is by using Flipper Application(Developed by Facebook for React-Native App)