¿Cómo hace uno para depurar sus Reaccionar código de Reaccionar con los Nativos, mientras la aplicación se está ejecutando en la aplicación simulador?

InformationsquelleAutor McG | 2015-03-26

43 Comentarios

  1. 142

    Cmd+D desde dentro del Simulador. Te emergente Chrome y a partir de ahí, puede utilizar las Herramientas de desarrollo.

    Edición:

    Este ahora está vinculado en la ayuda docs.

    • El uso de v8.2 simulador, Cmd+D parece no hacer nada. Chrome es más reciente. Es especial plugin en chrome necesario o un proxy?
    • Conseguir «Websocket depurador no está disponible. ¿Se olvidó de incluir RCTWebSocketExecutor?». :/
    • Desde dentro del Simulador es poco importante.
    • Tuve el siguiente error: /Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: error de secuencia de comandos: se Esperaba un nombre de clase, pero encontró la propiedad. (-2741). Descubrí que si me movilidad de intercambio de aplicaciones de Windows con Mac con Parallels de que empiece a trabajar. Consulte stackoverflow.com/questions/29310936/….
    • también funciona de dispositivos reales. He añadido una nota en el doc cómo facebook.github.io/reaccionar-nativo/docs/depuración.html#contenido
    • facebook.github.io/reaccionar-nativo/docs/depuración.html#contenido
    • nota si está integrando con cocoapods, asegúrese de que usted tiene pod 'React/RCTWebSocketDebugger'
    • ¿Qué es esto Cmd cosas? Estoy en Windows.
    • O CTRL+M para el desarrollador de menú de windows
    • Que va a ser Cmd+M en OS X y Android
    • Yo tenía el mismo problema que McG – usar CMD + D y dejar que el navegador de lanzamiento de la Depuración de JS de forma remota opción. Mina tomó un tiempo para el lanzamiento, pero finalmente comenzó a trabajar
    • Nota puede que tenga que buscar en un lugar extraño en las «fuentes» de la ficha para encontrar el código. Para mí fue bajo debuggerWorker.js->172.29.208.1:19001->node_modules/expo

  2. 74

    Depuración De Reaccionar Aplicaciones Nativas

    Para depurar el código javascript de su reaccionan de la aplicación haga lo siguiente:

    1. Ejecutar la aplicación en el simulador de iOS.
    2. De prensa Command + D y una página web debe abrir en http://localhost:8081/debugger-ui. (Chrome sólo por ahora) o el uso de la Shake Gesture
    3. Habilitar En Pausa, Cogió Excepciones para una mejor experiencia de depuración.
    4. De prensa Command + Option + I para abrir las herramientas para Desarrolladores de Chrome, o acceder a ella a través de View -> Developer -> Developer Tools.
    5. Ahora debería ser capaz de depurar como lo haría normalmente.

    Opcional

    Instalar el Reaccionar De Herramientas De Desarrollador extensión para Google Chrome. Esto le permitirá navegar en la vista de jerarquía si selecciona la React ficha cuando las herramientas de desarrollo están abiertas.

    Vivir Recargar

    Para activar Live Recargar hacer lo siguiente:

    1. Ejecutar la aplicación en el simulador de iOS.
    2. De prensa Control + Command + Z.
    3. Ahora verá el Enable/Disable Live Reload, Reload y Enable/Disable Debugging opciones.
    • Esta respuesta, básicamente, copias el doc, que es un comienzo, pero no es especialmente revelador. ¿Qué significa «depuración como lo haría normalmente» significa en este contexto?
    • Nota importante: Reaccionar de las Herramientas de desarrollo no ha estado trabajando con Reaccionar Nativo durante meses, y queda fijo. Más info aquí: github.com/facebook/react-devtools/issues/229
    • Quien dijo que este es en mac?
    • es implícita a través de la mención de un simulador (es el simulador de iOS devs, emulador de Android para desarrolladores). Sí, sé que ha sido un tiempo, pero aún así, sólo por lo que vale
  3. 47

    Para una Aplicación de Android, si usted está utilizando Genymotion puede cambiar el menú pulsando la CMD + m, pero puede que tenga que activar en el menú al hacer esto.

    ¿Cómo depurar Reaccionar Nativo?
    ¿Cómo depurar Reaccionar Nativo?

    • Desmarque widget
    • Activar CMD + m haga clic en de depuración en chrome
    • Finalmente encontró un Android solución, gracias! Y en la última versión, la debug in chrome se sustituye con start debug remotely.
    • Podría usted por favor, háganos saber cómo hacerlo ? 🤔
    • Hola, sólo podía seguir cmd + m o ctrl + m, y seleccione start debug remotely de la ventana de windows en tu simulador
  4. 27

    Además de las otras respuestas. Puede depurar reaccionar nativas utilizando el depurador declaración

    ejemplo:

    debugger; //breaks execution
    

    De chrome dev tools debe estar abierto para que esto funcione

    • muy buena sugerencia. Muchas gracias por compartir !!
  5. 23

    cmd ⌘ + D extrañamente no funciona para mí. Pulsando ctrl + cmd ⌘ + Z en el simulador de iOS hizo patear fuera de la depuración de la ventana del navegador para mí.

    Esta es la pantalla que aparece:

    ¿Cómo depurar Reaccionar Nativo?

    Más detalles aquí.

  6. 17

    si quieres depurar a través de dispositivos android en Windows, simplemente abra un símbolo del sistema, a continuación, escriba ( asegúrese de que su adb funcionando correctamente)

    adb shell input keyevent 82
    

    aparecerá una pantalla como la de la imagen
    ¿Cómo depurar Reaccionar Nativo?

    a continuación, seleccione

    debug JS Remotely
    

    automáticamente se abrirá una nueva ventana.a continuación, abra inspeccionar elemento, o presione F12 para la consola.

    • hay una versión de iOS equivalente a este comando? Acabo de empezar hace poco con RN y esto sería de gran ayuda en el futuro
  7. 14

    Depuración de reaccionar nativos 0.40.0 en Debian 8 (Jessie) puede hacerse navegando a http://localhost:8081/debugger-ui en Cromo o Firebug mientras se está ejecutando la aplicación en el simulador de android. Para acceder a la app developer menu, ejecute el comando siguiente en otra ventana de terminal, como se señaló aquí:

    adb shell input keyevent 82

  8. 13

    No tengo suficiente reputación para hacer comentarios sobre las respuestas anteriores, que son geniales. 🙂
    Aquí están algunas de las formas en cómo estoy de depuración cuando el desarrollo de reaccionar-app nativa.

    1. Vivir recarga

      reaccionar nativos hace super fácil ver los cambios con la tecla ⌘ + R teclas o incluso sólo permiten vivir de recarga y vigilante va a «actualizar» el simulador con los últimos cambios. Si recibe un error, usted puede obtener una pista de la línea de número de esa pantalla en rojo. Un par de deshacer vas a volver al estado de funcionamiento y empezar de nuevo.

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

      Me encuentro prefieren dejar que el programa de ejecución y el registro de algunas informaciones que la adición de un debugger punto de interrupción. (difícil depurador es útil cuando se trata de trabajar con paquetes externos/bibliotecas y viene con la función de autocompletar, para saber qué otros métodos que puede utilizar.)

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

    Bien depende del tipo de errores encontrados y sus preferencias de cómo depurar. Para la mayoría de la undefined is not an object (evaluating 'something.something'), el método 1 y 2 será lo suficientemente bueno para mí.

    Mientras que tratar con bibliotecas externas o paquetes escrito por otros desarrolladores se requieren más esfuerzos para depurar por lo tanto, una buena herramienta como Chrome Debugging

    A veces viene de la reaccionar-nativo de la plataforma de sí misma, así que googlear para reaccionar-de las cuestiones indígenas definitivamente ayuda.

    la esperanza de que esto ayude a alguien por ahí.

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

    ejecutar esto en la terminal para android de registro.

    • osx: adb logcat ‘*:S’ ReactNative:V ReactNativeJS:V
  10. 8

    Para mí la mejor forma de depurar en Reaccionar-Nativa es mediante el uso de «Reactotron».

    Instalar Reactotron, a continuación, agregar a su paquete.json:

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

    ahora, es sólo la cuestión de la tala en el código.
    por ejemplo: console.tron.log('debug')

  11. 8
    1. Ejecutar la aplicación en el simulador de reacción-ejecución nativo de ios
    2. Presione ctrl + d y haga clic en Depurar JS de forma Remota

    ¿Cómo depurar Reaccionar Nativo?

    1. página web debe abrir en http://localhost:8081/debugger-ui , si no escriba la dirección URL y vaya a este enlace en Chrome
    2. Clic derecho en la página y haga clic en examinar y se debería abrir las herramientas para desarrolladores de chrome

    ¿Cómo depurar Reaccionar Nativo?

    1. Ir a las fuentes en el menú de arriba y encontrar su js archivo de clase en el lado derecho del explorador de archivos

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

  12. 8

    Lugar de Cmd+M, para Emulador de Android Pulse F10 en Windows. El emulador comienza a mostrar todas las reaccionar nativos opciones de depuración.

    ¿Cómo depurar Reaccionar Nativo?

  13. 7

    Si está utilizando Microsoft Visual de Código , a continuación, instalar Reaccionar Herramientas Nativas de extensión. A continuación, puede añadir puntos de quiebre, simplemente haga clic en el número de la línea.
    Siga estos pasos para la instalación y depuración de la aplicación :
    ¿Cómo depurar Reaccionar Nativo?
    ¿Cómo depurar Reaccionar Nativo?

    No te olvides de habilitar la Depuración de JS de forma Remota en el emulador si la estás utilizando.

  14. 6

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

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

    Asegúrese de que tiene chrome.

    En el revelado de menú seleccione Depurar JS de forma Remota Opción.

    Chrome se abre automáticamente en localhost:8081/depurador-interfaz de usuario. También manualmente puede ir a depurador con este enlace.

    No revelar la consola y usted puede ver los registros de observar.

  15. 5

    Por defecto, mi simulador de ios no estaba recogiendo las pulsaciones de teclas que es la razón por la cmd-D no funciona. He tenido que encender la configuración del teclado uso del simulador de menú:

    Hardware > Teclado > Conectar el Teclado

    Ahora cmd-D lanza chrome depuración.

  16. 5

    Tener un espacio en la ruta de acceso del archivo impide la Cmd+D de trabajo. Me mudé de mi proyecto a un lugar sin espacio, y finalmente llegué a la Chrome depurador de trabajo. Parece un error.

  17. 5

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

    puede descargar la aplicación usando el link de abajo es muy buena aplicación para la gestión de redux de la tienda junto con el código fuente.

    reaccionar-nativo-depurador

    así hoy en día, usted puede utilizar directamente enlace de abajo para ayudarle a salir.

    chrome developer tools

  18. 4

    Muy sencillo con sólo dos comandos

    For IOS $ react-native log-ios
    For Android $ react-native log-android
    
    • esta es la forma en que yo lo hago!
    • Este es un super gran manera de ver lo que está pasando con tu tienda
  19. 4

    Suponiendo que se desea mostrar este menú en emulador de Android
    ¿Cómo depurar Reaccionar Nativo?

    • A continuación, intente ⌘+m emergente de este dev diálogo de configuración en el emulador de Android en Mac.

    • Si no se muestran, a continuación, vaya a AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.
      ¿Cómo depurar Reaccionar Nativo?

    • Y vuelva a intentar ⌘+m.

    • Si no aparece todavía, a continuación, vaya a la ejecución de la configuración del emulador y en el Send keyboard shortcuts to combobox/desplegable, a continuación, seleccione el Emulator controls (default) opción.

    ¿Cómo depurar Reaccionar Nativo?

    • Y vuelva a intentar ⌘+m.

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

  20. 4

    Si usted está usando Redux, le recomiendo Reaccionar Depurador Nativo. Incluye Chrome devtools, pero también ha Redux devtools y Reaccionar devtools.

    Redux Devtools: Esto le permite ver sus acciones, y un paso atrás y adelante a través de ellos. También le permite ver su redux de la tienda y tiene una función que automáticamente diff al estado anterior, con la actualización de estado para cada acción, por lo que se puede ver como paso hacia atrás y adelante a través de una serie de acciones.

    Reaccionar Devtools: Esto le permite inspeccionar un determinado componente, es decir, todos sus accesorios y también es un componente de estado. Si usted tiene un pedazo de el estado del componente, que es un valor booleano que permite que usted haga clic en él para activar y ver cómo la aplicación reacciona cuando los cambios. Gran característica.

    Chrome Devtools le Permite ver todas las salidas de la consola, el uso de puntos de interrupción, pausa en el depurador; etc. Estándar de funciones de depuración. Si hace clic derecho en el área en donde sus acciones están listadas en Redux Devtools y seleccione «Permitir que la Red de Inspeccionar’, a continuación, puede inspeccionar sus llamadas a la API en la pestaña red de Chrome Devtools, que es dulce.

    En conclusión tener estos en un solo lugar es fantástico! Si usted no necesita uno de ellos se puede conmutar on/off. Consigue Reaccionar Depurador Nativo y disfrutar de la vida.

  21. 2

    Paso 1:
    Lugar debugger donde quiera que usted desea detener la secuencia de comandos, como:

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

    Esto va a detener el depurador cuando nunca de control viene a este bloque de código.

    Paso 2:
    Pulse Cmd+D en ios emulador y Cmd+M en simulador de Android.
    Si usted está teniendo dispositivo real, agitar el dispositivo para abrir dev menu, si usted no quiere sacudir el dispositivo siga este blog

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

    ¿Cómo depurar Reaccionar Nativo?

    Paso 4:
    Seleccione Developer Tools.

    ¿Cómo depurar Reaccionar Nativo?

    Paso 5:
    El depurador es una pausa en el Sources ficha donde los haya escrito debugger dentro de su código . Ir a la consola y escriba los parámetros que desea depurar (que están presentes en el bloque de código) como:
    ¿Cómo depurar Reaccionar Nativo?
    Para mover a la siguiente depurador punto de mover de nuevo a las Fuentes -> haga clic en Reanudar la ejecución de secuencias de comandos (botón de la esquina Derecha del botón azul)

    Lugar el depurador, dondequiera que usted quiere pausa en la secuencia de comandos.

    Disfrutar de depuración!!

  22. 2

    Puede utilizar Safari para depurar la versión de iOS de la aplicación sin tener que activar la «Depuración JS de forma Remota», Sólo tienes que seguir 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
    
  23. 1
    1. Si usted está utilizando el emulador de uso Ctrl+M & simulador Cmd+D

    2. Haga clic en la Depuración de js de forma remota

    3. De Google Chrome, vaya a la consola de

  24. 1

    Es en realidad bastante simple. Simplemente presione cmd D (si en mac) y el simulador de crear un menú pop-up. Desde allí, haga clic en «Debug JS de forma Remota» o algo a lo largo de las líneas de eso. Ten en cuenta que ejecuta el depurador durante la ejecución de código relacionado con ciertos paquetes ha sido conocida a dar problemas de la gente. He tenido un problema con reaccionar-nativos-los mapas y el depurador. Pero que fue corregido. Para la mayor parte, usted debe estar bien.

  25. 1

    para depurar su reaccionan aplicación nativa sólo ir a la siguiente dirección:

    localhost:8081/depurador-interfaz de usuario
    en su defecto el navegador(chrome) y abrir herramientas de desarrollo para depurar su reaccionan aplicación nativa

    • Gracias. Puedo ver una página que muestra algunos mensajes y las instrucciones de como usted contestó. Cómo depurar el código no menciona en ninguna parte, donde puedo ver mi código.
  26. 1

    En Reaccionar-Nativo de depuración es mucho más fácil.

    • Para depurar en IOS utilizar

    cmd + d

    ctrl + cmd + z ( Para el simulador )

    • Para depurar en android

    Agitar el dispositivo con toque ( asegúrese de que su desarrollador opción es habilitar )

    • Bonita explicación.
  27. 1

    También puede utilizar personalizado lib para que si usted no quiere agitar tu teléfono real, cada 2 minutos

    He creado una lib que le permite usar 3 dedos tocan en lugar de agitar para abrir dev menu, cuando en el modo de desarrollo

    https://github.com/pie6k/react-native-dev-menu-on-touch

    Usted sólo tiene que ajustar su aplicación dentro de:

    de importación DevMenuOnTouch de «reaccionar-nativo-dev-menú-en-touch’;
    //o: importación { DevMenuOnTouch } de ‘reaccionar-nativo-dev-menú-en-touch’

    class YourRootApp extends Component {
      render() {
        return (
          <DevMenuOnTouch>
            <YourApp />
          </DevMenuOnTouch>
        );
      }
    }
    

    Es realmente útil cuando se tiene a la depuración en el dispositivo real y tiene co-trabajadores sentado a su lado.

  28. 1

    Mejor forma de depurar reaccionar nativo de android y ios app con código visual studio

    Paso 1.

    Instalar Reaccionar Nativo – Pack Completo extensión

    Paso 2.

    Conectar el dispositivo móvil utilizando el modo de depuración USB o abrir el emulador de android studio.

    Paso 3.

    Haga clic en la opción de depuración desde el menú de la izquierda en código visual studio
    Haga clic en Agregar configuración y seleccione Reaccionar Nativo, a continuación, crear lanzamiento.json

    Paso 4.

    Abrir dev opción en el teléfono en el largo de vuelta de prensa o agitar el teléfono y Activar de Depuración js de forma remota

    Paso 5.

    Paso Final haga clic en el botón de reproducción y seleccione de Depuración de android o de Depuración de ios

    Para obtener más información, consulte este enlace

    https://medium.com/@tunvirrahmantusher/android-debug-with-vscode-for-react-native-96f54d73462a

    • El paso 4 no es claro para mí. Entiendo que debemos hacer con nuestra aplicación de derecho? Mi aplicación tiene algún problema de que se cierra la aplicación cuando lo ejecuto en mi teléfono.
    • tras el cierre de la aplicación que muestra cualquier error en el log??
    • No puedo activar cualquier registro aún con ese problema
    • Dejando funciones predeterminadas en index puedo ver esto: dl2.pushbulletusercontent.com/NUYTgl6Fgi6978eL8DehOSSQdO5SFqu1/…
    • su reaccionan redux no está instalada correctamente quitar node_module e instalar el mecanismo nacional de prevención de nuevo
    • Se la relacionó con algunos obsoleta de la biblioteca tuve que instalar manualmente. Gracias por la nota

  29. 0

    En Windows y utilizar el emulador de android que usted puede hacer los siguientes pasos:

    1. Después de que el emulador se ejecuta y la aplicación, presione el Menú botón y, a continuación, seleccione «Depuración JS de forma Remota» o «Debug en Chrome» (depende del emulador mediante). Usted puede ver la siguiente imagen como referencia: emulador con los pasos de la imagen
    2. Una Pestaña nueva de Chrome se parece. Usted debe presionar Ctrl + ⇧J para mostrar las herramientas de desarrollo e iniciar el seguimiento a la depuración de los pasos. Ver esta imagen como referencia

    Además, usted debe nosotros la console.log() función para realizar el proceso de depuración más descriptivo.

  30. 0

    Realmente depende de lo que estoy haciendo. Si estoy haciendo cambios de interfaz de usuario o la depuración de la interfaz de usuario, que suelen girar en vivo y caliente de recarga y hacer cambios, a continuación, obtener información instantánea sobre ella. Si es algo más técnico, enciendo JS depuración para mirar el estado de la aplicación. Sin embargo, debido a la recarga es tan rápidos en reaccionar nativo, si el estado es demasiado desordenado, acabo de registro de la consola.

  31. 0

    Si ejecutas la aplicación en dispositivos reales, que está conectado a la computadora portátil, usted puede depurar a través de terminal usando react-native log-ios o react-native log-android (también funciona para los simuladores)

  32. 0

    Una técnica que yo uso que muy similar a la depuración de una táctica en Android es incluir una variable global llamada ETIQUETA en todos mis .js archivos.

    const TAG = 'APP_NAME+SCREEN_NAME';
    

    A continuación, cuando sea necesario, voy a hacer: console.log(TAG + 'ACTION');

    De esta manera, puedo dar seguimiento a las acciones y ver que el registro de las declaraciones están viniendo.

  33. 0

    En la nueva versión de reaccionar-nativo puede utilizar react-native log-android o react-native log-android para ver los registros de su aplicación en dev modo.

    • Usted probablemente significaba react-native log-ios
  34. 0
    1. ejecutar en la terminal adb logcat *:S ReactNative:V ReactNativeJS:V
    2. abrir proyecto en Android Studio, abra logcat (botón en la parte inferior del panel)
    3. ejecutar en la terminal react-native run-android

    Después de la construcción, usted debe ver el detalle de los registros en Android Studio en logcat.

Dejar respuesta

Please enter your comment!
Please enter your name here