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.

• 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 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, consulta la documentación para tu versión.

Para aplicaciones que usan JavaScriptCore en lugar de Hermes, Direct JSC Debugging sigue disponible (consulta Otros métodos de depuración).

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

Otros enlaces útiles:

• Why you don’t need Flipper in your React Native app … and how to get by without it ↗

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.