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

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

Editar:

Esto ahora está vinculado en los documentos de ayuda .

Depuración de React Native Apps

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 + Dy se abrirá una página web en http: // localhost: 8081 / debugger-ui . (Chrome solo por ahora) o use elShake Gesture
3. Habilite Pause On Caught Exceptions para una mejor experiencia de depuración.
4. Presione Command + Option + Ipara 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 Reactpestaña 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 Enable/Disable Live Reload, Reloady Enable/Disable Debuggingopciones.

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.

• Desvincular widget
• Habilítelo haciendo CMD + mclic en depurar en Chrome

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

ejemplo:

debugger; //breaks execution

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

si desea depurar usando 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

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

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

Funciona en: windows, osxy linux.

Es compatible con: react nativeyredux

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

cmd ⌘+ Dcuriosamente no funcionó para mí. Presionar ctrl+ cmd ⌘+ Zen el simulador de iOS me abrió la ventana del navegador de depuración.

Esta es la pantalla que aparece:

Más detalles aquí.

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 aquí :

adb shell input keyevent 82

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á de nuevo.

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

   Creo que prefiero dejar que el programa se ejecute y registrar algunas informaciones que agregar un debuggerpunto de interrupción. (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 Debuggingcon debugger;punto de quiebre en su programa.

Bueno, depende del tipo de errores que haya encontrado y de sus preferencias sobre cómo depurar. Para la mayoría de losundefined is not an object (evaluating 'something.something') 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 Chrome Debugging

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

Espero que esto ayude a alguien por ahí.

En lugar de Cmd+M, para Android Emulator Press F10en Windows. El emulador comienza a mostrar todas las opciones de depuración nativas de reacción.

adb logcat *:S ReactNative:V ReactNativeJS:V

ejecuta esto en la terminal para el registro de Android.

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.

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 Debug JS Remote.

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.

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. p.ej:console.tron.log('debug')

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.

Por defecto, mi simulador de ios no captaba las pulsaciones de teclas, por lo que cmd-D no funcionó. Tuve que activar 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.

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

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

Si desea habilitar la depuración de forma predeterminada:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

Para que esto funcione en Android:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

Referencia: Inicie una aplicación React Native con "Debug JS Remotely" habilitado de forma predeterminada

Muy simple solo dos comandos

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

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

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

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

• Y luego vuelve a intentarlo ⌘+m.

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

• Y luego vuelve a intentarlo ⌘+m.

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

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 un valor 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.

Esta es la forma alternativa de utilizar la aplicación reaccionar depurador nativo.

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.

reaccionar-nativo-depurador

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

herramientas de desarrollador de Chrome

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

2. Haga clic en - Debug js remotamente

3. Google Chrome ve a la consola

También hay un muy buen nombre de depurador Reactotron. https://github.com/infinitered/reactotron

No tiene que estar en modo de depuración para ver algún valor de datos y hay muchas opciones.

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

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)

Paso 1: Lugar debuggerdonde quieras 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+Den el emulador ios y Cmd+Men 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: seleccionaDeveloper Tools.

Paso 5: su depurador se detiene en la Sourcespestaña donde haya escrito debuggerdentro 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, vuelva a Fuentes -> haga clic en el botón Reanudar la ejecución del script (botón azul de la esquina derecha)

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

¡Disfruta de la depuración!

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

Primero en su simulador de ios, si presiona la tecla [comando + D], puede ver esta pantalla.

Luego haga clic en el botón Debug JS de forma remota.

Después de que pueda ver la página React Native Debugger como esta.

¡Y luego abra su inspector [f12], y vaya a la pestaña de consola, depúrelo! :)

React Native 0.62 Lanzado - La solución oficial es Flipper 🚀

Flipper es Android y iOS Herramientas de depuración móvil sin usar el modo de depuración en reaccionar nativo.

Desde RN 0.62 (Ver este enlace ), Flipper se inicializa con el proyecto predeterminado.

Flipper tiene algunos complementos para la depuración. Los plugins incluyen Layout, Network,Shared preferences

El mayor beneficio de Flipper no son muchos complementos, pero también puede ver la depuración de la consola del dispositivo Android / iOS fácilmente.

El Flipper también te alerta sobre el bloqueo o el rechazo de red.

El complemento de diseño incluye el modo de accesibilidad y el modo de destino.

También puede ver la solicitud / respuesta de red sin procesar en su Aplicación.