Come posso visualizzare le richieste di rete (per il debug) in React Native?

Question

Vorrei visualizzare le richieste di rete in React Native per aiutarmi a eseguire il debug, idealmente nella scheda "Rete" degli sviluppatori di Chrome.

Ci sono alcuni problemi su questo argomento su GitHub (https://github.com/facebook/react-native/issues/4122 e https://github.com/facebook/react-native/issues/934) ma non li capisco completamente. Sembra che ho bisogno di annullare alcuni dei polyfill di React Native e quindi eseguire alcuni comandi con flag di debug aggiuntivi e magari modificare alcune impostazioni di sicurezza di Chrome? E a quanto pare ci sono alcuni problemi di sicurezza coinvolti nel fare ciò che potrebbe renderlo una pessima idea, ma nessuno coinvolto nel thread ha dichiarato esplicitamente quello che sono.

Qualcuno potrebbe fornire una guida dettagliata per far funzionare la scheda Rete con React Native, oltre a una spiegazione dei problemi di sicurezza coinvolti nel fare ciò?

Answer 1

Add Debugger nei js, dove si può vedere il req o la risposta

Answer 2

sono stato in grado di eseguire il debug le mie richieste in Chrome cancellando polyfill che reagiscono Native fornisce dopo l'importazione React nativo.

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

Questo ha funzionato per me per le stesse richieste di origine. Non sei sicuro di dover disattivare CORS in Chrome per farlo funzionare per l'origine incrociata.

Answer 3

Suggerisco di utilizzare Charles per ispezionare le richieste di rete. È davvero buono e offre più visibilità e ti permette di fare cose avanzate.

http://charlesproxy.com

Answer 4

Questo è quello che ho usato nel punto di ingresso del mio app

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

XMLHttpRequest = _XHR 

EDIT: frevib legata alla sintassi più concisa sotto. Grazie a frevib!

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

Spiegazione:

GLOBAL.originalXMLHttpRequest riferisce i gli strumenti di Chrome Dev copia di XHR. È fornito da RN come un portello di emergenza. La soluzione di Shvetusya funzionerà solo se gli strumenti di sviluppo sono aperti e fornendo così XMLHttpRequest.

MODIFICA: è necessario consentire le richieste di origine incrociata in modalità debugger. Con chrome puoi usare this handy plugin.

EDIT: Read about the RN github issue che mi portano a questa soluzione

Answer 5

Io uso il seguente nella mia app (Aggiungere questo nel vostro file di punto di ingresso app.js principale):

// 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; 
    }); 
}; 

La cosa migliore è che mostra anche i log di fetch nella console che sono ben formattati.

Screenshot:

Sulla scheda di rete:

Answer 6

So che questa è una vecchia questione, ma c'è un modo molto più sicuro per fare questo, ora che non lo fa richiede la disabilitazione di CORS o la modifica del codice sorgente React Native. È possibile utilizzare una libreria di terze parti chiamato Reactotron che le tracce non solo le chiamate alle API (utilizzando il plugin di rete), ma anche possibile monitorare il vostro negozio Redux, e Sagas con configurazione aggiuntiva:

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

Answer 7

In passato Ho usato GLOBAL.XMLHttpRequest hack per tracciare le mie richieste API ma a volte è molto lento e non ha funzionato per le richieste di risorse. Ho deciso di utilizzare la funzione Postman’s proxy per ispezionare la comunicazione HTTP che esce dal telefono. Per i dettagli guarda il official documentation, ma in fondo, ci sono tre semplici passaggi:

• Impostare il proxy in Postman
• Controllare l'indirizzo IP del computer ($ ifconfig)
procura
• Configura HTTP sul tuo dispositivo mobile in impostazioni wifi

Answer 8

Si prega di fare attenzione con questo codice.

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

Aiuta ed è ottimo ma distrugge il caricamento. Trascorro 2 giorni cercando di capire perché i file caricati stanno inviando [oggetto oggetto] invece del file reale. Il motivo è un codice sopra.

utilizzarlo per effettuare chiamate regolari non ma per multipart/form-data chiamate