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

There's the [React Native Debugger](https://github.com/jhen0409/react-native-debugger) app, it works fine for redux and you can also dispatch actions from there. It sometimes "blocks" for a few seconds if you are outputting a lot of console.logs/warns/errors. The http://localhost:8081/debugger-ui/ is better if you are console.logging a lot of things, it doesn't block — Joao Oliveira Rocha, Aug 11 '21 at 12:40
You can use this [solution](https://stackoverflow.com/questions/33997443/how-can-i-view-network-requests-for-debugging-in-react-native/55450655#55450655) if you not already! — Shishir Aithal, Jan 02 '23 at 11:30

score 2 · Answer 1 · answered Aug 11 '21 at 12:51

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
  }

});

score 0 · Answer 2 · answered Aug 11 '21 at 12:47

0

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.

answered Aug 11 '21 at 12:47

danibranch

34
4

score 0 · Accepted Answer · answered Dec 24 '22 at 16:15

0

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)

answered Dec 24 '22 at 16:15

Neotrixs

2,495
4
28
58

best way to debug React-Native application?

3 Answers3