Me gustaría ver mis solicitudes de red en Reaccionar Nativo para que me ayude a depurar, idealmente en la ‘Red’ de la pestaña de Chrome devtools.

Hay algunos cerró los temas sobre esto en GitHub (https://github.com/facebook/react-native/issues/4122 y https://github.com/facebook/react-native/issues/934), pero no estoy totalmente de entender. Suena como si la necesidad de deshacer algunos de Reaccionar del Nativo polyfills y, a continuación, ejecute los comandos de depuración extra banderas, y tal vez modificar algunos Chrome configuración de seguridad? Y al parecer hay algunos problemas de seguridad implicados en hacer esto que podría hacer una idea terrible, pero nadie involucrado en el hilo ha declarado explícitamente lo que son.

Alguien podría proporcionar un paso a paso guía para la pestaña de la Red de trabajo con Reaccionar Nativas, así como una explicación de los problemas de seguridad implicados en hacerlo?

InformationsquelleAutor Mark Amery | 2015-11-30

10 Comentarios

  1. 82

    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

    EDICIÓN: frevib vinculados a la sintaxis más concisa a continuación. Gracias frevib!

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

    Explicación:

    GLOBAL.originalXMLHttpRequest se refiere el Chrome Dev Herramientas de copia de XHR. Es proporcionada por RN como una escotilla de escape. Shvetusya la solución sólo funciona si el dev tools están abiertos y por lo tanto proporcionar XMLHttpRequest.

    EDIT: se deberá permitir el origen de la cruz de solicitudes cuando en modo de depurador. Con chrome puede utilizar este útil plugin.

    EDICIÓN: Leer acerca de la RN github problema que me llevan a esta solución

    • Después de poner ese trozo de código que yo soy capaz de ver la petición en la Consola para Desarrolladores, pero todos los de mi solicitud de fallar con un estado 404. Alguien tiene alguna idea de por qué puede suceder?
    • XMLHttpRequest no está definido 🙁
    • Esto funciona. Tomó esta de Github
    • Esto no funciona para mí. Yo uso el emulador de android, y la pestaña de la red se muestra vacía, incluso las solicitudes se envían
    • Esto no funciona más, de error siguiente aparece en la consola (no estoy seguro de lo que el cambio provocado este): Uncaught Error: unsupported BodyInit type at Response.Body._initBody (fetch.js:231) at new Response (fetch.js:390) at XMLHttpRequest.xhr.onload (fetch.js:437)
    • Funciona a mi lado en Reaccionar Depurador Nativo con este one-liner de set-up. Gracias un millón de veces, @tryangul
    • Esto no funcionará si usted va a utilizar XMLHttpRequest para cargar/descargar datos.

  2. 37

    Yo uso el siguiente en mi aplicación ( Agregar esta en la principal app.js punto de entrada de archivo ) :

    //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 muestran la captura de registros en la consola, así que están bien formateado.

    Captura de pantalla:

    ¿Cómo puedo ver las solicitudes de red (para depuración) en Reaccionar Nativo?

    En la ficha red:

    ¿Cómo puedo ver las solicitudes de red (para depuración) en Reaccionar Nativo?

    • Reaccionar Nativos confirmó a la obra! Gracias.
    • Eso es impresionante! Gracias
    • En qué punto de la petición original es este dispararon? De hecho, estoy pensando en usar esto como un mecanismo para el fuego de actualización de fichas si la respuesta tiene un plan 401. Hay un problema con eso?
    • FANTÁSTICO Sankalp! He tenido problemas para conseguir Reacotron de trabajo sin que se caiga mi Metro generador. La solución de las grandes obras. Incluso funciona en Reaccionar Depurador Nativo.
    • El valor de la ‘Access-Control-Allow-Origin’ encabezado en la respuesta no debe ser el comodín ‘*’ cuando la solicitud de credenciales del modo de «incluir». Origen ‘localhost:8081‘ es, por tanto, no se permite el acceso. Las credenciales modo de solicitudes iniciadas por el XMLHttpRequest es controlado por el withCredentials atributo.
    • Impresionante. Muchas gracias

  3. 18

    Yo uso Reactotron para el seguimiento de la solicitud de red.

    ¿Cómo puedo ver las solicitudes de red (para depuración) en Reaccionar Nativo?

    • esta es realmente la mejor solución de todas las respuestas aquí (para mí).. super fácil de configurar y no todos los efectos secundarios de la utilización de cromo
  4. 12

    Sé que esta es una vieja cuestión, pero hay una forma mucho más segura de hacerlo ahora que no requiere la desactivación de CORS o la alteración de las Reaccionar código Nativo. Usted puede usar una biblioteca de terceros llamado Reactotron que no sólo pistas de llamadas a la API (utilizando la red plugin), pero también puede rastrear su Redux de la tienda, y Sagas con una configuración adicional:

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

    • Reactotron parecía funcionar sólo si utiliza la biblioteca externa llamada apisauce. No es lo normal fetch. Así que si usted quiere supervisar las solicitudes de envío por bibliotecas externas en su aplicación, reactotron no es bueno.
    • de hecho reactotron apoya la creación de Redes con Fetch desde el mes de Marzo, es sólo que la documentación era anticuado. He probado a mí mismo, y corregido en el readme 🙂
    • esto funciona excelente; he visto muchos problemas con: GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
    • reactotron es realmente fácil de configurar y útil para el seguimiento de llamadas de la red de reaccionar-aplicaciones nativas
  5. 10

    No estoy seguro de por qué nadie ha señalado esta solución hasta el momento. El Uso De Reaccionar Depurador Nativo – https://github.com/jhen0409/react-native-debugger! Es la mejor herramienta de depuración para Reaccionar Nativo, en mi opinión, y se da a la Inspección de Red de la caja.

    Echa un vistazo a estas imágenes.

    Haga clic derecho y seleccione ‘Activar la Red de Inspeccionar’
    ¿Cómo puedo ver las solicitudes de red (para depuración) en Reaccionar Nativo?

    Haga clic derecho y seleccione ‘Activar la Red de Inspeccionar’
    ¿Cómo puedo ver las solicitudes de red (para depuración) en Reaccionar Nativo?

    De depuración de distancia!
    ¿Cómo puedo ver las solicitudes de red (para depuración) en Reaccionar Nativo?

    • Si usted está rozando y ver esta respuesta, tenga en cuenta que DEBE botón derecho y Enable Network Inspect para que funcione. De forma predeterminada, no.
    • haga clic derecho en donde?
    • He editado la respuesta. Echale un vistazo 🙂
  6. 6

    Yo era capaz de depurar mis peticiones en Chrome mediante la eliminación de relleno que Reaccionan Nativa proporciona después de la importación de Reaccionar Nativo.

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

    Esto funcionó para mí mismo las solicitudes de origen. No está seguro de si necesita desactivar el CORS en Chrome para hacer que funcione para el origen de la cruz.

    • ¿Qué es un «mismo origen» de la solicitud, en el contexto de las solicitudes de hecho Reaccionar de una app Nativa? Uno que está en el mismo dominio que el depurador (es decir, probablemente localhost)?
    • en mi caso lo que tienes que desactivar CORS en Chrome para hacer que funcione para el origen de la cruz. marque este plugin de chrome :chrome.google.com/webstore/detail/allow-control-allow-origi/…
    • puede usted explicar cómo se utiliza este plugin?
    • hey, acabo de instalar el plugin y activarlo bu deslizando el botón, el icono debe ser de color verde cuando está encendido y de color rojo cuando se está fuera de eso. dropbox.com/s/242fflwgcew6m50/…
  7. 5

    En el pasado he utilizado GLOBAL.XMLHttpRequest hack para el seguimiento de mis solicitudes a la API, pero a veces es muy lento y no funciona para los activos de las solicitudes. Decidí usar Postman’s proxy de la característica a inspeccionar la comunicación HTTP salir de teléfono. Para más detalles consulta la la documentación oficial, pero básicamente, hay tres sencillos pasos:

    • Configurar el proxy en el Cartero
    • De verificación dirección IP de su ordenador($ ifconfig)
    • Configurar el proxy HTTP en tu dispositivo móvil en configuración wifi
  8. 3

    Por favor, tenga cuidado con este código.

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

    Ayuda y es genial, pero destruye la carga. Yo pase 2 días tratando de averiguar por qué los archivos subidos son el envío de [object object] en lugar del archivo real. La razón es un código de arriba.

    Utilizar para regular las llamadas que no, pero para multipart/form-data llamadas

  9. 2

    Sugiero usar el Charles para inspeccionar sus solicitudes de red.
    Es muy bueno y dar mayor visibilidad y permite realizar funciones avanzadas de cosas.

    http://charlesproxy.com

    • Sólo traté de Charles y parece que sólo la captura de http://localhost:8081/index.android.bundle?platform=android&dev=true .. ¿cómo hacer captura de TODAS las solicitudes? (Me estoy pegando una api externa)
    • Es su API externa utiliza HTTPS? Si es así, usted necesita configurar Charles un poco para coger esos también.
    • cuando el uso de android, charles puede ser un poco problemático para la captura de las solicitudes salientes. usted necesita ‘manualmente’ configurar el simulador para acceder a charles (y última vez que he probado, va en el panel de configuración no hacer el trabajo — proxy ip se necesitan para ser pasado desde una línea de comandos de creación de instancias).

Dejar respuesta

Please enter your comment!
Please enter your name here