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

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

Ci sono alcuni problemi chiusi al riguardo su GitHub ( https://github.com/facebook/react-native/issues/4122 e https://github.com/facebook/react-native/issues/934 ) ma non lo faccio t capirli completamente. Sembra che sia necessario 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 questo che potrebbero renderlo un'idea terribile, ma nessuno coinvolto nel thread ha dichiarato esplicitamente cosa siano.

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

Questo è ciò che ho utilizzato nel punto di ingresso della mia app

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

XMLHttpRequest = _XHR

EDIT: frevib collegato a una sintassi più concisa di seguito. Grazie frevib!

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

Spiegazione:

GLOBAL.originalXMLHttpRequestfa riferimento alla copia di Chrome Dev Tools di XHR. È fornito da RN come portello di fuga. La soluzione di Shvetusya funzionerà solo se gli strumenti di sviluppo sono aperti e quindi forniscono XMLHttpRequest.

EDIT: dovrai consentire le richieste cross origin quando sei in modalità debugger. Con Chrome puoi usare questo pratico plugin .

EDIT: Leggi il problema di GitHub RN che mi ha portato a questa soluzione

Non sono sicuro del motivo per cui nessuno ha indicato questa soluzione finora. Usa React Native Debugger - https://github.com/jhen0409/react-native-debugger ! È il miglior strumento di debug per React Native secondo me e offre Network Inspection fuori dagli schemi.

Dai un'occhiata a questi screenshot.

Fare clic con il tasto destro e selezionare "Abilita Network Inspect"

Fare clic con il tasto destro e selezionare "Abilita Network Inspect"

Esegui il debug!

Uso quanto segue nella mia app (aggiungilo nel file del 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 recupero nella console che sono ben formattati.

Immagine dello schermo:

Nella scheda Rete:

Uso Reactotron per monitorare la richiesta di rete.

So che questa è una vecchia domanda, ma c'è un modo molto più sicuro per farlo ora che non richiede la disabilitazione di CORS o la modifica del codice sorgente React Native. Puoi utilizzare una libreria di terze parti chiamata Reactotron che non solo tiene traccia delle chiamate API (utilizzando il plug-in di rete), ma può anche monitorare il tuo negozio Redux e Sagas con configurazione aggiuntiva:

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

Sono stato in grado di eseguire il debug delle mie richieste in Chrome eliminando il polyfill fornito da React Native dopo l'importazione di React Native.

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

Questo ha funzionato per me per le stesse richieste di origine. Non sono sicuro se è necessario disabilitare CORS in Chrome per farlo funzionare per cross origin.

In passato ho utilizzato l' GLOBAL.XMLHttpRequesthack per tenere traccia delle mie richieste API, ma a volte è molto lento e non ha funzionato per le richieste di risorse. Ho deciso di utilizzare la Postman’s proxyfunzionalità per ispezionare la comunicazione HTTP in uscita dal telefono. Per i dettagli guarda la documentazione ufficiale , ma fondamentalmente ci sono tre semplici passaggi:

• Configura il proxy in Postman
• Controlla l'indirizzo IP del tuo computer ( $ ifconfig)
• Configura il proxy HTTP sul tuo dispositivo mobile nelle impostazioni Wi-Fi

Fai attenzione a questo codice.

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

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

Usalo per chiamate regolari non ma per chiamate multipart / form-data

Suggerisco di usare Charles per esaminare le tue richieste di rete. È davvero buono e offre maggiore visibilità e ti consente di fare cose avanzate.

http://charlesproxy.com

Se stai cercando di eseguire il debug delle richieste di rete su una versione di rilascio della tua app, puoi utilizzare la libreria react-native-network-logger . Ti consente di monitorare e visualizzare le richieste di rete all'interno dell'app da una schermata di debug personalizzata.

Puoi quindi metterlo dietro un flag di build o un flag di rete per disabilitarlo per gli utenti nell'app di produzione.

Basta installarlo con yarn add react-native-network-loggerquindi aggiungerlo al punto di ingresso della tua app:

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

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

E questo in una schermata di debug:

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

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

Disclaimer: sono l'autore del pacchetto.

Se hai un telefono Android o un emulatore,

• npx react-native start

Quindi apri Android Studio .

Apri la androidcartella del tuo progetto come progetto Android Studio.

Fare clic sull'icona blu che è Android Profiler

Dopo l'avvio di Android Profiler, puoi aggiungere la tua app tramite l'icona grigia più vicino SESSIONSall'etichetta

Ora puoi ispezionare la rete tramite questo strumento. Puoi vedere triangoli che mostrano la tua attività di rete.

Controlla questo per maggiori informazioni sull'ispezione del traffico di rete .

Aggiungi Debugger in js dove puoi vedere la richiesta o la risposta