Как я могу просматривать сетевые запросы (для отладки) в React Native?

Я хотел бы просматривать свои сетевые запросы в React Native, чтобы помочь мне отлаживать - в идеале - на вкладке «Сеть» в инструментах разработчика Chrome.

На GitHub есть несколько закрытых вопросов по этому поводу ( https://github.com/facebook/react-native/issues/4122 и https://github.com/facebook/react-native/issues/934 ), но я не Я их полностью понимаю. Похоже, мне нужно отменить некоторые полифилы React Native, а затем запустить некоторые команды с дополнительными флагами отладки и, возможно, изменить некоторые настройки безопасности Chrome? И, очевидно, при этом есть некоторые проблемы безопасности, которые могут сделать это ужасной идеей, но никто из участников потока явно не указал, что это такое.

Может ли кто-нибудь предоставить пошаговое руководство по настройке работы вкладки «Сеть» с React Native, а также объяснение связанных с этим проблем безопасности?

Я не уверен, почему до сих пор никто не указал на это решение. Используйте React Native Debugger - https://github.com/jhen0409/react-native-debugger ! На мой взгляд, это лучший инструмент отладки для React Native, и он дает возможность проверки сети прямо из коробки.

Взгляните на эти скриншоты.

Щелкните правой кнопкой мыши и выберите «Включить проверку сети».

Щелкните правой кнопкой мыши и выберите «Включить проверку сети».

Отладка прочь!

Это то, что я использовал в точке входа в свое приложение

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

XMLHttpRequest = _XHR

EDIT: frevib связан с более кратким синтаксисом ниже. Спасибо frevib!

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

Пояснение:

GLOBAL.originalXMLHttpRequestссылается на копию XHR в Chrome Dev Tools. Предусмотрен РН как аварийный люк. Решение Шветуся будет работать, только если инструменты разработчика открыты и, следовательно, предоставляют XMLHttpRequest.

РЕДАКТИРОВАТЬ: вам нужно будет разрешить запросы перекрестного происхождения в режиме отладчика. С хромом вы можете использовать этот удобный плагин .

РЕДАКТИРОВАТЬ: прочитайте о проблеме с RN github, которая привела меня к этому решению

Я использую в своем приложении следующее (добавьте это в свой основной файл точки входа 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;
  });
};

Лучше всего то, что он также показывает журналы выборки в консоли, которые хорошо отформатированы.

Скриншот:

На вкладке сети:

Я использую Reactotron для отслеживания сетевых запросов.

Я знаю, что это старый вопрос, но сейчас есть гораздо более безопасный способ сделать это, который не требует отключения CORS или изменения исходного кода React Native. Вы можете использовать стороннюю библиотеку под названием Reactotron, которая не только отслеживает вызовы API (с помощью сетевого плагина), но также может отслеживать ваш магазин Redux и Sagas с дополнительной настройкой:

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

Мне удалось отладить свои запросы в Chrome, удалив полифил, который React Native предоставляет после импорта React Native.

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

Это сработало для меня для запросов о том же происхождении. Не уверен, нужно ли вам отключить CORS в Chrome, чтобы он работал для перекрестного происхождения.

Раньше я использовал GLOBAL.XMLHttpRequestвзлом для отслеживания своих запросов API, но иногда он очень медленный и не работал с запросами ресурсов. Я решил использовать Postman’s proxyфункцию проверки HTTP-соединения, исходящего с телефона. Подробности смотрите в официальной документации , но в основном это три простых шага:

• Настроить прокси в Postman
• Проверьте IP-адрес вашего компьютера ( $ ifconfig)
• Настройте HTTP-прокси на мобильном устройстве в настройках Wi-Fi

Будьте осторожны с этим кодом.

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

Это помогает и здорово, но портит загрузку. Я потратил 2 дня, пытаясь понять, почему загруженные файлы отправляют [объект Object] вместо реального файла. Причина в приведенном выше коде.

Используйте его не для обычных вызовов, а для вызовов multipart / form-data

Я предлагаю использовать Charles для проверки ваших сетевых запросов. Это действительно хорошо, обеспечивает большую наглядность и позволяет делать сложные вещи.

http://charlesproxy.com

Если вы хотите отлаживать сетевые запросы в окончательной версии своего приложения, вы можете использовать библиотеку response-native-network-logger . Он позволяет отслеживать и просматривать сетевые запросы в приложении на настраиваемом экране отладки.

Затем вы можете поместить это за флаг сборки или сетевой флаг, чтобы отключить его для пользователей в производственном приложении.

Просто установите его, а yarn add react-native-network-loggerзатем добавьте это в точку входа вашего приложения:

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

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

И это на экране отладки:

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

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

Отказ от ответственности: я автор пакета.

Если у вас есть телефон или эмулятор Android,

• npx react-native start

Затем откройте Android Studio .

Откройте androidпапку вашего проекта как проект Android Studio.

Щелкните этот синий значок, это Android Profiler.

После запуска Android Profiler вы можете добавить свое приложение с помощью серого значка плюса рядом с SESSIONSметкой

Теперь вы можете проверить сеть с помощью этого инструмента. Вы можете видеть треугольники, которые показывают вашу сетевую активность.

Пожалуйста, проверьте это для получения дополнительной информации о проверке сетевого трафика .

Добавьте отладчик в js, где вы можете увидеть запрос или ответ