web-dev-qa-db-fra.com

Impossible de se connecter avec le débogueur distant

J'utilise React.JS et quand je 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 Remotely dans la liste des options, l'écran suivant apparaît.

 enter image description here

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
androidreactjsreact-native
110
splunk

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

http://10.0.2.2:8081/debugger-ui 

au lieu de:

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

Pour résoudre le problème: Avant d'activer le débogage distant sur votre émulateur , ouvrez http://localhost:8081/debugger-ui en chrome. Activez ensuite le débogage à distance et revenez à la page chrome où vous devriez voir les journaux de votre console.

236
DannyMoshe

Résolu le problème pour moi suivant:

  • Appuyez sur Cmd + M sur l'écran de l'émulateur
  • Aller au Dev settings > Debug server Host & port for device
  • Définir localhost:8081
  • Relancez l'application Android: react-native run-Android

Le débogueur est connecté maintenant!

137
Sajib Khan

Je l'ai résolu en faisant adb reverse tcp:8081 tcp:8081 puis reload sur mon téléphone. 

35
splunk

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

  • Exécuter adb reverse tcp:8081 tcp:8081
  • Collez http://localhost:8081/debugger-ui dans 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ésoudre 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
  • Activer le débogage à distance sur votre application.
  • Votre application devrait maintenant être connectée au débogueur.
28
Tom Aranda

J'ai eu un problème similaire qui m'a amené à cette question. Dans le débogueur de mon navigateur, le message d'erreur suivant s'affiche:

Accès à chercher à ' http: // localhost: 8081/index.delta? Platform = Android & dev = true & minify = false ' from Origin ' http://127.0.0.1:8081 ' a été bloqué par Stratégie CORS: Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Si une réponse opaque répond à vos besoins, définissez le mode de la demande sur "No-cors" pour extraire la ressource avec CORS désactivé.

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

Pour résoudre ce problème, je devais simplement changer Chrome à partir de:

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

à

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

Assurez-vous que le serveur de noeud pour fournir le paquet s'exécute en arrière-plan. Pour exécuter le serveur, utilisez npm start ou react-native start et laissez l'onglet ouvert pendant le développement. 

2
Chethan N

Mon cas est que lorsque je tape sur Activer le débogage JS distant, il lancera chrome, mais ne pourra pas s'y connecter.

J'ai essayé de courir: 

adb reverse tcp:8081 tcp:8081

, a mais ne fonctionne pas.

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

1
Steven Fang
  1. react-native start --reset-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 lancer yarn run adb-reverse )
  3. Si vous utilisez Android, au lieu de secouer votre téléphone, un bon conseil est d'exécuter les commandes adb.

Pour que vous puissiez courir:

  • adb Shell entrée événement clé 82 ( option de menu )
  • adb Shell keyevent 46 46 ( reload )
1
Ribamar Santos

Toutes les réponses impressionnantes fournies spécialement par les développeurs experts Ribamar Santos, si vous ne le faites pas fonctionner, vous devez vérifier quelque chose de plus délicat!

Quelque chose comme Airplane mode de votre 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 le réseau! pour certains besoins d'émulation!

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

0
AbdolHosein

désinstallez votre application, puis exécutez réact-native run-Android. puis cliquez sur fin de débogage en chrome remplacer http: // localhost: 8081/debugger-ui/ , fin exécuter réact-native run-Android. si vous n'avez toujours pas réussi, essayez à nouveau

0
muhyidin

dans mon cas, il faut aussi installer son paquet npm

alors

npm install react-native-debugger -g
0
Ehsan sarshar

J’ai fait la réponse de @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
Thomazella