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?
quelle
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)
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!
quelle
Enable Network Inspect
damit sie funktioniert. Standardmäßig ist dies nicht der Fall.Ich verwende Folgendes in meiner App (Fügen Sie dies in Ihre Haupteinstiegspunktdatei app.js ein):
Das Beste ist, dass auch die Abrufprotokolle in der Konsole angezeigt werden, die gut formatiert sind.
Bildschirmfoto:
Auf der Registerkarte Netzwerk:
quelle
Ich verwende Reactotron zur Verfolgung von Netzwerkanfragen.
quelle
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
quelle
Ich konnte meine Anforderungen in Chrome debuggen, indem ich die von React Native bereitgestellte Polyfüllung nach dem Import von React Native löschte.
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.
quelle
In der Vergangenheit habe ich
GLOBAL.XMLHttpRequest
Hack 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 diePostman’s proxy
Funktion 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:$ ifconfig
)quelle
Bitte seien Sie vorsichtig mit diesem Code.
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
quelle
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
quelle
http://localhost:8081/index.android.bundle?platform=android&dev=true
. Wie kann man ALLE Anfragen erfassen? (IchWenn 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-logger
und fügen Sie dies am Einstiegspunkt Ihrer App hinzu:Und das auf einem Debug-Bildschirm:
Haftungsausschluss: Ich bin der Autor des Pakets.
quelle
Wenn Sie ein Android-Handy oder einen Emulator haben,
npx react-native start
Öffnen Sie dann das Android Studio .
Öffnen Sie den
android
Ordner 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
SESSIONS
Etikett hinzufügenJetzt 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 .
quelle
Fügen Sie Debugger in das js ein, wo Sie die Anforderung oder Antwort sehen können
quelle