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.

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.

• Presiona j desde la CLI.

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.

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

LogBox

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

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

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.