No se puede conectar con el depurador remoto

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.

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

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.

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!

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

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.

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/

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

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

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.

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

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

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!

en mi caso también necesita instalar su paquete npm

entonces

npm install react-native-debugger -g

Intenta agregar esto

package.json

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

Terminar todo.

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

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