No se puede conectar con el depurador remoto


149

Estoy usando React.JS y cuando lo hago react-native run-android(con mi dispositivo enchufado) veo una página en blanco. Cuando sacudo el dispositivo y selecciono Debug JS Remotelyde la lista de opciones, veo la siguiente pantalla.

ingrese la descripción de la imagen aquí

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
En Android, debe ejecutar en una ventana separada react-native startpara iniciar el servidor.
Aleksandar Popovic

¿Qué hay de cambiar esto: compile "com.facebook.react:react-native:+"en la sección de compilación?
Satan Pandeya

debe habilitar "depurar" en el menú de desarrollo
UA_

Respuestas:


280

En mi caso, el problema era que el emulador estaba haciendo una solicitud para:

http://10.0.2.2:8081/debugger-ui

en vez de:

http://localhost:8081/debugger-ui y la solicitud estaba fallando.

Para resolver el problema: antes de habilitar la depuración remota en su emulador , abra http://localhost:8081/debugger-uien Chrome. Luego habilite la depuración remota y regrese a la página de Chrome donde debería ver los registros de su consola.


1
funcionó para mí - gracias! ¿encontraste una manera de configurarlo para que siempre intente conectarse a localhost para evitar tener que abrir primero la pestaña de Chrome?
izikandrw

26
Puede ir a la Configuración de desarrollo (Ctrl + M) en su emulador y cambiar el servidor de depuración a 'localhost: 8081'.
DannyMoshe

El último párrafo es lo único que funcionó para mí.
Pedro Otero

3
Gracias. ¿Cómo se establece en 10.0.2.2 en primer lugar?
charlieb

3
Una solicitud de 'localhost' hecha desde su emulador intentaría acceder al puerto de bucle invertido en el emulador, no en su PC (desea el bucle invertido de su PC). Para resolver esto, Android crea el alias 10.0.2.2 para permitirle acceder a los servicios que se ejecutan en su PC (consulte developer.android.com/studio/run/emulator-networking para referencia de documentos). En cuanto a por qué la solicitud falla, no estoy seguro, pero parece que es un problema documentado con react / android, consulte github.com/facebook/react-native/issues/17970 .
DannyMoshe

181

Resuelto el siguiente problema:

  • Presione Cmd + Men la pantalla del emulador
  • Ir Dev settings > Debug server host & port for device
  • Conjunto localhost:8081
  • Vuelva a ejecutar la aplicación de Android: react-native run-android

¡El depurador está conectado ahora!


Para aquellos de ustedes que tienen un problema con el botón CMD + M que no funciona, usé './adb shell input keyevent 82' en el shell donde se encuentra adb para activarlo. ¡Las teclas de acceso directo comenzaron a funcionar después de eso!
Jeff L

USTED, señor, es una leyenda sangrienta. x
NewbieAid

Ahora solo está tratando de conectarse al depurador remoto ... por la eternidad
Fakebounce

44

Lo resolví haciendo adb reverse tcp:8081 tcp:8081y luego reloaden mi teléfono.


36

En mi caso, al seleccionar Debug JS se lanzó Chrome de forma remota , pero no se conectó con el dispositivo Android. Normalmente, la nueva pestaña / ventana de Chrome tendría la URL de depuración rellenada previamente en la barra de direcciones, pero en este caso la barra de direcciones estaba en blanco. Después del tiempo de espera, se muestra el mensaje de error "No se puede conectar con el depurador remoto". Lo arreglé con el siguiente procedimiento:

  • correr adb reverse tcp:8081 tcp:8081
  • Pegar http://localhost:8081/debugger-uien el campo de dirección de mi navegador Chrome. Debería ver la pantalla de depuración normal, pero su aplicación aún no estará conectada.

Eso debería arreglar el problema. De lo contrario, es posible que deba seguir los siguientes pasos adicionales:

  • Cierre y desinstale la aplicación de su dispositivo Android
  • Vuelva a instalar la aplicación con react-native run-android
  • Habilite la depuración remota en su aplicación.
  • Su aplicación ahora debería estar conectada al depurador.

2
Tom ... gracias! Antes de esto, configuré mi dirección IP ("Configuración de desarrollo" -> "Debug host host for device") xxxx: 8081
atreeon

11

Tuve un problema similar que me llevó a esta pregunta. En mi depurador de navegador recibí este mensaje de error:

El acceso a la búsqueda en ' http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ' from origin ' http://127.0.0.1:8081 ' ha sido bloqueado por la política de CORS: No 'Control de acceso El encabezado "Permitir origen" está presente en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, configure el modo de la solicitud en 'no-cors' para recuperar el recurso con CORS deshabilitado.

Me tomó un tiempo darme cuenta de que estaba usando en 127.0.0.1:8081lugar de localhost:8081para mi depurador.

Para solucionarlo, simplemente tuve que cambiar Chrome de:

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

a

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

1
en realidad para mí fue todo lo contrario. Pero en realidad "localhost" suele ser equivalente a 127.0.0.1. Depende de lo que esté configurado para la dirección como localhost. Aunque siempre es mejor ser explícito
Carmine Tambascia

2

Asegúrese de que el servidor de nodo para proporcionar el paquete se ejecute en segundo plano. Para ejecutar, inicie el servidor, use npm starto react-native starty mantenga la pestaña abierta durante el desarrollo


1
Aún no funciona. Ninguno de los terminales me devuelve errores
splunk el

1
¿Está ejecutando algún servidor proxy o software proxy como Charles ...
Detenerlos

No, no estoy ejecutando ningún proxy
splunk el

2

Mi caso es que cuando toco habilitar la depuración remota de JS, se iniciará Chrome, pero no se puede conectar a él.

He intentado correr:

adb reverse tcp:8081 tcp:8081 

, pero no funcionó.

Desinstalé totalmente mi Chrome e instalé uno nuevo. Y funciona.


1
  1. inicio react-native --reset-cache en una pestaña y react-native run-android en otra
  2. adb reverse tcp: 8081 tcp: 8081 (para que puedas agregarlo a tus scripts y simplemente ejecutar yarn run adb-reverse )
  3. Si está usando Android, en lugar de agitar su teléfono, un gran consejo es ejecutar comandos adb.

Para que pueda ejecutar:

  • adb shell input keyevent 82 ( opción de menú )
  • entrada de shell adb keyevent 46 46 ( recarga )

1

Las otras respuestas aquí me faltaban un paso crucial para mí. En AndroidManifest.xml necesitaba agregar usesCleartextTraffic:

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

Sin embargo, es probable que no desee mantener esto en la versión de producción de su aplicación, a menos que desee admitir solicitudes http inseguras.

Después de agregar esto a mi AndroidManifest.xml, seguí la respuesta de Tom Aranda, y el emulador finalmente pudo conectarse al depurador.


0

Hice la respuesta de @sajib y usé este script para redirigir los puertos:

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

desinstale su aplicación, luego ejecute react-native run-android. a continuación, haga clic en finalización de la depuración en Chrome, reemplace http: // localhost: 8081 / debugger-ui / , finalice la ejecución react-native run-android. si aún no has tenido éxito, inténtalo de nuevo


0

Incluyendo todas las respuestas impresionantes que los desarrolladores expertos Ribamar Santosproporcionaron especialmente , si no lo hiciste funcionar, ¡debes verificar algo más complicado!

¡Algo parecido Airplane modea tu teléfono (emulado)! ¡O su network status of Emulator( Data status and Voice status on Cellular tab of Emulator configuration) que podría ser manipulado para no expresar la red! para algunas necesidades de emulación!

¡He superado este problema con este truco! ¡Fue una depuración un poco impresionante encontrar este agujero!


0

en mi caso también necesita instalar su paquete npm

entonces

npm install react-native-debugger -g

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.