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

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

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

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

Ответ 1

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

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. Он предоставляется RN в качестве выходного люка. Решение Shvetusya будет работать только в том случае, если инструменты dev открыты и, таким образом, обеспечивают XMLHttpRequest.

EDIT: вам нужно разрешить запросы на кросс-начало в режиме отладки. С хром вы можете использовать этот удобный плагин.

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

Ответ 2

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

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

Снимок экрана:

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

Посмотрите на эти скриншоты.

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

Пожалуйста, будьте осторожны с этим кодом.

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

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

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

Ответ 9

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

http://charlesproxy.com

Ответ 10

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