web-dev-qa-db-fra.com

Comment voir les requêtes réseau (pour le débogage) dans React Native?

J'aimerais visualiser mes requêtes réseau dans React Native pour m'aider à déboguer - idéalement dans l'onglet "Réseau" de l'outil de développement de Chrome.

Il y a quelques problèmes résolus à ce sujet sur GitHub ( https://github.com/facebook/react-native/issues/4122 et https://github.com/facebook/react -native/issues/934 ) mais je ne les comprends pas tout à fait. Il semblerait que j’ai besoin d’annuler une partie de React Polyfills de Native, puis d’exécuter des commandes avec des indicateurs de débogage supplémentaires et éventuellement de modifier certains paramètres de sécurité Chrome? Et, apparemment, certains problèmes de sécurité liés à cette opération pourraient en faire une idée terrible, mais aucun des acteurs impliqués dans le fil n’a explicitement déclaré ce qu’ils étaient.

Quelqu'un pourrait-il fournir un guide étape par étape pour que l'onglet Réseau fonctionne avec React Native, ainsi qu'une explication des problèmes de sécurité qui y sont associés?

javascriptgoogle-chrome-devtoolsreact-native
67
Mark Amery

Voici ce que j'ai utilisé dans le point d'entrée de mon application

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

XMLHttpRequest = _XHR

EDIT: frevib lié à une syntaxe plus concise ci-dessous. Merci Frevib!

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

Explication:

GLOBAL.originalXMLHttpRequest fait référence à la Chrome Outils de développement de XHR. Elle est fournie par RN sous forme de trappe d’échappement. La solution de Shvetusya ne fonctionnera que si les outils de développement sont ouverts et fournissent ainsi XMLHttpRequest.

EDIT: Vous devez autoriser les demandes d’origine croisée en mode débogueur. Avec chrome vous pouvez utiliser ce plugin pratique .

EDIT: Lisez à propos du problème RN github qui m'a conduit à cette solution

82
tryangul

J'utilise les éléments suivants dans mon application (ajoutez ceci dans votre fichier de point d'entrée principal 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;
  });
};

La meilleure chose à faire est qu’il affiche également les journaux d’extraction dans la console, qui sont bien formatés.

Capture d'écran:

enter image description here

Sur l'onglet réseau:

enter image description here

37
Sankalp Singha

J'utilise Reactotron pour suivre la demande du réseau.

enter image description here

18
Aung Myat Hein

Je sais que c’est une vieille question, mais il existe un moyen beaucoup plus sûr de le faire qui ne nécessite pas de désactiver CORS ni de modifier le code source React). Vous pouvez utiliser une bibliothèque tierce appelée Reactotron. qui suit non seulement les appels d'API (à l'aide du plugin réseau), mais aussi le suivi de votre magasin Redux et de Sagas avec une configuration supplémentaire:

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

12
T Stone

Je ne suis pas sûr de savoir pourquoi personne n'a signalé cette solution jusqu'à présent. Utilisez React Native Debugger - https://github.com/jhen0409/react-native-debugger ! C’est le meilleur outil de débogage pour React Natif à mon avis et cela donne l’inspection du réseau hors de la boîte.

Jetez un coup d'œil à ces captures d'écran.

Faites un clic droit et sélectionnez "Activer Network Inspect" Enabling Network Inspect

Faites un clic droit et sélectionnez "Activer Network Inspect" Enabling Network Inspect

Déboguer! Network Inspect in action

10
Kashish Grover

J'ai pu déboguer mes demandes dans Chrome en supprimant polyfill que React Native fournit après l'importation React Native.

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

Cela a fonctionné pour moi pour les mêmes demandes d'origine. Vous ne savez pas si vous devez désactiver CORS dans Chrome pour que cela fonctionne avec cross Origin.

6
lanan

Dans le passé, j'ai utilisé GLOBAL.XMLHttpRequest hack pour suivre mes requêtes d'API mais parfois c'est très lent et cela ne fonctionnait pas pour les requêtes d'actifs. J'ai décidé d'utiliser Postman’s proxy fonction pour inspecter les communications HTTP sortant du téléphone. Pour plus de détails, regardez documentation officielle , mais, en gros, il y a trois étapes faciles:

  • Configurer le proxy dans Postman
  • Vérifiez l’adresse IP de votre ordinateur ($ ifconfig)
  • Configurez le proxy HTTP sur votre appareil mobile dans les paramètres wifi
5
mradziwon

S'il vous plaît soyez prudent avec ce code.

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

Ça aide et c'est génial mais ça détruit le téléchargement. Je passe 2 jours à essayer de comprendre pourquoi les fichiers téléchargés envoient [objet Objet] au lieu du fichier réel. La raison est un code ci-dessus.

Utilisez-le pour les appels normaux, mais pas pour les appels multipart/form-data

3
Dawid Dereszewski

Je suggère d'utiliser Charles pour inspecter vos demandes de réseau. C'est vraiment bon et donne plus de visibilité et vous permet de faire des choses avancées.

http://charlesproxy.com

2
Ran Yefet