Impossible de se connecter avec le débogueur distant

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.

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

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.

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é!

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

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.

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/

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

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. 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 )

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.

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

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

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!

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

alors

npm install react-native-debugger -g

Essayez d'ajouter ceci

package.json

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

Terminez tout.

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

Référence: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917