android - unable - run device react native

¿Cómo se depura React Native?

Question

¿Cómo se depura su código React con React Native mientras la aplicación se ejecuta en el simulador de aplicaciones?

Answer 1

Depuración de React Apps nativas

Para depurar el código JavaScript de su aplicación de reacción, haga lo siguiente:

1. Ejecute su aplicación en el simulador de iOS.
2. Presione Command + D y se abrirá una página web en http://localhost:8081/debugger-ui . (Chrome solo por ahora) o usa el Shake Gesture
3. Habilite Pause On Caught Exceptions para una mejor experiencia de depuración.
4. Presione Command + Option + I para abrir las herramientas de desarrollador de Chrome, o ábralo a través de View -> Developer -> Developer Tools .
5. Ahora debería poder depurar como lo haría normalmente.

Opcional

Instale la extensión React Developer Tools para Google Chrome. Esto le permitirá navegar por la jerarquía de vistas si selecciona la pestaña React cuando las herramientas de desarrollador están abiertas.

Recarga en vivo

Para activar Live Reload haga lo siguiente:

1. Ejecute su aplicación en el simulador de iOS.
2. Presione Control + Command + Z
3. Ahora verá las opciones Enable/Disable Live Reload , Reload y Enable/Disable Debugging .

Answer 2

1. Ejecute su aplicación en el simulador - react-native run-ios
2. Presione ctrl + d y haga clic en Depurar JS de forma remota

1. la página web debe abrirse en http://localhost:8081/debugger-ui , si no, escriba la URL y vaya a este enlace en Chrome
2. Haga clic derecho en la página y haga clic en Inspeccionar y debería abrir las herramientas de desarrollador para Chrome

3. Vaya a las fuentes en el menú superior y busque su archivo de clase js en el explorador de archivos del lado derecho

4. Puede poner puntos de interrupción en la vista y depurar el código allí como puede ver en la imagen.

Answer 3

1. Si está utilizando el emulador, use Ctrl + M y simulador Cmd + D

2. Haga clic en - Debug js remotamente

3. Google Chrome ve a la consola

Answer 4

Además de las otras respuestas. Puede depurar react-native con la declaración del depurador

ejemplo:

debugger; //breaks execution

Tus herramientas de desarrollo de Chrome deben estar abiertas para que esto funcione

Answer 5

En React-Native, la depuración es mucho más fácil.

• Para depurar en IOS use

cmd + d

ctrl + cmd + z (para simulador)

• Para depurar en Android

Agite el dispositivo con un toque (asegúrese de que su opción de desarrollador esté habilitada)

Answer 6

En lugar de Cmd + M , para el emulador de Android, presione F10 en Windows. El emulador comienza a mostrar todas las opciones de depuración nativas de reacción.

Answer 7

En realidad es bastante simple. Simplemente presione cmd D (si está en mac) y el simulador creará un menú emergente. A partir de ahí, simplemente haga clic en "Depurar JS de forma remota" o algo por el estilo. Tenga en cuenta que ejecutar el depurador mientras se ejecuta código relacionado con ciertos paquetes puede causar problemas a las personas. Tuve un problema con react-native-maps y el depurador. Pero eso fue arreglado. Sin embargo, en su mayor parte deberías estar bien.

Answer 8

Esta es la forma alternativa de utilizar la aplicación de depuración nativa react.

puede descargar la aplicación usando el siguiente enlace, es una muy buena aplicación para administrar la tienda redux junto con el código fuente.

https://github.com/jhen0409/react-native-debugger

ahora también puedes usar directamente el siguiente enlace para ayudarte.

chrome-developer-tools

Answer 9

La depuración de react-native 0.40.0 en Debian 8 (Jessie) se puede hacer navegando a http://localhost:8081/debugger-ui en Chromium o Firebug mientras su aplicación se ejecuta en el simulador de Android. Para acceder al menú de desarrollador en la aplicación, ejecute el siguiente comando en otra ventana de terminal, como se señala here :

adb shell input keyevent 82

Answer 10

Muy simple solo dos comandos

For IOS $ react-native log-ios
For Android $ react-native log-android

Answer 11

No tengo suficiente reputación para comentar las respuestas anteriores, que son geniales. :) Estas son algunas de las formas en que estoy depurando cuando desarrollo una aplicación nativa de reacción.

1. Recarga en vivo

   react-native hace que sea muy fácil ver sus cambios con las teclas ⌘ + R o incluso habilitar la recarga en vivo y watchman "actualizará" el simulador con los últimos cambios. Si obtiene un error, puede obtener una pista del número de línea de esa pantalla roja. Un par de deshacer lo llevará de regreso al estado de trabajo y comenzará nuevamente.

2. console.log(''yeah, seriously.'')

   Me parece que prefiero dejar que el programa se ejecute y registrar alguna información que agregar un punto de interrupción del debugger . (el depurador resistente es útil cuando se trata de trabajar con paquetes / bibliotecas externas y viene con autocompletado, para que sepa qué otros métodos puede utilizar).

3. Enable Chrome Debugging con debugger; punto de quiebre en su programa.

Bueno, depende del tipo de errores que haya encontrado y sus preferencias sobre cómo depurar. Para la mayoría de los undefined is not an object (evaluating ''something.something'') , los métodos 1 y 2 serán lo suficientemente buenos para mí.

Mientras que tratar con bibliotecas externas o paquetes escritos por otros desarrolladores requerirá más esfuerzo para depurar, por lo tanto, una buena herramienta como la Chrome Debugging

A veces proviene de la propia plataforma react-native, por lo que buscar en Google los problemas de react-native definitivamente ayudará.

Espero que esto ayude a alguien por ahí.

Answer 12

Para Android: Ctrl + M (emulador) o Agitar el teléfono (En dispositivo) para revelar el menú.

Para iOS: Cmd + D o Agitar el teléfono para revelar el menú

Asegúrate de tener cromo.

En el menú revelado, seleccione la opción de depuración remota de JS.

Chrome se abrirá automáticamente en localhost: 8081 / debugger-ui. También puede ir manualmente al depurador con este enlace.

Allí se muestra la consola y se pueden ver registros.

Answer 13

Para la aplicación de Android. Presione Ctrl + M select debug js de forma remota, se abrirá una nueva ventana en Chrome con url http://localhost:8081/debugger-ui . Ahora puede depurar la aplicación en el navegador Chrome

Answer 14

Para mí, la mejor forma de depurar en React-Native es usando "Reactotron" .

Instale Reactotron y luego agréguelos a su package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

ahora, solo es cuestión de iniciar sesión en su código. por ejemplo: console.tron.log(''debug'')

Answer 15

Para una aplicación de Android, si está utilizando Genymotion, puede alternar el menú presionando CMD + m , pero puede que tenga que habilitarlo en el menú haciendo esto.

• Desenlazar widget
• Habilítelo mediante CMD + m haga clic en depurar en Chrome

Answer 16

Por defecto, mi simulador de ios no captaba las pulsaciones de teclas, por lo que cmd-D no funcionó. Tuve que encender la configuración del teclado usando el menú del simulador:

Hardware> Teclado> Teclado de conexión

Ahora cmd-D lanza la depuración de Chrome.

Answer 17

Puedes usar Safari para depurar la versión iOS de tu aplicación sin tener que habilitar "Debug JS Remote", solo sigue los siguientes pasos:

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app''s JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari''s Web Inspector should open which has a Console and a Debugger

Answer 18

Si está utilizando Microsoft Visual Code, instale la extensión React Native Tools. Luego puede agregar puntos de ruptura simplemente haciendo clic en el número de línea deseado. Siga estos pasos para configurar y depurar la aplicación:

No olvide habilitar Debug JS Remote en el emulador si lo está usando.

Answer 19

Si está utilizando Redux, le recomiendo React Native Debugger. Incluye devtools de Chrome, pero también tiene devtools de Redux y devtools React.

Redux Devtools : Esto le permite ver sus acciones y avanzar y retroceder por ellas. También le permite ver su tienda redux y tiene una función para diferenciar automáticamente el estado anterior con el estado actualizado de cada acción, para que pueda verlo a medida que avanza y retrocede a través de una serie de acciones.

React Devtools : esto le permite inspeccionar un determinado componente, es decir, todos sus accesorios, así como su estado de componente. Si tiene una parte del estado del componente que es booleano, le permite hacer clic para alternarlo y ver cómo reacciona su aplicación cuando cambia. Gran característica

Chrome Devtools Le permite ver todas las salidas de su consola, usar puntos de interrupción, pausar en el depurador; etc. Características de depuración estándar. Si hace clic con el botón derecho en el área donde se enumeran sus acciones en Redux Devtools y selecciona ''Permitir inspección de red'', puede inspeccionar sus llamadas API en la pestaña de red de Chrome Devtools, lo cual es genial.

En conclusión, ¡tener todo esto en un solo lugar es fantástico! Si no necesita uno de ellos, puede activarlo / desactivarlo. Obtenga React Native Debugger y disfrute la vida.

Answer 20

Si utiliza Nuclide en el editor Atom para React Native App Development, también puede utilizar el "Inspector de elementos", que ayuda a observar los accesorios y los cambios de valores de estado cuando la aplicación se ejecuta en el dispositivo en la fase de desarrollo. Conozca más aquí: https://nuclide.io/docs/platforms/react-native/#element-inspector ingrese la descripción de la imagen aquí

Answer 21

Suponiendo que desea mostrar este menú en el emulador de Android

• Luego, intente ⌘+m para abrir este diálogo de configuración de desarrollo en el emulador de Android en una Mac.

• Si no aparece, vaya a AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box .

• Y luego ⌘+m intentar ⌘+m .

• Si todavía no se muestra, vaya a la configuración del emulador en ejecución y en los Send keyboard shortcuts to cuadro combinado / desplegable, luego seleccione la opción Emulator controls (default) del Emulator controls (default) .

• Y luego ⌘+m intentar ⌘+m .

• Espero que esto ayude, funcionó para mí.

Answer 22

También hay un muy buen nombre de depurador Reactotron. "Reactotron"

No tiene que estar en modo de depuración para ver algunos valores de datos y hay muchas opciones.

ve a echar un vistazo que sea realmente útil. ;)

Answer 23

Tener un espacio en la ruta del archivo evita que Cmd + D funcione. Moví mi proyecto a una ubicación sin espacio y finalmente conseguí que el depurador de Chrome funcionara. Parece un bug .

Answer 24

para depurar su aplicación nativa de reacción solo vaya a la siguiente dirección:

localhost: 8081 / debugger-ui en su navegador predeterminado (chrome) y abra las herramientas de desarrollador para depurar su aplicación nativa de reacción

Answer 25

si desea depurar utilizando un dispositivo Android en Windows, simplemente abra un símbolo del sistema y luego escriba (asegúrese de que su adb funcione correctamente)

adb shell input keyevent 82

aparecerá una pantalla como la imagen

luego seleccione

debug JS Remotely

abrirá automáticamente una nueva ventana. luego, abra el elemento de inspección o presione F12 para la consola.

Answer 26

Pruebe este programa: https://github.com/jhen0409/react-native-debugger

Funciona en: windows , osx y linux .

Soporta: react native y redux

También puede inspeccionar el árbol de componentes virtuales y modificar los estilos que se reflejan en la aplicación.

Answer 27

Cmd + D desde dentro del simulador. Aparecerá Chrome y desde allí puedes usar las Herramientas para desarrolladores.

Editar:

Esto ahora está vinculado en los documentos de ayuda .

Answer 28

cmd ⌘ + D curiosamente no funcionó para mí. Al presionar ctrl + cmd ⌘ + Z en el simulador de iOS, abrí la ventana del navegador de depuración para mí.

Esta es la pantalla que aparece:

Más detalles aquí.

Answer 29

Paso 1: coloque el debugger donde quiera detener el script, como:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error(''AsyncStorage error: '' + error.message);
    }
}

Esto detendrá el depurador cuando el control llegue a este bloque de código.

Paso 2: Presione Cmd+D en el emulador ios y Cmd+M en el simulador de Android . Si tiene un dispositivo real, agite el dispositivo para abrir el menú de desarrollo, si no desea sacudir el dispositivo, siga este blog

Paso 3: Seleccione Enable Remote JS Debugging , esto abrirá Chrome

Paso 4: selecciona Developer Tools.

Paso 5: su depurador está en pausa en la pestaña Sources donde haya escrito un debugger dentro de su código. Vaya a la consola y escriba los parámetros que desea depurar (que están presentes en el bloque de código) como: Para pasar al siguiente punto del depurador nuevamente, vaya a Fuentes -> haga clic en el botón Reanudar ejecución de script (botón azul de la esquina derecha)

Coloque el depurador, donde quiera pausar el guión.

¡Disfruta de la depuración!

Answer 30

adb logcat *:S ReactNative:V ReactNativeJS:V

ejecuta esto en la terminal para el registro de Android.