Saltar al contenido principal
Versión: 0.77

Conceptos básicos de depuración

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 →

nota

Las funciones de depuración, como el Menú de desarrollo, LogBox y React Native DevTools, están deshabilitadas en compilaciones de lanzamiento (producción).

Abrir el menú de desarrollo​

React Native incluye un menú de desarrollo integrado que proporciona acceso a funciones de depuración. Puedes acceder al Dev Menu agitando tu dispositivo o mediante atajos de teclado:

  • Simulador de iOS: Ctrl + Cmd ⌘ + Z (o Device > Shake)

  • Emuladores de Android: Cmd ⌘ + M (macOS) o Ctrl + M (Windows y Linux)

Alternativa (Android): adb shell input keyevent 82.

El menú de desarrollo de React Native

Abrir DevTools​

React Native DevTools es nuestro depurador integrado para React Native. Te permite inspeccionar y comprender cómo se ejecuta tu código JavaScript, similar a un navegador web.

Para abrir DevTools, puedes:

  • Seleccionar "Open DevTools" en el Dev Menu.

  • Presionar j en la CLI (npx react-native start).

En el primer lanzamiento, DevTools se abrirá en un panel de bienvenida, junto con un cajón de consola abierto donde puedes ver registros e interactuar con el entorno de ejecución de JavaScript. Desde la parte superior de la ventana, puedes navegar a otros paneles, incluidos el Inspector de componentes de React y el Profiler integrados.

React Native DevTools abierto en el panel "Welcome"

React Native DevTools funciona con una arquitectura de depuración dedicada integrada en React Native y utiliza una versión personalizada del frontend de Chrome DevTools. Esto nos permite ofrecer funciones de depuración familiares, alineadas con los navegadores, que están profundamente integradas y diseñadas para una confiabilidad de extremo a extremo.

Más información en nuestra guía de React Native DevTools.

nota

React Native DevTools solo está disponible con el motor Hermes y requiere tener instalado Google Chrome o Microsoft Edge.

información

Flipper y herramientas alternativas de depuración​

React Native DevTools reemplaza los frontends anteriores de Flipper, Experimental Debugger y el depurador de Hermes (Chrome). Si estás en una versión anterior de React Native, por favor consulta la documentación para tu versión.

Seguimos ofreciendo métodos de depuración heredados como Direct JSC Debugging y Remote JS Debugging (obsoleto) (consulta Otros métodos de depuración).

React Native DevTools está diseñado para depurar problemas de la aplicación React, y no para reemplazar herramientas nativas. Si deseas inspeccionar las capas de plataforma subyacentes de React Native (por ejemplo, al desarrollar un Módulo Nativo), por favor utiliza las herramientas de depuración disponibles en Xcode y Android Studio (consulta Depuración de código nativo).

Otros enlaces útiles:

LogBox​

LogBox es una herramienta integrada que se muestra cuando tu aplicación registra advertencias o errores.

Una advertencia de LogBox y un error de sintaxis expandido en LogBox

Errores fatales​

Cuando ocurre un error irrecuperable, como un error de sintaxis en JavaScript, LogBox se abrirá mostrando la ubicación del error. En este estado, LogBox no se puede descartar porque tu código no puede ejecutarse. LogBox se cerrará automáticamente una vez que se corrija el error de sintaxis, ya sea mediante Actualización Rápida (Fast Refresh) o después de una recarga manual.

Errores y Advertencias de Consola​

Los errores y advertencias de consola se muestran como notificaciones en pantalla con distintivos rojos o amarillos.

  • Errores: mostrarán un contador de notificaciones. Toca la notificación para ver una vista expandida y navegar entre otros registros.

  • Advertencias: mostrarán un banner de notificación sin detalles, invitándote a abrir React Native DevTools.

Cuando React Native DevTools está abierto, todos los errores excepto los fatales se ocultarán en LogBox. Recomendamos usar el panel Consola dentro de React Native DevTools como fuente confiable, debido a varias opciones de LogBox que pueden ocultar o ajustar el nivel de ciertos registros.

💡 Ignoring logs

LogBox can be configured via the LogBox API.

js
import {LogBox} from 'react-native';

Ignore all logs​

LogBox notifications can be disabled using LogBox.ignoreAllLogs(). This can be useful in situations such as giving product demos.

js
LogBox.ignoreAllLogs();

Ignore specific logs​

Notifications can be disabled on a per-log basis via LogBox.ignoreLogs(). This can be useful for noisy warnings or those that cannot be fixed, e.g. in a third-party dependency.

js
LogBox.ignoreLogs([
  // Exact message
  'Warning: componentWillReceiveProps has been renamed',

  // Substring or regex match
  /GraphQL error: .*/,
]);
nota

LogBox will treat certain errors from React as warnings, which will mean they don't display as an in-app error notification. Advanced users can change this behaviour by customising LogBox's warning filter using LogBoxData.setWarningFilter().

Monitor de Rendimiento​

En Android e iOS, puedes activar durante el desarrollo una superposición de rendimiento en la aplicación seleccionando "Monitor de Rendimiento" (Perf Monitor) en el Menú de Desarrollo. Más información sobre esta función aquí.

El monitor de rendimiento en iOS y Android

información

El Monitor de Rendimiento funciona dentro de la aplicación y sirve como guía. Recomendamos utilizar las herramientas nativas de Android Studio y Xcode para mediciones de rendimiento precisas.