Не вдається підключитися до віддаленого налагоджувача

Я використовую 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в хромі. Потім увімкніть віддалену налагодження і поверніться до хромованої сторінки, де ви повинні побачити журнали консолі.

Вирішено проблему наступним чином:

• Натисніть 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: Ні '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, він запустить хром, але не може підключитися до нього.

Я спробував запустити:

adb reverse tcp:8081 tcp:8081 

, зробив, але не працював.

Я повністю видалив хром і встановив новий. І це працює.

1. react-native start - reset-кеш в одній вкладці та react -native run-android в іншій
2. adb reverse tcp: 8081 tcp: 8081 (щоб ви могли додати його до своїх сценаріїв і просто запустити пряжу за допомогою adb-reverse )
3. Якщо ви використовуєте android, замість того, щоб трясти телефон, чудовим підказом є виконання команд adb.

Отже, ви можете запустити:

• ключ вводу adb shellevent 82 ( опція меню )
• ключ введення adb shell 46 46 ( перезавантажити )

Інші відповіді тут бракували одного важливого для мене кроку. У AndroidManifest.xml мені потрібно було додати useCleartextTraffic:

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

Напевно, ви не хочете зберігати це у виробничій версії свого додатка, якщо ви не хочете підтримувати незахищені http-запити.

Після того, як я додав це до свого AndroidManifest.xml, я слідував за відповіддю Тома Аранда, і емулятор нарешті зміг підключитися до налагоджувача.

Я відповів @sajib і використав цей скрипт для перенаправлення портів:

#!/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 🚧"

видаліть додаток, а потім запустіть натиснутої на Android-реакторі запуск. потім натисніть кінець налагодження в chrome замінити http: // localhost: 8081 / debugger-ui / , end run reakct -native run-android. якщо вам все-таки не вдалося спробувати ще раз

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

Щось на зразок Airplane modeвашого (емульованого) телефону! Або ваш 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/isissue/1081#issuecomment-614223917