best way to debug React-Native application?

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
  }

});