Невозможно соединиться с удаленным отладчиком

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

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

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

http://10.0.2.2:8081/debugger-ui

вместо того:

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

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

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

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

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

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

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

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

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

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

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

Доступ к выборке по адресу 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/

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

Мой случай, когда я нажимаю включить удаленную отладку JS, он запускает Chrome, но не может подключиться к нему.

Я пытался бежать:

adb reverse tcp:8081 tcp:8081 

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

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

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

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

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

Другие ответы здесь упустили один важный шаг для меня. В AndroidManifest.xml мне нужно было добавить useCleartextTraffic:

    <application
      ...
      android:usesCleartextTraffic="true">

Вы, вероятно, не хотите оставлять это в производственной версии своего приложения, если только вы не хотите поддерживать небезопасные запросы http.

После того, как я добавил это в свой AndroidManifest.xml, я последовал ответу Тома Аранда, и эмулятор наконец смог подключиться к отладчику.

Я сделал ответ @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 🚧"

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

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

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

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

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

так

npm install react-native-debugger -g

Попробуйте добавить это

package.json

devDependencies: {
//...    
    "@react-native-community/cli-debugger-ui": "4.7.0"
}

Прекратить все.

• npm install
• npx react-native start
• npx react-native run-android

Ссылка: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917