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

102

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?

Mark Amery
quelle

Antworten:

91

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

Tryangul
quelle
4
Nachdem ich diesen Code eingegeben habe, kann ich die Anforderung in der Entwicklerkonsole anzeigen, aber alle meine Anforderungen schlagen mit dem Status 404 fehl. Hat jemand eine Idee, warum das passieren könnte?
Peter_Fretter
1
Das funktioniert. Nahm dies von Github
frevib
1
Das funktioniert bei mir nicht. Ich benutze Android Emulator, und die Registerkarte Netzwerk zeigt leer, auch Anfragen werden gesendet
Ville Miekk-oja
19
Dies funktioniert nicht mehr, folgender Fehler in der Konsole (nicht sicher, welche Änderung dies verursacht hat):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)
Maxim Zubarev
1
Funktioniert auf meiner Seite mit React Native Debugger mit diesem Einzeiler-Setup. Vielen Dank, @tryangul
Kaloyan Kosev
85

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". Aktivieren von Network Inspect

Klicken Sie mit der rechten Maustaste und wählen Sie "Netzwerkinspektion aktivieren". Aktivieren von Network Inspect

Debuggen Sie weg! Netzwerkinspektion in Aktion

Kashish Grover
quelle
10
Wenn Sie überfliegen und diese Antwort sehen, müssen Sie mit der rechten Maustaste klicken, Enable Network Inspectdamit sie funktioniert. Standardmäßig ist dies nicht der Fall.
Stephen Saucier
@SamikshaJagtap Ich habe die Antwort bearbeitet.
Werfen
1
Das funktioniert super! Wird mein Leben so viel einfacher machen.
Augusto Samamé Barrientos
1
Wow, warum wird diese Funktion durch einen Rechtsklick auf das Hauptfenster ausgeblendet? Ich wusste nie, dass es das gibt. Game Changer. Json-Antworten wurden nicht angezeigt ... werden beim Umschalten sofort angezeigt. Vielen Dank!
Matt
1
Warum ist das nicht bekannter? 🤷‍♂️
Tom Mulkins
46

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:

Geben Sie hier die Bildbeschreibung ein

Auf der Registerkarte Netzwerk:

Geben Sie hier die Bildbeschreibung ein

Sankalp Singha
quelle
Das ist großartig! Vielen Dank
DJ Forth
An welchem ​​Punkt der ursprünglichen Anfrage wird dies ausgelöst? Ich denke tatsächlich darüber nach, dies als Mechanismus zum Auslösen von Aktualisierungstoken zu verwenden, wenn eine Antwort eine 401 hat. Gibt es ein Problem damit?
Tushar747
FANTASTISCHE Sankalp! Ich hatte Probleme, Reacotron zum Laufen zu bringen, ohne meinen Metro-Builder zum Absturz zu bringen. Ihre Lösung funktioniert hervorragend. Funktioniert sogar in React Native Debugger.
Mediaguru
Der Wert des Headers 'Access-Control-Allow-Origin' in der Antwort darf nicht der Platzhalter '*' sein, wenn der Anmeldeinformationsmodus der Anforderung 'include' ist. Origin ' localhost: 8081 ' ist daher kein Zugriff gestattet. Der Anmeldeinformationsmodus von Anforderungen, die von XMLHttpRequest initiiert wurden, wird durch das Attribut withCredentials gesteuert.
Nikhil Mahirrao
Genial. Vielen Dank
Mark
27

Ich verwende Reactotron zur Verfolgung von Netzwerkanfragen.

Geben Sie hier die Bildbeschreibung ein

Aung Myat Hein
quelle
3
Dies ist eigentlich die beste Lösung aus allen Antworten hier (für mich). Super einfach einzurichten und nicht alle Nebenwirkungen der Verwendung von Chrom
Blue Bot
Was sind die Nebenwirkungen der Verwendung von Chrom, über die Sie sich Sorgen machen? Reactotron verwendet das Chromium Embedded Framework.
Peter Evan Deal
genial !! Danke, du hast mir Tage der Suche über das
Alain
12

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

Jeb
quelle
Reactotron schien nur zu funktionieren, wenn Sie eine externe Bibliothek namens Apisauce verwendeten. Es funktioniert nicht für normales Abrufen. Wenn Sie also Anforderungen überwachen möchten, die von externen Bibliotheken in Ihrer App gesendet werden, ist Reaktotron nicht gut.
Ville Miekk-oja
1
@ VilleMiekk-oja In der Tat unterstützt Reaktotron Networking with Fetch seit März, es ist nur die Dokumentation war veraltet. Ich habe es selbst versucht und es in der Readme-
Datei
das funktioniert hervorragend; Ich habe so viele Probleme gesehen mit: GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
Petrogad
1
Reaktotron ist wirklich einfach zu konfigurieren und nützlich, um Netzwerkanrufe von reaktionsnativen Anwendungen zu verfolgen
Ram
9

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.

Lanan
quelle
Was ist eine Anfrage "gleichen Ursprungs" im Kontext von Anfragen, die von einer React Native-App gestellt werden? Eine, die sich in derselben Domäne wie der Debugger befindet (dh wahrscheinlich localhost)?
Mark Amery
In meinem Fall müssen Sie CORS in Chrome deaktivieren, damit es für Cross Origin funktioniert. Überprüfen Sie dieses Chrome-Plugin: chrome.google.com/webstore/detail/allow-control-allow-origi/…
Mouhamed Halloul
@MouhamedHalloul kannst du erklären, wie du dieses Plugin benutzt hast?
Alexmngn
@alexmngn hey, installiere einfach das Plugin und schalte es ein, indem du den Knopf drückst. Das Symbol sollte grün sein, wenn es eingeschaltet ist, und rot, wenn es ausgeschaltet ist. dropbox.com/s/242fflwgcew6m50/…
Mouhamed Halloul
5

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
mradziwon
quelle
5

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

Dawid Dereszewski
quelle
2

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

Ran Yefet
quelle
1
Ich habe es gerade mit Charles versucht und es scheint nur zu erfassen http://localhost:8081/index.android.bundle?platform=android&dev=true. Wie kann man ALLE Anfragen erfassen? (Ich
treffe
Verwendet Ihre externe API HTTPS? Wenn ja, müssen Sie Charles ein wenig konfigurieren, um diese ebenfalls zu erfassen.
Ran Yefet
Bei der Verwendung von Android kann es für Charles etwas problematisch sein, ausgehende Anfragen zu erfassen. Sie müssen Ihren Simulator manuell konfigurieren, um auf Charles zugreifen zu können (und als ich das letzte Mal versuchte, das Konfigurationsfenster aufzurufen, wurde der Job nicht ausgeführt - die Proxy-IP musste über eine Befehlszeileninstanziierung übergeben werden).
Joe
1

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.

React-Native-Network-Logger-Liste

React-Native-Network-Logger-Details

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.

Braza
quelle
Alter, diese Bibliothek ist großartig! Vielen Dank
Emidomenge
0

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.

Geben Sie hier die Bildbeschreibung ein

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ügenGeben Sie hier die Bildbeschreibung ein

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 .

Muhammed Ozdogan
quelle
-24

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

Pramod Mg
quelle