Як я можу переглядати мережеві запити (для налагодження) у 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, а також пояснення проблем безпеки, пов’язаних із цим?

Це те, що я використовував у точці входу мого додатка

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 працюватиме лише в тому випадку, якщо інструменти розробника відкриті і, таким чином, забезпечують XMLHttpRequest.

РЕДАГУВАТИ: Вам потрібно буде дозволити запити на перехресне походження, коли ви знаходитесь у режимі налагодження. З chrome ви можете використовувати цей зручний плагін .

EDIT: Прочитайте про випуск RN github, який привів мене до цього рішення

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

Погляньте на ці скріншоти.

Клацніть правою кнопкою миші та виберіть "Увімкнути перевірку мережі"

Клацніть правою кнопкою миші та виберіть "Увімкнути перевірку мережі"

Налагодження геть!

У своєму додатку я використовую наступне (додайте це у своєму головному файлі точки входу 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, видаливши polyfill, який React Native надає після імпорту React Native.

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

Це працювало у мене для запитів того самого походження. Не впевнений, чи потрібно вимикати CORS у Chrome, щоб він працював для перехресного походження.

Раніше я використовував GLOBAL.XMLHttpRequestхак для відстеження своїх запитів API, але іноді це дуже повільно і не працює для запитів на активи. Я вирішив використати Postman’s proxyфункцію для перевірки зв'язку HTTP, що виходить із телефону. Детальніше див. В офіційній документації , але в основному є три простих кроки:

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

Будьте обережні з цим кодом.

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

Це допомагає, і це чудово, але руйнує завантаження. Я витрачаю 2 дні, намагаючись зрозуміти, чому завантажені файли надсилають [object Object] замість реального файлу. Причиною є код вище.

Використовуйте його для звичайних дзвінків, а не для дзвінків із кількома частинами та з використанням даних

Я пропоную використовувати Чарльза для перевірки ваших мережевих запитів. Це дійсно добре, забезпечує більшу видимість і дозволяє робити просунуті речі.

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, де ви зможете побачити запит чи відповідь