¿Cómo puedo ver las solicitudes de red (para depurar) en React Native?

Me gustaría ver mis solicitudes de red en React Native para ayudarme a depurar, idealmente en la pestaña 'Red' de las herramientas de desarrollo de Chrome.

Hay algunos problemas cerrados sobre esto en GitHub ( https://github.com/facebook/react-native/issues/4122 y https://github.com/facebook/react-native/issues/934 ) pero yo no ' Los entiendo completamente. Parece que necesito deshacer algunos de los polyfills de React Native y luego ejecutar algunos comandos con indicadores de depuración adicionales, y tal vez modificar algunas configuraciones de seguridad de Chrome. Y aparentemente hay algunos problemas de seguridad involucrados en hacer esto que podrían convertirlo en una idea terrible, pero nadie involucrado en el hilo ha declarado explícitamente cuáles son.

¿Alguien podría proporcionar una guía paso a paso para hacer que la pestaña Red funcione con React Native, así como una explicación de los problemas de seguridad involucrados al hacerlo?

Esto es lo que he estado usando en el punto de entrada de mi aplicación.

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

EDITAR: frevib vinculado a una sintaxis más concisa a continuación. ¡Gracias frevib!

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Explicación:

GLOBAL.originalXMLHttpRequesthace referencia a la copia de Chrome Dev Tools de XHR. Es proporcionado por RN como una trampilla de escape. La solución de Shvetusya solo funcionará si las herramientas de desarrollo están abiertas y, por lo tanto, proporcionan XMLHttpRequest.

EDITAR: Deberá permitir solicitudes de origen cruzado cuando esté en modo de depuración. Con Chrome puedes usar este útil complemento .

EDITAR: Lea sobre el problema de RN github que me llevó a esta solución

No estoy seguro de por qué nadie ha señalado esta solución hasta ahora. Utilice React Native Debugger - https://github.com/jhen0409/react-native-debugger ! En mi opinión, es la mejor herramienta de depuración para React Native y ofrece inspección de red lista para usar.

Eche un vistazo a estas capturas de pantalla.

Haga clic derecho y seleccione 'Habilitar inspección de red'

Haga clic derecho y seleccione 'Habilitar inspección de red'

¡Depurar!

Utilizo lo siguiente en mi aplicación (agregue esto en su archivo principal de punto de entrada app.js):

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

Lo mejor es que también muestra los registros de recuperación en la consola, que están bien formateados.

Captura de pantalla:

En la pestaña de red:

Utilizo Reactotron para rastrear solicitudes de red.

Sé que esta es una pregunta antigua, pero hay una forma mucho más segura de hacer esto ahora que no requiere deshabilitar CORS o alterar el código fuente de React Native. Puede usar una biblioteca de terceros llamada Reactotron que no solo rastrea las llamadas a la API (usando el complemento de red), sino que también puede rastrear su tienda Redux y Sagas con una configuración adicional:

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

Pude depurar mis solicitudes en Chrome eliminando el polyfill que proporciona React Native después de importar React Native.

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

Esto funcionó para mí para las mismas solicitudes de origen. No estoy seguro si necesita deshabilitar CORS en Chrome para que funcione para el origen cruzado.

En el pasado, usé GLOBAL.XMLHttpRequesthack para rastrear mis solicitudes de API, pero a veces es muy lento y no funcionó para solicitudes de activos. Decidí usar la Postman’s proxyfunción para inspeccionar la comunicación HTTP que sale del teléfono. Para obtener más detalles, consulte la documentación oficial , pero básicamente hay tres sencillos pasos:

• Configurar el proxy en Postman
• Verifique la dirección IP de su computadora ( $ ifconfig)
• Configure el proxy HTTP en su dispositivo móvil en la configuración de wifi

Tenga cuidado con este código.

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

Ayuda y es genial, pero destruye la carga. Pasé 2 días tratando de averiguar por qué los archivos cargados envían [objeto Objeto] en lugar del archivo real. El motivo es un código anterior.

Úselo para llamadas regulares, pero no para llamadas multiparte / form-data

Sugiero usar Charles para inspeccionar sus solicitudes de red. Es realmente bueno y proporciona más visibilidad y te permite hacer cosas avanzadas.

http://charlesproxy.com

Si está buscando depurar solicitudes de red en una versión de lanzamiento de su aplicación, puede usar la biblioteca react-native-network-logger . Le permite monitorear y ver las solicitudes de red dentro de la aplicación desde una pantalla de depuración personalizada.

Luego, puede poner esto detrás de una marca de compilación o una marca de red para deshabilitarlo para los usuarios en la aplicación de producción.

Simplemente instálelo y yarn add react-native-network-loggerluego agregue esto en el punto de entrada de su aplicación:

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

Y esto en una pantalla de depuración:

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

Descargo de responsabilidad: soy el autor del paquete.

Si tiene un teléfono o emulador Android,

• npx react-native start

Luego abre Android Studio .

Abra la androidcarpeta de su proyecto como un proyecto de Android Studio.

Haga clic en ese icono azul que es Android Profiler

Después de que se inicie Android Profiler, puede agregar su aplicación a través del ícono gris más cerca de la SESSIONSetiqueta

Ahora puede inspeccionar las redes a través de esta herramienta. Puede ver triángulos que muestran la actividad de su red.

Consulte esto para obtener más información sobre cómo inspeccionar el tráfico de la red .

Agregue el depurador en js donde puede ver la solicitud o la respuesta