Impossible de se connecter avec le débogueur distant


149

J'utilise React.JS et quand je le fais react-native run-android(avec mon appareil branché), je vois une page vierge. Lorsque je secoue l'appareil et que je sélectionne Debug JS Remotelydans la liste d'options, l'écran suivant s'affiche.

entrez la description de l'image ici

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

1
Sur Android, vous devez exécuter dans une fenêtre séparée react-native startpour démarrer le serveur.
Aleksandar Popovic

Qu'en est-il de changer cela: compile "com.facebook.react:react-native:+"dans la section de compilation.
Satan Pandeya

vous devez activer "debug" dans le menu dev
UA_

Réponses:


280

Dans mon cas, le problème était que l'émulateur faisait une demande à:

http://10.0.2.2:8081/debugger-ui

au lieu de:

http://localhost:8081/debugger-ui et la demande a échoué.

Pour résoudre le problème: avant d'activer le débogage à distance sur votre émulateur , ouvrez http://localhost:8081/debugger-uidans Chrome. Ensuite, activez le débogage à distance et revenez à la page Chrome où vous devriez voir les journaux de votre console.


1
a travaillé pour moi - merci! avez-vous trouvé un moyen de le configurer pour qu'il essaie toujours de se connecter à localhost pour éviter d'avoir à ouvrir d'abord l'onglet Chrome?
izikandrw

26
Vous pouvez accéder aux paramètres de développement (Ctrl + M) sur votre émulateur et changer le serveur de débogage en 'localhost: 8081'.
DannyMoshe

Le dernier paragraphe est la seule chose qui a fonctionné pour moi.
Pedro Otero

3
Je vous remercie. Comment est-il réglé sur 10.0.2.2 en premier lieu?
charlieb

3
Une demande à 'localhost' faite à partir de votre émulateur essaierait d'accéder au port de bouclage sur l'émulateur, pas sur votre PC (vous voulez le bouclage de votre PC). Pour résoudre ce problème, Android crée l'alias 10.0.2.2 pour vous permettre d'accéder aux services exécutés sur votre PC (voir developer.android.com/studio/run/emulator-networking pour la documentation de référence). En ce qui concerne la raison pour laquelle la demande échoue, je ne suis pas sûr, mais il semble que ce soit un problème documenté avec react / android voir github.com/facebook/react-native/issues/17970 .
DannyMoshe

181

Résolution du problème suivant:

  • Appuyez Cmd + Msur l'écran de l'émulateur
  • Aller à Dev settings > Debug server host & port for device
  • Ensemble localhost:8081
  • Réexécutez l'application Android: react-native run-android

Le débogueur est maintenant connecté!


Pour ceux d'entre vous qui ont un problème avec le bouton CMD + M qui ne fonctionne pas, j'ai utilisé './adb shell input keyevent 82' dans le shell où se trouve adb pour le déclencher. Les touches de raccourci ont commencé à fonctionner après cela!
Jeff L

VOUS, monsieur, êtes une légende sanglante. x
NewbieAid

Maintenant, il essaie juste de se connecter au débogueur distant ... pour l'éternité
Fakebounce

44

Je l'ai résolu en faisant adb reverse tcp:8081 tcp:8081et ensuite reloadsur mon téléphone.


36

Dans mon cas, la sélection de Déboguer JS a lancé Chrome à distance , mais ne s'est pas connecté à l'appareil Android. Normalement, le nouvel onglet / fenêtre Chrome aurait l'URL de débogage pré-remplie dans la barre d'adresse, mais dans ce cas, la barre d'adresse était vide. Après le délai d'expiration, le message d'erreur «Impossible de se connecter avec le débogueur distant» était affiché. J'ai corrigé cela avec la procédure suivante:

  • Courir adb reverse tcp:8081 tcp:8081
  • Collez http://localhost:8081/debugger-uidans le champ d'adresse de mon navigateur Chrome. Vous devriez voir l'écran de débogage normal mais votre application ne sera toujours pas connectée.

Cela devrait régler le problème. Sinon, vous devrez peut-être suivre les étapes supplémentaires suivantes:

  • Fermez et désinstallez l'application de votre appareil Android
  • Réinstallez l'application avec react-native run-android
  • Activez le débogage à distance sur votre application.
  • Votre application doit maintenant être connectée au débogueur.

2
Tom ... merci! Avant cela, j'ai défini mon adresse IP ("Dev Settings" -> "Debug server host for device") xxxx: 8081
atreeon

11

J'ai eu un problème similaire qui m'a conduit à cette question. Dans mon débogueur de navigateur, je recevais ce message d'erreur:

L'accès à la récupération à ' http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ' from origin ' http://127.0.0.1:8081 ' a été bloqué par la stratégie CORS: Non 'Access-Control L'en-tête -Allow-Origin 'est présent sur la ressource demandée. Si une réponse opaque répond à vos besoins, définissez le mode de la requête sur «no-cors» pour récupérer la ressource avec CORS désactivé.

Il m'a fallu un certain temps pour réaliser que j'utilisais 127.0.0.1:8081au lieu de localhost:8081pour mon débogueur.

Pour résoudre ce problème, j'ai simplement dû changer Chrome de:

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

à

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

1
en fait pour moi, c'était le contraire. Mais en réalité, "localhost" équivaut généralement à 127.0.0.1. Cela dépend de ce qui est défini pour l'adresse comme hôte local. Il vaut toujours mieux être explicite
Carmine Tambascia

2

Assurez-vous que le serveur de nœuds qui fournit le bundle s'exécute en arrière-plan. Pour exécuter, démarrez le serveur, utilisez npm startou react-native startet gardez l'onglet ouvert pendant le développement


1
Ça ne marche toujours pas. Aucun des deux terminaux ne me renvoie d'erreurs
Splunk


Non, je
n'utilise

2

Mon cas est que lorsque j'appuie sur activer le débogage JS à distance, il lance Chrome, mais ne peut pas s'y connecter.

J'ai essayé de courir:

adb reverse tcp:8081 tcp:8081 

, n'a pas fonctionné.

J'ai complètement désinstallé mon chrome et j'en ai installé un nouveau. Et il fonctionne.


1
  1. react-native start - réinitialiser le cache dans un onglet et react-native run-android dans un autre
  2. adb reverse tcp: 8081 tcp: 8081 (vous pouvez donc l'ajouter à vos scripts et simplement exécuter yarn run adb-reverse )
  3. Si vous utilisez Android, au lieu de secouer votre téléphone, un bon conseil est d'exécuter des commandes adb.

Ainsi, vous pouvez exécuter:

  • keyevent d'entrée du shell adb 82 ( option de menu )
  • keyevent d'entrée du shell adb 46 46 ( recharger )

1

Les autres réponses ici manquaient une étape cruciale pour moi. Dans AndroidManifest.xml, j'avais besoin d'ajouter des utilisationsCleartextTraffic:

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

Cependant, vous ne souhaitez probablement pas conserver cela dans la version de production de votre application, sauf si vous souhaitez prendre en charge les requêtes http non sécurisées.

Après avoir ajouté cela à mon AndroidManifest.xml, j'ai suivi la réponse de Tom Aranda et l'émulateur a finalement pu se connecter au débogueur.


0

J'ai répondu à @sajib et utilisé ce script pour rediriger les ports:

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

0

désinstallez votre application, puis exécutez react-native run-android. puis cliquez sur fin de débogage dans chrome remplacez http: // localhost: 8081 / debugger-ui / , terminez l'exécution de react-native run-android. si vous n'avez toujours pas réussi, réessayez


0

En incluant toutes les réponses impressionnantes des développeurs experts spécialement Ribamar Santosfournis, si vous ne l'avez pas fait fonctionner, vous devez vérifier quelque chose de plus délicat!

Quelque chose comme Airplane modevotre téléphone (émulé)! Ou votre network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration) qui pourrait être manipulé pour ne pas exprimer de réseau! pour certains besoins d'émulation!

J'ai surmonté ce problème par cette astuce! C'était un débogage un peu époustouflant de trouver ce trou!


0

dans mon cas, il faut également installer son package npm

alors

npm install react-native-debugger -g

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.