Wie kann ich Netzwerkanforderungen (zum Debuggen) in React Native anzeigen?

Ich möchte meine Netzwerkanforderungen in React Native anzeigen, um das Debuggen zu erleichtern - idealerweise auf der Registerkarte "Netzwerk" der Chrome-Devtools.

Es gibt einige geschlossene Probleme auf GitHub ( https://github.com/facebook/react-native/issues/4122 und https://github.com/facebook/react-native/issues/934 ), aber ich weiß nicht Ich verstehe sie nicht ganz. Es hört sich so an, als müsste ich einige der Polyfills von React Native rückgängig machen und dann einige Befehle mit zusätzlichen Debugging-Flags ausführen und möglicherweise einige Chrome-Sicherheitseinstellungen ändern. Und anscheinend gibt es dabei einige Sicherheitsprobleme, die es zu einer schrecklichen Idee machen könnten, aber niemand, der an dem Thread beteiligt ist, hat ausdrücklich angegeben, was sie sind.

Könnte jemand eine Schritt-für-Schritt-Anleitung zur Funktionsweise der Registerkarte "Netzwerk" mit React Native sowie eine Erläuterung der damit verbundenen Sicherheitsprobleme bereitstellen?

Dies ist, was ich im Einstiegspunkt meiner App verwendet habe

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

XMLHttpRequest = _XHR

BEARBEITEN: Frevib, das unten mit einer präziseren Syntax verknüpft ist. Danke frevib!

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

Erläuterung:

GLOBAL.originalXMLHttpRequestverweist auf die Chrome Dev Tools-Kopie von XHR. Es wird von RN als Notluke bereitgestellt. Die Lösung von Shvetusya funktioniert nur, wenn die Entwicklungswerkzeuge geöffnet sind und somit bereitstellen XMLHttpRequest.

BEARBEITEN: Im Debugger-Modus müssen Sie Ursprungsübergreifende Anforderungen zulassen. Mit Chrome können Sie dieses praktische Plugin verwenden .

BEARBEITEN: Lesen Sie mehr über das RN-Github-Problem , das mich zu dieser Lösung geführt hat

Ich bin mir nicht sicher, warum bisher niemand auf diese Lösung hingewiesen hat. Verwenden Sie React Native Debugger - https://github.com/jhen0409/react-native-debugger ! Meiner Meinung nach ist es das beste Debugging-Tool für React Native und bietet Network Inspection sofort.

Schauen Sie sich diese Screenshots an.

Klicken Sie mit der rechten Maustaste und wählen Sie "Netzwerkinspektion aktivieren".

Klicken Sie mit der rechten Maustaste und wählen Sie "Netzwerkinspektion aktivieren".

Debuggen Sie weg!

Ich verwende Folgendes in meiner App (Fügen Sie dies in Ihre Haupteinstiegspunktdatei app.js ein):

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

Das Beste ist, dass auch die Abrufprotokolle in der Konsole angezeigt werden, die gut formatiert sind.

Bildschirmfoto:

Auf der Registerkarte Netzwerk:

Ich verwende Reactotron zur Verfolgung von Netzwerkanfragen.

Ich weiß, dass dies eine alte Frage ist, aber es gibt jetzt eine viel sicherere Möglichkeit, dies zu tun, ohne CORS zu deaktivieren oder den React Native-Quellcode zu ändern. Sie können eine Drittanbieter-Bibliothek namens Reactotron verwenden, die nicht nur API-Aufrufe (mithilfe des Netzwerk-Plugins) verfolgt, sondern auch Ihren Redux-Store und Sagas mit zusätzlichen Einstellungen:

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

Ich konnte meine Anforderungen in Chrome debuggen, indem ich die von React Native bereitgestellte Polyfüllung nach dem Import von React Native löschte.

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

Dies funktionierte bei mir für Anfragen nach gleicher Herkunft. Sie sind sich nicht sicher, ob Sie CORS in Chrome deaktivieren müssen, damit es für Cross-Origin funktioniert.

In der Vergangenheit habe ich GLOBAL.XMLHttpRequestHack verwendet, um meine API-Anforderungen zu verfolgen, aber manchmal ist es sehr langsam und hat bei Asset-Anforderungen nicht funktioniert. Ich habe mich für die Postman’s proxyFunktion entschieden, um die vom Telefon ausgehende HTTP-Kommunikation zu überprüfen. Einzelheiten finden Sie in der offiziellen Dokumentation . Grundsätzlich gibt es drei einfache Schritte:

• Richten Sie den Proxy in Postman ein
• Überprüfen Sie die IP-Adresse Ihres Computers ( $ ifconfig)
• Konfigurieren Sie den HTTP-Proxy auf Ihrem Mobilgerät in den WLAN-Einstellungen

Bitte seien Sie vorsichtig mit diesem Code.

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

Es hilft und es ist großartig, aber es zerstört den Upload. Ich verbringe 2 Tage damit herauszufinden, warum hochgeladene Dateien [Objekt Objekt] anstelle der realen Datei senden. Der Grund ist ein Code oben.

Verwenden Sie es nicht für reguläre Anrufe, sondern für mehrteilige / Formulardatenanrufe

Ich schlage vor, Charles zu verwenden, um Ihre Netzwerkanforderungen zu überprüfen. Es ist wirklich gut und bietet mehr Sichtbarkeit und ermöglicht es Ihnen, fortgeschrittene Dinge zu tun.

http://charlesproxy.com

Wenn Sie Netzwerkanforderungen für eine Release-Version Ihrer App debuggen möchten, können Sie den React-Native-Network-Logger der Bibliothek verwenden . Sie können Netzwerkanforderungen in der App von einem benutzerdefinierten Debug-Bildschirm aus überwachen und anzeigen.

Sie können dies dann hinter ein Build-Flag oder ein Netzwerk-Flag setzen, um es für Benutzer in der Produktions-App zu deaktivieren.

Installieren Sie es einfach mit yarn add react-native-network-loggerund fügen Sie dies am Einstiegspunkt Ihrer App hinzu:

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

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

Und das auf einem Debug-Bildschirm:

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

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

Haftungsausschluss: Ich bin der Autor des Pakets.

Wenn Sie ein Android-Handy oder einen Emulator haben,

• npx react-native start

Öffnen Sie dann das Android Studio .

Öffnen Sie den androidOrdner Ihres Projekts als Android Studio-Projekt.

Klicken Sie auf das blaue Symbol, das Android Profiler ist

Nach dem Start des Android Profiler können Sie Ihre App über das graue Plus-Symbol neben dem SESSIONSEtikett hinzufügen

Jetzt können Sie das Netzwerk über dieses Tool überprüfen. Sie können Dreiecke sehen, die Ihre Netzwerkaktivität anzeigen.

Weitere Informationen zum Überprüfen des Netzwerkverkehrs finden Sie hier .

Fügen Sie Debugger in das js ein, wo Sie die Anforderung oder Antwort sehen können