Como posso ver as solicitações de rede (para depuração) no React Native?

Gostaria de ver minhas solicitações de rede no React Native para me ajudar a depurar - de preferência na guia 'Rede' dos devtools do Chrome.

Existem alguns problemas fechados sobre isso no GitHub ( https://github.com/facebook/react-native/issues/4122 e https://github.com/facebook/react-native/issues/934 ), mas eu não t compreendê-los inteiramente. Parece que preciso desfazer alguns polyfills do React Native e, em seguida, executar alguns comandos com sinalizadores de depuração extras e talvez modificar algumas configurações de segurança do Chrome. E, aparentemente, há alguns problemas de segurança envolvidos em fazer isso que podem tornar uma ideia terrível, mas ninguém envolvido na discussão declarou explicitamente o que são.

Alguém poderia fornecer um guia passo a passo para fazer a guia Rede funcionar com o React Native, bem como uma explicação dos problemas de segurança envolvidos em fazê-lo?

Isso é o que estou usando no ponto de entrada do meu aplicativo

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

XMLHttpRequest = _XHR

EDIT: frevib vinculado à sintaxe mais concisa abaixo. Obrigado frevib!

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

Explicação:

GLOBAL.originalXMLHttpRequestrefere-se à cópia do Chrome Dev Tools de XHR. É fornecido pela RN como uma saída de emergência. A solução de Shvetusya só funcionará se as ferramentas de desenvolvimento estiverem abertas e, portanto, fornecendo XMLHttpRequest.

EDITAR: Você precisará permitir solicitações de origem cruzada quando estiver no modo de depuração. Com o Chrome, você pode usar este plugin útil .

EDIT: Leia sobre o problema do RN github que me levou a esta solução

Não sei por que ninguém apontou essa solução até agora. Use React Native Debugger - https://github.com/jhen0409/react-native-debugger ! É a melhor ferramenta de depuração para React Native na minha opinião e oferece Inspeção de Rede fora da caixa.

Dê uma olhada nessas imagens.

Clique com o botão direito e selecione 'Habilitar Inspeção de Rede'

Clique com o botão direito e selecione 'Habilitar Inspeção de Rede'

Depure!

Eu uso o seguinte em meu aplicativo (adicione isso em seu arquivo de ponto de entrada app.js principal):

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

A melhor coisa é que ele também mostra os logs de busca no console, que estão bem formatados.

Captura de tela:

Na guia rede:

Eu uso o Reactotron para rastrear solicitações de rede.

Eu sei que esta é uma pergunta antiga, mas há uma maneira muito mais segura de fazer isso agora que não requer a desativação do CORS ou a alteração do código-fonte do React Native. Você pode usar uma biblioteca de terceiros chamada Reactotron que não apenas rastreia chamadas de API (usando o plug-in de rede), mas também pode rastrear sua loja Redux e Sagas com configuração adicional:

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

Consegui depurar minhas solicitações no Chrome, excluindo polyfill que o React Native fornece após importar o React Native.

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

Isso funcionou para mim para solicitações da mesma origem. Não tenho certeza se você precisa desativar o CORS no Chrome para fazê-lo funcionar para origem cruzada.

No passado, usei o GLOBAL.XMLHttpRequesthack para rastrear minhas solicitações de API, mas às vezes é muito lento e não funcionava para solicitações de ativos. Decidi usar o Postman’s proxyrecurso para inspecionar a comunicação HTTP saindo do telefone. Para obter detalhes, consulte a documentação oficial , mas, basicamente, existem três etapas fáceis:

• Configure o proxy no Postman
• Verifique o endereço IP do seu computador ( $ ifconfig)
• Configure o proxy HTTP em seu dispositivo móvel nas configurações de wi-fi

Tenha cuidado com este código.

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

Ajuda e é ótimo, mas destrói o upload. Passei 2 dias tentando descobrir por que os arquivos carregados estão enviando [objeto Object] em vez do arquivo real. O motivo é um código acima.

Use-o para chamadas regulares, não mas para chamadas multipart / form-data

Eu sugiro usar Charles para inspecionar suas solicitações de rede. É realmente bom e fornece mais visibilidade e permite que você faça coisas avançadas.

http://charlesproxy.com

Se você deseja depurar solicitações de rede em uma versão de lançamento de seu aplicativo, pode usar a biblioteca react-native-network-logger . Ele permite monitorar e visualizar solicitações de rede dentro do aplicativo a partir de uma tela de depuração personalizada.

Você pode então colocar isso atrás de um sinalizador de construção ou um sinalizador de rede para desativá-lo para usuários no aplicativo de produção.

Basta instalá-lo com yarn add react-native-network-loggere adicionar no ponto de entrada do seu aplicativo:

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

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

E isso em uma tela de depuração:

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

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

Isenção de responsabilidade: eu sou o autor do pacote.

Se você tiver um telefone ou emulador Android,

• npx react-native start

Em seguida, abra o Android Studio .

Abra a androidpasta do seu projeto como um projeto do Android Studio.

Clique no ícone azul, que é o Android Profiler

Após o início do Android Profiler, você pode adicionar seu aplicativo por meio do ícone de adição cinza próximo ao SESSIONSrótulo

Agora você pode inspecionar a rede por meio desta ferramenta. Você pode ver triângulos que mostram sua atividade de rede.

Verifique isso para obter mais informações sobre como inspecionar o tráfego de rede .

Adicione Debugger no js onde você pode ver o req ou a resposta