Verbindung zum Remote-Debugger nicht möglich

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.

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

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.

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!

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

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.

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/

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

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.

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 )

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.

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 🚧"

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

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!

In meinem Fall muss auch das npm-Paket installiert werden

so

npm install react-native-debugger -g

Versuchen Sie dies hinzuzufügen

package.json

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

Beende alles.

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

Referenz: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917