Просмотр сетевого трафика с помощью встроенного отладчика React

Я разрабатываю приложение React Native, используя приложение create-react-native-app (так, Expo), тестирую на реальном устройстве с использованием моего сетевого IP-адреса (192.xxx.xxx.xxx). Мне удалось запустить и отладить response-native-debugger удаленно. Он открывает rn-debugger, redux devtools и chrome devtools в 3 отдельных окнах.

Мой вопрос: можно ли увидеть эквивалент вкладки сети из инструментов разработчика Chrome, чтобы показать весь сетевой трафик, входящий и исходящий из приложения (например, когда мое приложение выполняет вызовы API с помощью Axios)?

Фактическая сетевая вкладка в окне инструментов разработчика Chrome, по-видимому, просто показывает сетевой трафик между отладчиком и приложением, запущенным на локальном устройстве, поэтому он просто показывает материал веб-сокета, который использует отладчик, а не сетевой трафик моего приложения.

Чтобы обойти это, я мог просто выполнять множество журналов в консоли при выполнении запросов, но как веб-разработчик я привык видеть все заголовки, json, тайминги и т. Д. В удобном виде.


person jonhobbs    schedule 07.09.2018    source источник


Ответы (2)


Хорошо, я нашел ответ в документации RND здесь, поэтому я собираюсь ответить на свой вопрос.

https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md.

Там много кода, но я понял, что вам не нужно ничего делать, кроме как щелкнуть правой кнопкой мыши в отладчике и выбрать «Включить проверку сети», как подробно описано на этой странице:

https://github.com/jhen0409/react-native-debugger/blob/master/docs/shortcut-references.md

person jonhobbs    schedule 07.09.2018

Что ж, позвольте мне предложить вам reactotron - полезный инструмент для проверки сетевого трафика или событий из собственного приложения React. .

person julian salas    schedule 07.09.2018
comment
Я только что читал об этом, потому что мой следующий шаг - попытаться ввести логин для redux-saga - person jonhobbs; 07.09.2018