Не удается подключиться к удаленному отладчику

Я использую React.JS, и когда я react-native run-android (с подключенным устройством), я вижу пустую страницу. Когда я встряхиваю устройство и выбираю Debug JS Remotely из списка опций, я вижу следующий экран.

enter image description here

FYI:

OS: Ubuntu 16.04
Node version is: v4.6.2
java version "1.8.0_111"
react": "15.4.1
react-native": "0.38.0

Ответ 1

В моем случае проблема заключалась в том, что эмулятор делал запрос:

http://10.0.2.2:8081/debugger-ui

вместо:

http://localhost:8081/debugger-ui и запрос был неудачным.

Чтобы решить проблему: перед включением удаленной отладки на вашем эмуляторе откройте http://localhost:8081/debugger-ui в chrome. Затем включите удаленную отладку и вернитесь на страницу хрома, где вы увидите свои журналы консоли.

Ответ 2

Решил проблему следующим образом:

  • Нажмите Cmd + M на экране эмулятора
  • Перейти к Dev settings > Debug server host & port for device
  • Установите localhost:8081
  • Перезапустите приложение для Android: react-native run-android

Отладчик подключен сейчас!

Ответ 3

Я решил, что это сделать adb reverse tcp:8081 tcp:8081 а затем reload на моем телефоне.

Ответ 4

В моем случае, выбрав Debug JS удаленно запустил Chrome, но не подключился к устройству Android. Как правило, новая вкладка/окно Chrome содержит URL-адрес отладки, предварительно заполненный в адресной строке, но в этом случае адресная строка была пуста. После периода ожидания отобразилось сообщение об ошибке "Не удалось подключиться с удаленным отладчиком". Я исправил это следующим образом:

  • Запустить adb reverse tcp:8081 tcp:8081
  • Вставьте http://localhost:8081/debugger-ui в поле адреса моего браузера Chrome. Вы должны увидеть обычный экран отладки, но ваше приложение все равно не будет подключено.

Это должно решить проблему. В противном случае вам могут потребоваться следующие дополнительные шаги:

  • Закройте и удалите приложение с вашего устройства Android
  • Переустановите приложение с помощью react-native run-android
  • Включите удаленное отладочное приложение.
  • Теперь ваше приложение должно быть подключено к отладчику.

Ответ 5

У меня была похожая проблема, которая привела меня к этому вопросу. В моем браузере отладчик я получаю это сообщение об ошибке:

Доступ к выборке по адресу http://localhost: 8081/index.delta? Platform = android & dev = true & minify = false 'from origin' http://127.0.0.1:8081 'заблокирован политикой CORS: No' Access-Control Заголовок -Allow-Origin 'присутствует на запрашиваемом ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса "no-cors", чтобы получить ресурс с отключенным CORS.

Мне потребовалось некоторое время, чтобы понять, что я использую 127.0.0.1:8081 вместо localhost:8081 для моего отладчика.

Чтобы это исправить, мне просто пришлось сменить Chrome на:

http://127.0.0.1:8081/debugger-ui/

в

http://localhost:8081/debugger-ui/

Ответ 6

Убедитесь, что сервер узла для предоставления пакета запущен в фоновом режиме. Чтобы запустить запуск сервера, используйте npm start или react-native start и держите вкладку открытой во время разработки

Ответ 7

Мое дело в том, что при нажатии кнопки "Удаленная отладка JS" она запускает хром, но не может подключиться к нему.

Я попытался запустить:

adb reverse tcp:8081 tcp:8081 

но не работает.

Я полностью удалил свой хром и установил новый. И это работает.

Ответ 8

  1. реактивный запуск - сброс кеша в одной вкладке и реактивный запуск андроида в другой
  2. adb reverse tcp: 8081 tcp: 8081 (чтобы вы могли добавить его в свои скрипты и просто запустить yarn, запустить adb-reverse)
  3. Если вы используете Android, вместо встряхивания телефона отличный совет - запускать команды adb.

Таким образом, вы можете запустить:

  • KeyBevent 82 ввода оболочки adb (опция меню)
  • ввод ключа оболочки adb 46 46 (перезагрузка)

Ответ 9

Я сделал ответ @sajib s и использовал этот скрипт для перенаправления портов:

#!/usr/bin/env bash

# packager
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081

echo "🚧 React Native Packager Redirected 🚧"

Ответ 10

удалите приложение, а затем запустите реагирующую версию run-android. затем нажмите "Отладка" в "Chrome" и замените http://localhost: 8081/debugger-ui/, "завершить запуск" -реактивный запуск "android". если вам все еще не удалось, попробуйте еще раз

Ответ 11

Включая все впечатляющие ответы, которые предоставили опытные разработчики, особенно Ribamar Santos, если вы не получили его, вы должны проверить что-то более сложное!

Что-то вроде Airplane mode вашего (эмулированного) телефона! Или состояние вашей network status of Emulator (Data status and Voice status on Cellular tab of Emulator configuration), которым можно манипулировать, чтобы не выражать сеть! для некоторых нужд эмуляции!

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

Ответ 12

в моем случае это также нужно установить пакет npm

так

npm install react-native-debugger -g

Ответ 13

легко как это...

Шаг 01: откройте это в вашем браузере. По умолчанию появится отладчик.

HTTP://локальный: 8081/отладчик-щ/

Шаг 02: откройте ваш эмулятор Ctrl + M и выберите отладку js, и это автоматически подключит отладку RN

ты увидишь это

Статус: сеанс отладки № 0 активен

И хорошо идти

Ответ 14

Убедитесь, что вы случайно не нажали "Остановить отладку JS удаленно" на симуляторе. Если он говорит "отлаживать JS удаленно", когда вы открываете инструменты разработчика на своем эмуляторе, чем остановили его.