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

• Un overlay "Paused in Debugger" aparece cuando tu app está en pausa. Tócalo para continuar.

• Presta atención a los paneles de la derecha durante un punto de interrupción, que te permiten inspeccionar el alcance 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.

Network

Since 0.83

El panel Network permite ver e inspeccionar las solicitudes de red realizadas por tu aplicación. Las solicitudes registradas proporcionan metadatos detallados como tiempos, cabeceras enviadas/recibidas y vistas previas de respuestas.

Las solicitudes de red se registran automáticamente cuando DevTools está abierto. Soporta la mayoría de funciones de Chrome, con algunas excepciones. Más detalles abajo.

💡 Network event coverage, Expo support

Which network events are captured?

Today, we record all network calls through fetch(), XMLHttpRequest, and <Image> — with support for custom networking libraries, such as Expo Fetch, coming later.

Expo Network differences

Because of this, apps using Expo will continue to see the "Expo Network" panel — a separate implementation by the Expo framework which will log these additional request sources but has slightly reduced features.

• Coverage for Expo-specific network events.
• No request initiator support.
• No Performance panel integration.

We're working with Expo to integrate Expo Fetch and third party networking libraries with our new Network inspection pipeline in future releases.

Unimplemented features

At launch, these are the features we don't yet support in React Native:

• WebSocket events
• Network response mocking
• Simulated network throttling

💡 Response previews buffer size

If you are inspecting a large volume of response data, please note that response previews are cached in an on-device buffer with a maximum size of 100MB. This means we may evict response previews (but not metadata) if the cache becomes too large, oldest request first.

Consejos útiles

• Usa la pestaña Initiator para ver la pila de llamadas donde se originó una solicitud de red en tu app.

• Los eventos de red también aparecerán en la pista Network del panel Performance.

Performance

Since 0.83

El seguimiento de rendimiento te permite registrar sesiones dentro de tu app para entender cómo se ejecuta tu código JavaScript y qué operaciones consumen más tiempo. En React Native mostramos ejecución JavaScript, pistas de rendimiento de React, eventos de red y User Timings personalizados, renderizados en una única línea de tiempo.

Consejos útiles

• Usa Annotations para etiquetar y marcar un seguimiento de rendimiento, útil antes de descargar y compartir con tu equipo.

• Usa la API PerformanceObserver en tu app para observar eventos de rendimiento en tiempo de ejecución, útil si quieres capturar telemetría de rendimiento.

Más información

• React Performance tracks

• API de rendimiento > User Timings | MDN

• "Depura como un senior - Panel de rendimiento en React Native" | Software Mansion

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 aplicación se cierra 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.