Nie można połączyć się ze zdalnym debugerem

Używam React.JS i kiedy to robię react-native run-android(z podłączonym urządzeniem) widzę pustą stronę. Kiedy potrząsam urządzeniem i wybieram Debug JS Remotelyz listy opcji, widzę następujący ekran.

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

W moim przypadku problem polegał na tym, że emulator wysyłał żądanie do:

http://10.0.2.2:8081/debugger-ui

zamiast:

http://localhost:8081/debugger-ui i żądanie nie powiodło się.

Aby rozwiązać problem: przed włączeniem zdalnego debugowania w emulatorze otwórz http://localhost:8081/debugger-uiw przeglądarce Chrome. Następnie włącz zdalne debugowanie i wróć do strony chrome, na której powinny pojawić się dzienniki konsoli.

Rozwiązano następujący problem:

• Naciśnij Cmd + Mna ekranie emulatora
• Iść do Dev settings > Debug server host & port for device
• Zestaw localhost:8081
• Uruchom ponownie aplikację na Androida: react-native run-android

Debugger jest teraz podłączony!

Rozwiązałem to robiąc, adb reverse tcp:8081 tcp:8081a następnie reloadna telefonie.

W moim przypadku wybranie Debug JS Zdalnie uruchomiłem Chrome, ale nie połączyłem się z urządzeniem z Androidem. Zwykle nowa karta / okno Chrome miałoby adres URL debugowania wstępnie wypełniony na pasku adresu, ale w tym przypadku pasek adresu był pusty. Po upływie limitu czasu został wyświetlony komunikat o błędzie „Nie można połączyć się ze zdalnym debugerem”. Naprawiłem to za pomocą następującej procedury:

• Biegać adb reverse tcp:8081 tcp:8081
• Wklej http://localhost:8081/debugger-uiw pole adresu mojej przeglądarki Chrome. Powinieneś zobaczyć normalny ekran debugowania, ale Twoja aplikacja nadal nie będzie połączona.

To powinno rozwiązać problem. Jeśli nie, może być konieczne wykonanie następujących dodatkowych kroków:

• Zamknij i odinstaluj aplikację z urządzenia z systemem Android
• Zainstaluj ponownie aplikację za pomocą react-native run-android
• Włącz zdalne debugowanie w swojej aplikacji.
• Twoja aplikacja powinna być teraz połączona z debugerem.

Miałem podobny problem, który doprowadził mnie do tego pytania. W debugerze przeglądarki otrzymałem ten komunikat o błędzie:

Dostęp do pobierania pod adresem „ http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ” od źródła „ http://127.0.0.1:8081 ” został zablokowany przez zasady CORS: Nie „Kontrola dostępu -Allow-Origin 'nagłówek jest obecny w żądanym zasobie. Jeśli nieprzezroczysta odpowiedź spełnia Twoje potrzeby, ustaw tryb żądania na „brak elementów”, aby pobrać zasób z wyłączonym mechanizmem CORS.

Zajęło mi trochę czasu, zanim zdałem sobie sprawę, że 127.0.0.1:8081zamiast localhost:8081debuggera używam .

Aby to naprawić, musiałem po prostu zmienić Chrome z:

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

do

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

Upewnij się, że serwer węzła udostępniający pakiet działa w tle. Aby uruchomić, uruchom serwer, użyj npm startlub react-native starti pozostaw zakładkę otwartą podczas programowania

Mój przypadek jest taki, że kiedy stuknę włącz zdalne debugowanie JS, uruchomi Chrome, ale nie może się z nim połączyć.

Próbowałem biegać:

adb reverse tcp:8081 tcp:8081 

, zadziałało, ale nie zadziałało.

Całkowicie odinstalowałem swój chrome i zainstalowałem nowy. I to działa.

1. react-native start --reset-cache w jednej karcie i react-native run-android na innej
2. adb reverse tcp: 8081 tcp: 8081 (więc możesz dodać go do swoich skryptów i po prostu uruchomić przędzę run adb-reverse )
3. Jeśli używasz Androida, zamiast potrząsać telefonem, świetną wskazówką jest uruchomienie poleceń adb.

Możesz więc biegać:

• adb shell input keyevent 82 ( opcja menu )
• wejście powłoki adb keyevent 46 46 ( przeładuj )

W innych odpowiedziach brakowało mi jednego kluczowego kroku. W AndroidManifest.xml potrzebowałem dodać useCleartextTraffic:

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

Prawdopodobnie nie chcesz jednak zachować tego w wersji produkcyjnej swojej aplikacji, chyba że chcesz obsługiwać niezabezpieczone żądania HTTP.

Po dodaniu tego do mojego pliku AndroidManifest.xml, podążyłem za odpowiedzią Toma Arandy i emulator mógł wreszcie połączyć się z debugerem.

Zrobiłem odpowiedź @sajib i użyłem tego skryptu do przekierowania portów:

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

odinstaluj aplikację, a następnie uruchom React-native run-android. następnie kliknij debugowanie zakończ w chrome zamień http: // localhost: 8081 / debugger-ui / , zakończ uruchamianie react-native run-android. jeśli nadal się nie udało, spróbuj ponownie

Uwzględniając wszystkie imponujące odpowiedzi specjalnie Ribamar Santosudzielone przez doświadczonych programistów , jeśli nie udało Ci się zadziałać , musisz sprawdzić coś bardziej skomplikowanego!

Coś jak Airplane modetwój (emulowany) telefon! Lub twoja network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration), która może być zmanipulowana, aby nie wyrażać sieci! dla niektórych potrzeb emulacji!

Dzięki tej sztuczce rozwiązałem ten problem! Znalezienie tej dziury było zapierające dech w piersiach debugowanie!

w moim przypadku trzeba też zainstalować pakiet npm

więc

npm install react-native-debugger -g

Spróbuj to dodać

package.json

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

Zakończ wszystko.

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

Źródła: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917