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

Question

Ich möchte meine Netzwerkanforderungen in React Native anzeigen, um beim Debuggen zu helfen - am besten auf der Registerkarte "Netzwerk" der Chrome-Devtools.

Es gibt einige geschlossene Fragen dazu auf GitHub (https://github.com/facebook/react-native/issues/4122 und https://github.com/facebook/react-native/issues/934), aber ich verstehe sie nicht vollständig. Es klingt, als müsste ich einige der Polyfills von React Native rückgängig machen und dann einige Befehle mit zusätzlichen Debug-Flags ausführen und vielleicht einige Chrome-Sicherheitseinstellungen ändern? Und anscheinend gibt es einige Sicherheitsprobleme, die dabei eine schreckliche Idee machen könnten, aber niemand, der in den Thread involviert ist, hat explizit gesagt, was sie sind.

Könnte jemand eine Schritt-für-Schritt-Anleitung für die Arbeit mit der Registerkarte "Netzwerk" auf der Registerkarte "Netzwerk" bereitstellen und eine Erläuterung der damit verbundenen Sicherheitsprobleme geben?

Answer 1

Add Debugger in den js, wo Sie die erf oder Antwort sehen

Answer 2

ich in der Lage war, meine Wünsche in Chrome zu debuggen, indem polyfill löschen, die Mutter Reaktion liefert nach india Reagieren importieren.

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

Dies funktionierte für mich für die gleichen Ursprungsanforderungen. Ich bin mir nicht sicher, ob Sie CORS in Chrome deaktivieren müssen, damit es für den Ursprung funktioniert.

Answer 3

Ich schlage vor, mit Charles Ihre Netzwerkanforderungen zu überprüfen. Es ist wirklich gut und bietet mehr Sichtbarkeit und ermöglicht es Ihnen, erweiterte Sachen zu tun.

http://charlesproxy.com

Answer 4

Dies ist, was ich habe in der Einstiegspunkt meiner App

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

XMLHttpRequest = _XHR 

EDIT: unter frevib verknüpft kürzere Syntax. Danke frevib!

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

Erläuterung:

GLOBAL.originalXMLHttpRequest bezieht sich die die Chrome Dev-Tools von XHR kopieren. Es wird von RN als Notluke zur Verfügung gestellt. Shvetusyas Lösung funktioniert nur, wenn die Dev-Tools geöffnet sind und somit XMLHttpRequest bereitstellen.

BEARBEITEN: Im Debugger-Modus müssen Sie Cross-Ursprungsanforderungen zulassen. Mit Chrom können Sie this handy plugin verwenden.

EDIT: Read about the RN github issue, die mich zu dieser Lösung führen

Answer 5

ich folgend in meiner app (Fügen Sie diese in Ihrer Haupt-app.js Einstiegspunkt Datei):

// 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 Es zeigt auch die Fetch-Protokolle in der Konsole, die gut formatiert sind.

Screenshot:

auf dem Registerkarte Netzwerk:

Answer 6

Ich weiß, dass dies eine alte Frage, aber es gibt einen viel sichereren Weg, dies jetzt zu tun, dass nicht den Fall ist erfordert, CORS zu deaktivieren oder den Quellcode von React Native zu ändern. Sie können eine Dritte Bibliothek Reactotron genannt verwenden, das nicht nur API-Aufrufe verfolgt (die Netzwerk-Plugin), sondern auch Ihre Redux speichern und Sagas mit zusätzlichen Setup verfolgen:

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

Answer 7

In der Vergangenheit Ich habe GLOBAL.XMLHttpRequest Hack verwendet, um meine API-Anfragen zu verfolgen, aber manchmal ist es sehr langsam und funktionierte nicht für Assets Anfragen. Ich entschied mich, Postman’s proxy Funktion zu verwenden, um die HTTP-Kommunikation zu überprüfen, die vom Telefon ausgeht. Für Details sehen Sie die official documentation, aber im Grunde gibt es drei einfache Schritte:

• den Proxy in Postman
• Ihren Computer überprüfen IP-Adresse einrichten ($ ifconfig)
• Konfigurieren von HTTP-Proxy auf Ihrem Mobilgerät in WLAN-Einstellungen

Answer 8

Bitte seien Sie vorsichtig mit diesem Code.

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

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

Verwenden Sie es für normale Anrufe nicht aber für multipart/form-data ruft