¿Cómo se depura React Native?


266

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



Además de estas respuestas, si está trabajando en VS Code y desea depurarlo en lugar de Chrome, consulte mi respuesta
gprathour

Respuestas:


159

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 .


8
Usando el simulador v8.2, Cmd + D parece no hacer nada. Chrome es lo último. ¿Se necesita algún complemento especial en Chrome o un proxy?
McG

55
Obteniendo "Websocket debugger no está disponible. ¿Olvidó incluir RCTWebSocketExecutor?". : /
Tyler McGinnis

1
Tuve el siguiente error: /Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: error de script: nombre de clase esperado pero propiedad encontrada. (-2741). Descubrí que si deshabilitaba compartir aplicaciones de Windows con Mac en Parallels, comenzaría a funcionar. Ver stackoverflow.com/questions/29310936/… .
Serge van den Oever

55
Eso estará Cmd+Men OS X y Android
escamoso

2
Tenga en cuenta que Cmd + D no hará nada si su configuración de compilación está configurada en "Release"; asegúrese de que esté configurada en "Debug".
jwinn

79

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.

Esta respuesta básicamente copia el documento, que es un comienzo, pero no especialmente esclarecedor. ¿Qué significa "depurar como lo haría normalmente" en este contexto?
GreenAsJade

66
Nota importante: React Developer Tools no ha estado trabajando con React Native durante meses, y aún no se ha solucionado. Más información aquí: github.com/facebook/react-devtools/issues/229
Lane Rettig

¿Quién dijo que esto está en Mac?
shinzou

@shinzou está implícito en la mención de un simulador (es simulador para desarrolladores de iOS, emulador para desarrolladores de Android). Sí, sé que ha pasado un tiempo, pero aún así, solo FWIW
Konrad Morawski

58

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

55
Finalmente encontré una solución de Android, ¡gracias! Y en la última versión, debug in chromese reemplaza por start debug remotely.
MewX

@MewX ¿Podrías decirnos cómo hacerlo? 🤔
Mo.

@ Muhammed Hola, puedes seguir cmd + mo ctrl + mseleccionar start debug remotelydesde las ventanas emergentes en tu simulador
MewX

31

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


F ya! Eso es lo que necesitaba! ¡Gracias amigo!
I_am_learning_now

27

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 ingrese la descripción de la imagen aquí

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.


¿Hay un iOS equivalente a este comando? Recién comencé recientemente con RN y esto ayudaría mucho en el futuro
Juan Carlos Alpizar Chinchilla

26

ingrese la descripción de la imagen aquí

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.


¿Puedo ver el valor de una variable específica a través de este depurador? Lo he intentado console.log(url), pero no puedo encontrar dónde está la salida.
QuarK

24

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:

Reaccionar opciones de depuración nativas

Más detalles aquí.


No veo estas opciones ... :(
Noah

16

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


14

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


12

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.

imagen


10
adb logcat *:S ReactNative:V ReactNativeJS:V

ejecuta esto en la terminal para el registro de Android.


osx: adb logcat '*: S' ReactNative: V ReactNativeJS: V
mbunch

9

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: PREPARAR CORRER

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


9

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.


8

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


8
  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

ingrese la descripción de la imagen aquí

  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

ingrese la descripción de la imagen aquí

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

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


6

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.



5

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 .


5

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


¿En lugar específico debo poner esas 4 líneas? ¿En App.js o index.js?
Julien Lamarche

@JulienLamarche Poner en App.js
Olcay Ertaş

eso debería ser aceptado como respuesta ... por qué también creer en los comandos .....
Tushar Pandey

4

Muy simple solo dos comandos

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

esta es la forma en que lo hago!
Zach Cook

Esta es una excelente manera de ver lo que está sucediendo en su tienda
Daan

4

Suponiendo que desea mostrar este menú en el emulador de Android ingrese la descripción de la imagen aquí

  • 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. ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

  • Y luego vuelve a intentarlo ⌘+m.

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


4

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.



3
  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



3

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)


1
Buena explicación
Narendra Solanki

3

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

ingrese la descripción de la imagen aquí

Paso 4: seleccionaDeveloper Tools.

ingrese la descripción de la imagen aquí

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: ingrese la descripción de la imagen aquí 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!


3

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

3

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

ingrese la descripción de la imagen aquí

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.

ingrese la descripción de la imagen aquí

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


2

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.

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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


¿Tenemos que instalar Flipper manualmente? ¿O se envía con React Native de alguna manera? Si es así, ¿cómo lo abrimos?
Charanor

@Charanor que instalé usando la guía de actualización nativa reaccionar cuando actualizo a 0.62
MJ Studio
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.