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

c'est 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 renvoie la copie de XHR des outils de développement Chrome. Il est fourni par RN comme une trappe d'évacuation. La solution de Shvetusya ne fonctionnera que si les outils dev sont ouverts et fournissent ainsi XMLHttpRequest.

EDIT: vous devrez autoriser les requêtes cross origin en mode debugger. Avec chrome, vous pouvez utiliser ce plugin pratique.

EDIT: pour tout savoir sur la RN github question qui m'a conduit à cette solution

j'utilise la suite de mon application ( Ajouter ceci dans votre application principale.js point d'entrée de fichier ) :

// 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 est qu'il montre aussi l'extraction des journaux dans la console qui sont bien formatés.

Capture d'écran:

sous l'onglet Réseau:

je sais que c'est une vieille question, mais il y a une façon beaucoup plus sûre de le faire maintenant qui ne nécessite pas de désactiver les CORS ou de modifier le code source natif React. Vous pouvez utiliser une bibliothèque tierce appelée Reactotron qui non seulement suit les appels API (en utilisant le plugin réseau), mais peut également suivre votre magasin Redux, et Sagas avec des configuration:

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

j'ai pu déboguer mes requêtes dans Chrome en supprimant polyfill que React Native fournit après importation de React Native.

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

cela a fonctionné pour moi pour les mêmes demandes d'origine. Pas sûr si vous avez besoin de désactiver CORS dans Chrome pour le faire fonctionner pour cross origin.

j'utilise Reactron pour le suivi de la demande du réseau.

je suggère D'utiliser Charles pour inspecter vos requêtes réseau. Il est vraiment bon et fournir plus de visibilité et vous permet de faire des choses avancées.

http://charlesproxy.com

Dans le passé, j'ai utilisé GLOBAL.XMLHttpRequest hack pour suivre mes requêtes API mais parfois il est très lent et ne fonctionne pas pour les requêtes assets. J'ai décidé d'utiliser Postman’s proxy fonction pour inspecter la communication HTTP sortant du téléphone. Pour plus de détails regarder les documents officiels, mais fondamentalement, il existe trois étapes faciles:

• configurer le proxy dans Postier
• Vérifiez l'adresse IP de votre ordinateur($ ifconfig)
• configurer le mandataire HTTP sur votre appareil mobile dans les paramètres du wifi

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 il détruit le téléchargement. Je passe 2 jours à essayer de comprendre pourquoi les fichiers téléchargés envoient [object Object] au lieu du vrai fichier. La raison est un code ci-dessus.

Utilisez - le pour les appels réguliers mais pas pour les appels multipart/form-data

ajouter le débogueur dans le js où vous pouvez voir le req ou la réponse