Verbindung zum Remote-Debugger nicht möglich

149

Ich verwende React.JS und wenn ich dies tue react-native run-android(mit angeschlossenem Gerät), wird eine leere Seite angezeigt. Wenn ich das Gerät schüttle und Debug JS Remotelyaus der Optionsliste auswähle, wird der folgende Bildschirm angezeigt.

Geben Sie hier die Bildbeschreibung ein

Zu Ihrer Information:

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
splunk
quelle
1
Unter Android müssen Sie in einem separaten Fenster ausgeführt werden react-native start, um den Server zu starten.
Aleksandar Popovic
Was ist mit der Änderung: compile "com.facebook.react:react-native:+"im Kompilierungsabschnitt.
Satan Pandeya
Sie sollten "Debug" im Dev-Menü
aktivieren

Antworten:

280

In meinem Fall bestand das Problem darin, dass der Emulator eine Anfrage an folgende Adresse richtete:

http://10.0.2.2:8081/debugger-ui

anstatt:

http://localhost:8081/debugger-ui und die Anfrage schlug fehl.

So beheben Sie das Problem: Öffnen Sie Chrome, bevor Sie das Remote-Debugging auf Ihrem Emulator aktivierenhttp://localhost:8081/debugger-ui . Aktivieren Sie dann das Remote-Debugging und kehren Sie zur Chrome-Seite zurück, auf der Ihre Konsolenprotokolle angezeigt werden sollen.

DannyMoshe
quelle
1
hat für mich gearbeitet - danke! Haben Sie eine Möglichkeit gefunden, es so einzustellen, dass immer versucht wird, eine Verbindung zu localhost herzustellen, um zu vermeiden, dass zuerst die Chrome-Registerkarte geöffnet werden muss?
Izikandrw
26
Sie können in die Dev-Einstellungen (Strg + M) Ihres Emulators gehen und den Debug-Server in 'localhost: 8081' ändern.
Danny Moshe
Der letzte Absatz ist das einzige, was für mich funktioniert hat.
Pedro Otero
3
Danke dir. Wie wird es überhaupt auf 10.0.2.2 gesetzt?
Charlieb
3
Eine Anfrage an 'localhost' von Ihrem Emulator würde versuchen, auf den Loopback-Port des Emulators zuzugreifen, nicht auf Ihren PC (Sie möchten den Loopback Ihres PCs). Um dieses Problem zu beheben, erstellt Android den Alias ​​10.0.2.2, mit dem Sie auf Dienste zugreifen können, die auf Ihrem PC ausgeführt werden ( Referenz zu Dokumenten finden Sie unter developer.android.com/studio/run/emulator-networking ). Was den Grund betrifft, warum die Anfrage fehlschlägt, bin ich mir nicht sicher, aber es scheint, dass es sich um ein dokumentiertes Problem mit react / android handelt, siehe github.com/facebook/react-native/issues/17970 .
Danny Moshe
181

Das folgende Problem wurde behoben:

  • Drücken Sie Cmd + Mauf dem Emulatorbildschirm
  • Gehe zu Dev settings > Debug server host & port for device
  • einstellen localhost:8081
  • Führen Sie die Android-App erneut aus: react-native run-android

Debugger ist jetzt verbunden!

Sajib Khan
quelle
Für diejenigen unter Ihnen, die ein Problem mit der nicht funktionierenden CMD + M-Taste haben, habe ich './adb shell input keyevent 82' in der Shell verwendet, in der sich adb befindet, um es auszulösen. Die Tastenkombinationen begannen danach zu funktionieren!
Jeff L
SIE, Sir, sind eine blutige Legende. x
NewbieAid
Jetzt wird nur versucht, eine Verbindung zum Remote-Debugger
herzustellen
44

Ich habe es gelöst adb reverse tcp:8081 tcp:8081und dann reloadauf meinem Handy.

splunk
quelle
36

In meinem Fall wurde durch Auswahl von Debug JS Remote Chrome gestartet, aber keine Verbindung zum Android-Gerät hergestellt. Normalerweise wurde auf dem neuen Chrome-Tab / -Fenster die Debugging-URL in der Adressleiste vorab ausgefüllt, aber in diesem Fall war die Adressleiste leer. Nach Ablauf des Zeitlimits wurde die Fehlermeldung "Verbindung mit Remote-Debugger kann nicht hergestellt werden" angezeigt. Ich habe dies mit dem folgenden Verfahren behoben:

  • Lauf adb reverse tcp:8081 tcp:8081
  • Fügen Sie http://localhost:8081/debugger-uiin das Adressfeld meines Chrome - Browser. Sie sollten den normalen Debugging-Bildschirm sehen, aber Ihre App ist immer noch nicht verbunden.

Das sollte das Problem beheben. Wenn nicht, müssen Sie möglicherweise die folgenden zusätzlichen Schritte ausführen:

  • Schließen Sie die App und deinstallieren Sie sie von Ihrem Android-Gerät
  • Installieren Sie die App mit neu react-native run-android
  • Aktivieren Sie das Remote-Debugging in Ihrer App.
  • Ihre App sollte jetzt mit dem Debugger verbunden sein.
Tom Aranda
quelle
2
Tom ... danke! Vorher habe ich meine IP-Adresse festgelegt ("Dev Settings" -> "Debug Server Host for Device") xxxx: 8081
atreeon
11

Ich hatte ein ähnliches Problem, das mich zu dieser Frage führte. In meinem Browser-Debugger wurde folgende Fehlermeldung angezeigt:

Der Zugriff auf den Abruf unter ' http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ' vom Ursprung ' http://127.0.0.1:8081 ' wurde durch die CORS-Richtlinie blockiert: Keine 'Zugriffskontrolle - Der Header von Allow-Origin ist in der angeforderten Ressource vorhanden. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, setzen Sie den Anforderungsmodus auf "no-cors", um die Ressource mit deaktiviertem CORS abzurufen.

Es dauerte eine Weile, bis mir klar wurde, dass ich 127.0.0.1:8081anstelle localhost:8081meines Debuggers verwendete.

Um das Problem zu beheben, musste ich lediglich Chrome ändern von:

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

zu

http://localhost:8081/debugger-ui/
jchavannes
quelle
1
eigentlich war für mich das Gegenteil. In Wirklichkeit entspricht "localhost" normalerweise 127.0.0.1. Dies hängt davon ab, was für die Adresse als localhost festgelegt ist. Immer besser explizit zu sein
Carmine Tambascia
2

Stellen Sie sicher, dass der Knotenserver, der das Bundle bereitstellt, im Hintergrund ausgeführt wird. Um den Server zu starten, verwenden Sie npm startoder react-native startund lassen Sie die Registerkarte während der Entwicklung geöffnet

Chethan N.
quelle
1
Funktioniert immer noch nicht. Keines der beiden Terminals gibt mir Fehler zurück
Splunk
1
Führen Sie einen Proxyserver oder eine Proxysoftware wie Charles aus ... Stoppen Sie sie, falls vorhanden
Chethan N
Nein, ich verwende keinen Proxy
Splunk
2

Mein Fall ist, dass wenn ich auf Remote-JS-Debugging aktivieren tippe, Chrome gestartet wird, aber keine Verbindung hergestellt werden kann.

Ich habe versucht zu rennen:

adb reverse tcp:8081 tcp:8081 

hat aber nicht funktioniert.

Ich habe mein Chrome komplett deinstalliert und ein neues installiert. Und es funktioniert.

Steven Fang
quelle
1
  1. React-Native Start - Reset-Cache in einer Registerkarte und React -Native Run-Android in einer anderen
  2. adb reverse tcp: 8081 tcp: 8081 (damit Sie es zu Ihren Skripten hinzufügen und einfach Garn ausführen können adb-reverse ausführen )
  3. Wenn Sie Android verwenden, ist es ein guter Tipp, adb-Befehle auszuführen , anstatt Ihr Telefon zu schütteln .

So können Sie laufen:

  • adb shell Eingangs KeyEvent 82 ( Menüoption )
  • adb shell input keyevent 46 46 (neu laden )
Ribamar Santos
quelle
1

Bei den anderen Antworten fehlte mir ein entscheidender Schritt. In AndroidManifest.xml musste ich usedCleartextTraffic hinzufügen:

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

Sie möchten dies wahrscheinlich nicht in der Produktionsversion Ihrer App beibehalten, es sei denn, Sie möchten unsichere http-Anforderungen unterstützen.

Nachdem ich dies zu meiner AndroidManifest.xml hinzugefügt hatte, folgte ich Tom Arandas Antwort und der Emulator konnte endlich eine Verbindung zum Debugger herstellen.

Mitch Downey
quelle
0

Ich habe @sajibs Antwort gegeben und dieses Skript verwendet, um Ports umzuleiten:

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

Deinstallieren Sie Ihre Anwendung und führen Sie dann React-Native Run-Android aus. Klicken Sie dann auf Debugging-Ende in Chrome. Ersetzen Sie http: // localhost: 8081 / debugger-ui / und beenden Sie run react-native run-android. Wenn Sie es immer noch nicht geschafft haben, versuchen Sie es erneut

Muhyidin
quelle
0

Wenn Sie alle beeindruckenden Antworten der erfahrenen Entwickler Ribamar Santoserhalten haben, müssen Sie etwas Schwierigeres überprüfen, wenn Sie es nicht zum Laufen gebracht haben !

So etwas wie Airplane modevon deinem (emulierten) Telefon! Oder Ihr network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration), das manipuliert werden könnte, um das Netzwerk nicht auszudrücken! für einige Emulationsbedürfnisse!

Ich habe dieses Problem durch diesen Trick überwunden! Es war ein atemberaubendes Debugging, dieses Loch zu finden!

AbdolHosein
quelle
0

In meinem Fall muss auch das npm-Paket installiert werden

so

npm install react-native-debugger -g
Ehsan Sarshar
quelle