React Native DevTools

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

React Native DevTools es nuestra experiencia moderna de depuración para React Native. Diseñada desde cero, tiene como objetivo ser fundamentalmente más integrada, correcta y confiable que los métodos de depuración anteriores.

React Native DevTools está diseñado para depurar aspectos de aplicaciones React, no para reemplazar herramientas nativas. Si necesitas inspeccionar las capas de plataforma subyacentes de React Native (por ejemplo, al desarrollar un Native Module), utiliza las herramientas de depuración disponibles en Android Studio y Xcode (consulta Depuración de código nativo).

💡 Compatibility — released in 0.76

React Native DevTools supports all React Native apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends.

It is not possible to set up React Native DevTools with any older versions of React Native.

• Chrome Browser DevTools — unsupported
  • Connecting to React Native via chrome://inspect is no longer supported. Features may not work correctly, as the latest versions of Chrome DevTools (which are built to match the latest browser capabilities and APIs) have not been tested, and this frontend lacks our customisations. Instead, we ship a supported version with React Native DevTools.
• Visual Studio Code — unsupported (pre-existing)
  • Third party extensions such as Expo Tools and Radon IDE may have improved compatibility, but are not directly supported by the React team.

💡 Feedback & FAQs

We want the tooling you use to debug React across all platforms to be reliable, familiar, simple, and cohesive. All the features described on this page are built with these principles in mind, and we also want to offer more capabilities in future.

We are actively iterating on the future of React Native DevTools, and have created a centralized GitHub discussion to keep track of issues, frequently asked questions, and feedback.

Funciones principales

React Native DevTools se basa en el frontend de Chrome DevTools. Si tienes experiencia en desarrollo web, sus funciones te resultarán familiares. Como punto de partida, recomendamos explorar la documentación de Chrome DevTools que incluye guías completas y recursos en video.

Consola

El panel Consola permite ver y filtrar mensajes, evaluar JavaScript, inspeccionar propiedades de objetos y más.

Referencia de funciones de la Consola | Chrome DevTools

Consejos útiles

• Si tu aplicación genera muchos registros, usa el cuadro de filtro o modifica los niveles de registro mostrados.

• Monitorea valores en el tiempo con Live Expressions.

• Conserva mensajes entre recargas con Preserve Logs.

• Usa Ctrl + L para limpiar la vista de la consola.

Fuentes y puntos de interrupción

El panel Fuentes permite ver archivos fuente de tu aplicación y registrar puntos de interrupción. Usa un punto de interrupción para definir una línea de código donde tu aplicación debe pausarse, permitiéndote inspeccionar el estado en vivo del programa y avanzar paso a paso por el código.

Pausa tu código con puntos de interrupción | Chrome DevTools

consejo

Mini-guía

¡Los puntos de interrupción son una herramienta fundamental en tu kit de depuración!

1. Navega a un archivo fuente usando la barra lateral o Cmd ⌘+P / Ctrl+P.
2. Haz clic en la columna de números de línea junto a una línea de código para añadir un punto de interrupción.
3. Usa los controles de navegación en la esquina superior derecha para avanzar paso a paso por el código cuando esté en pausa.

Consejos útiles

• Aparecerá una superposición "Paused in Debugger" cuando tu aplicación esté en pausa. Tócala para continuar.

• Presta atención a los paneles del lado derecho durante un punto de interrupción, que permiten inspeccionar el ámbito actual, la pila de llamadas y establecer expresiones de seguimiento.

• Usa una sentencia debugger; para establecer rápidamente un punto de interrupción desde tu editor de texto. Esto llegará al dispositivo inmediatamente mediante Fast Refresh.

• ¡Existen múltiples tipos de puntos de interrupción! Por ejemplo, Conditional Breakpoints y Logpoints.

Memoria

El panel Memoria permite tomar instantáneas del montón y ver el uso de memoria de tu código JavaScript a lo largo del tiempo.

Registrar instantáneas del montón | Chrome DevTools

Consejos útiles

• Usa Cmd ⌘+F / Ctrl+F para filtrar objetos específicos en el montículo.

• Realizar un informe de línea de tiempo de asignaciones puede ser útil para ver el uso de memoria a lo largo del tiempo como gráfico, identificando posibles fugas de memoria.

Características de React DevTools

En los paneles integrados de Componentes y Perfilador, encontrarás todas las funciones de la extensión de navegador React DevTools. Estas funcionan perfectamente en React Native DevTools.

Componentes de React

El panel Componentes de React te permite inspeccionar y actualizar el árbol de componentes de React renderizado.

• Pasa el cursor o selecciona un elemento en DevTools para resaltarlo en el dispositivo.

• Para localizar un elemento en DevTools, haz clic en el botón "Seleccionar elemento" arriba a la izquierda, luego toca cualquier elemento en la app.

Consejos útiles

• Las props y estado de un componente pueden verse y modificarse en tiempo de ejecución usando el panel derecho.

• Los componentes optimizados con React Compiler tendrán una insignia "Memo ✨".

consejo

Consejo profesional: Resaltar re-renderizaciones

Las re-renderizaciones pueden ser causa significativa de problemas de rendimiento en apps React. DevTools puede resaltar re-renderizaciones de componentes al ocurrir.

• Para activar: Haz clic en el ícono Configuración de vista (⚙︎) y marca "Resaltar actualizaciones cuando los componentes se renderizan".

Perfilador de React

El panel Perfilador de React te permite grabar perfiles de rendimiento para entender tiempos de renderizado de componentes y commits de React.

Para más información, consulta la guía original de 2018 (nota: partes pueden estar desactualizadas).

Reconectar DevTools

Ocasionalmente, DevTools puede desconectarse del dispositivo objetivo. Esto puede ocurrir si:

• La app se cierra.

• La app se reconstruye (se instala nueva compilación nativa).

• La app falla en el lado nativo.

• El servidor de desarrollo (Metro) se cierra.

• Un dispositivo físico se desconecta.

Al desconectarse, se mostrará un diálogo con el mensaje "Se cerró la conexión de depuración".

Desde aquí puedes:

• Descartar: Selecciona el ícono cerrar (×) o haz clic fuera del diálogo para volver a la UI de DevTools en su último estado antes de desconexión.

• Reconectar: Selecciona "Reconectar DevTools", habiendo resuelto la causa de desconexión.