Jak mogę wyświetlać żądania sieciowe (do debugowania) w React Native?

Chciałbym przeglądać moje żądania sieciowe w React Native, aby pomóc mi w debugowaniu - najlepiej w zakładce „Sieć” w Devtools Chrome.

Jest kilka zamkniętych problemów na ten temat w GitHub ( https://github.com/facebook/react-native/issues/4122 i https://github.com/facebook/react-native/issues/934 ), ale nie robię tego całkowicie je rozumiem. Wygląda na to, że muszę cofnąć niektóre polyfills React Native, a następnie uruchomić kilka poleceń z dodatkowymi flagami debugowania i może zmodyfikować niektóre ustawienia zabezpieczeń Chrome? I najwyraźniej wiąże się to z pewnymi kwestiami bezpieczeństwa, które mogą sprawić, że będzie to okropny pomysł, ale nikt zaangażowany w ten wątek wyraźnie nie określił, czym one są.

Czy ktoś mógłby podać przewodnik krok po kroku, jak uruchomić kartę Sieć w React Native, a także wyjaśnić związane z tym kwestie bezpieczeństwa?

Nie jestem pewien, dlaczego nikt do tej pory nie wskazał na to rozwiązanie. Użyj React Native Debugger - https://github.com/jhen0409/react-native-debugger ! Moim zdaniem jest to najlepsze narzędzie do debugowania React Native i zapewnia inspekcję sieci po wyjęciu z pudełka.

Spójrz na te zrzuty ekranu.

Kliknij prawym przyciskiem myszy i wybierz „Włącz inspekcję sieci”

Kliknij prawym przyciskiem myszy i wybierz „Włącz inspekcję sieci”

Debuguj!

To jest to, czego używałem w punkcie wejścia mojej aplikacji

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

XMLHttpRequest = _XHR

EDYCJA: frevib połączony z bardziej zwięzłą składnią poniżej. Dzięki frevib!

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

Wyjaśnienie:

GLOBAL.originalXMLHttpRequestodnosi się do kopii XHR w Chrome Dev Tools. Jest dostarczany przez RN jako właz ratunkowy. Rozwiązanie Shvetusya będzie działać tylko wtedy, gdy narzędzia programistyczne są otwarte, a tym samym zapewniają XMLHttpRequest.

EDYCJA: Musisz zezwolić na żądania między źródłami w trybie debugera. W Chrome możesz użyć tej przydatnej wtyczki .

EDYCJA: Przeczytaj o problemie z RN na githubie, który doprowadził mnie do tego rozwiązania

W mojej aplikacji używam następujących elementów (dodaj to w głównym pliku punktu wejścia app.js):

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

Najlepsze jest to, że pokazuje również dzienniki pobierania w konsoli, które są dobrze sformatowane.

Zrzut ekranu:

Na karcie sieci:

Używam Reactotron do śledzenia żądań sieciowych.

Wiem, że to stare pytanie, ale teraz jest o wiele bezpieczniejszy sposób, aby to zrobić, który nie wymaga wyłączania CORS lub zmiany kodu źródłowego React Native. Możesz użyć biblioteki innej firmy o nazwie Reactotron, która nie tylko śledzi wywołania API (za pomocą wtyczki sieciowej), ale także może śledzić Twój sklep Redux i Sagas z dodatkową konfiguracją:

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

Udało mi się debugować moje żądania w Chrome, usuwając polyfill, który zapewnia React Native po zaimportowaniu React Native.

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

To zadziałało dla mnie dla tych samych żądań pochodzenia. Nie jestem pewien, czy musisz wyłączyć CORS w Chrome, aby działał dla różnych źródeł.

W przeszłości używałem GLOBAL.XMLHttpRequesthacka do śledzenia moich żądań API, ale czasami jest to bardzo powolne i nie działa w przypadku żądań zasobów. Postanowiłem użyć Postman’s proxyfunkcji do sprawdzenia komunikacji HTTP wychodzącej z telefonu. Aby uzyskać szczegółowe informacje, zapoznaj się z oficjalną dokumentacją , ale zasadniczo są trzy proste kroki:

• Skonfiguruj serwer proxy w programie Postman
• Sprawdź adres IP swojego komputera ( $ ifconfig)
• Skonfiguruj serwer proxy HTTP na swoim urządzeniu mobilnym w ustawieniach Wi-Fi

Uważaj na ten kod.

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

Pomaga i jest świetny, ale niszczy przesyłanie. Spędziłem 2 dni próbując dowiedzieć się, dlaczego przesłane pliki wysyłają [obiekt obiektu] zamiast prawdziwego pliku. Powodem jest powyższy kod.

Używaj go nie do zwykłych połączeń, ale do połączeń typu multipart / form-data

Proponuję użyć Charlesa do sprawdzenia żądań sieciowych. Jest naprawdę dobry i zapewnia lepszą widoczność i pozwala robić zaawansowane rzeczy.

http://charlesproxy.com

Jeśli chcesz debugować żądania sieciowe w wydanej wersji swojej aplikacji, możesz użyć biblioteki React-native-network-logger . Umożliwia monitorowanie i przeglądanie żądań sieciowych w aplikacji z niestandardowego ekranu debugowania.

Następnie możesz umieścić to za flagą kompilacji lub flagą sieci, aby wyłączyć ją dla użytkowników w aplikacji produkcyjnej.

Po prostu zainstaluj go za pomocą, yarn add react-native-network-loggera następnie dodaj to w punkcie wejścia swojej aplikacji:

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

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

A to na ekranie debugowania:

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

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

Zastrzeżenie: jestem autorem pakietu.

Jeśli masz telefon z Androidem lub emulator,

• npx react-native start

Następnie otwórz Android Studio .

Otwórz androidfolder swojego projektu jako projekt Android Studio.

Kliknij tę niebieską ikonę, która jest Android Profiler

Po uruchomieniu programu Android Profiler możesz dodać swoją aplikację za pomocą szarej ikony plusa obok SESSIONSetykiety

Teraz możesz sprawdzić sieć za pomocą tego narzędzia. Możesz zobaczyć trójkąty, które pokazują Twoją aktywność w sieci.

Sprawdź to, aby uzyskać więcej informacji na temat sprawdzania ruchu sieciowego .

Dodaj Debugger w js, gdzie możesz zobaczyć żądanie lub odpowiedź