Question 33491 in React native Question posted in
The official React Native documentation can be found here.

how to debug network responce in react native

i am trying to debug my code in react native here i have a axios post request the only responce is i get when there is a error is axios error

rather than that i am looking to debug my code just like in react js by inspect element and network tab

currently i open my app using npx react-native run-andoid this opens the app in a emulator and is really diffcult to debug my code can anyone suggest a better method for debugiing

   var Data56 = {
        name: name,
        email: email,
        babyname: babyname,
        phone: nuber,
       
        baby_date: date,
      };
    }
   

    axios
      .post('http://10.0.2.2:8000/api/register', Data56, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      })

      .then(res => {
        props.navigation.navigate('Home_scrren', {data: Data56});
     
      })
      .catch(error => {
        alert(error);
      });
  }

enter image description here

enter image description here

Tags:

4

Answers


  1. 0

    Follow this Step:-

    (1) First you need to shake the device and open the debug option, it will redirect you to chrome.

    (2) You need to inspect that and open the console tab.

    enter image description here

    (3) You need to add breakpoints in VSCode or add breakpoints using chrome.

    enter image description here

    (4) then simply Reload the application, using that you can do step-by-step debugging.

    Login or Signup to reply.
  2. 0

    1]firstly you can see this video

    2]exapmle with axios

    3] 2nd go to your console window and press D and see your emulator like this like this

    enter image description here

    • if you press d in console window and see your output in your emulator
      like this then then on the last option "Debug"

    • it will navigate to chrome screen here is screenshot

    enter image description here

    • then write click on a screen and see option like inspect here is
      screenshot

    enter image description here

    • then then new screen will appear and go to consol tab there you can
      see your data like this

    enter image description here

    I This this will help you

    Login or Signup to reply.
  3. 0 
    if (__DEV__) {
  global.XMLHttpRequest = global.originalXMLHttpRequest
    ? global.originalXMLHttpRequest
    : global.XMLHttpRequest;
  global.FormData = global.originalFormData
    ? global.originalFormData
    : global.FormData;

  fetch; // Ensure to get the lazy property

  if (window.__FETCH_SUPPORT__) {
    // it's RNDebugger only to have
    window.__FETCH_SUPPORT__.blob = false;
  } else {
    /*
     * Set __FETCH_SUPPORT__ to false is just work for `fetch`.
     * If you're using another way you can just use the native Blob and remove the `else` statement
     */
    global.Blob = global.originalBlob ? global.originalBlob : global.Blob;
    global.FileReader = global.originalFileReader
      ? global.originalFileReader
      : global.FileReader;
  }
}
    • add this code to root index.js
    • turn on debug
    • Check tab network like web,

    we can see request and response,
    one more option, you can add reactotron or flipper, this tool will log anything like network redux action…, without open debug mode
    Hope this help you

    Login or Signup to reply.
  4. 0

    I’m using axios and fetch data and you can see in chrome i will get all data in debug mood also I’m my step which one I post here

        import React, { useEffect, useState } from "react";
    import { View, SafeAreaView, Text, StyleSheet, ScrollView, TouchableOpacity, FlatList } from "react-native";
    import axios from "axios";
    
    const App = () => {
    
      const [list, setList] = useState([]);
    
      useEffect(() => {
        getList()
      }, [])
    
      const getList = () => {
        axios({
          url: "https://fakestoreapi.com/users?limit=5",
        }).then((res) => {
          var response = res.data;
          console.log(response)
          setList(response)
        })
    
      }
      return (
        <FlatList
          data={list}
          renderItem={({ item }) =>
            <Text>{item}</Text>
          }
        />
      )
    }
    export default App;

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search