React Native DevTools

React Native DevTools es el depurador integrado para Expo SDK 57 / React Native 0.86 - una aplicación de escritorio basada en Chrome DevTools conectada a Hermes en tu aplicación en ejecución. Úsalo para el inspector de elementos, puntos de interrupción, trazas de red, grabaciones de rendimiento, y (nuevo en 0.86) emulación de apariencia light/dark sin cambiar la configuración del dispositivo.

Receta

Tarjeta de receta de referencia rápida - lista para copiar y pegar.

# Inicia Metro, luego adjunta DevTools a la aplicación en ejecución
npx expo start
# Presiona j en la terminal - o agita el dispositivo → Open DevTools

// Coloca esto en App.tsx - le da algo al panel Components para inspeccionar
import { useColorScheme, Pressable, StyleSheet, Text, View } from "react-native";
 
export default function App() {
  const scheme = useColorScheme() ?? "light";
  const theme = scheme === "dark" ? styles.dark : styles.light;
 
  return (
    <View style={[styles.screen, theme.screen]}>
      <Text style={[styles.title, theme.text]} accessibilityRole="header">
        Sonda de DevTools
      </Text>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Incrementar contador"
        style={[styles.button, theme.button]}
        onPress={() => console.log("pressed", Date.now())}
      >
        <Text style={theme.text}>Tócame - observa la Consola</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, justifyContent: "center", alignItems: "center", gap: 16, padding: 24 },
  title: { fontSize: 22, fontWeight: "700" },
  button: { paddingHorizontal: 20, paddingVertical: 12, borderRadius: 10 },
  light: { screen: { backgroundColor: "#f8fafc" }, text: { color: "#0f172a" }, button: { backgroundColor: "#e2e8f0" } },
  dark: { screen: { backgroundColor: "#0f172a" }, text: { color: "#f8fafc" }, button: { backgroundColor: "#334155" } },
});

Cuándo usarlo:

• Necesitas inspeccionar el árbol de React, resaltar elementos en el dispositivo, o ajustar props en tiempo de ejecución.
• Los puntos de interrupción y la salida de console.log deben reflejar la ejecución de Hermes - no una pestaña de Chrome separada.
• Estás perfilando JS commits, llamadas de red, o trabajo de renderizado de React durante la navegación o scroll.
• Quieres verificar el comportamiento de modo oscuro con la emulación de apariencia de DevTools de RN 0.86.
• Los tutoriales de Flipper ya no coinciden con tu stack de SDK 57 - DevTools es el camino soportado.

Ejemplo Funcional

// screens/DevToolsLab.tsx - monta desde App.tsx para ejercitar el inspector + performance APIs
 
import { useEffect, useState } from "react";
import { useColorScheme, Button, StyleSheet, Text, View } from "react-native";
 
export default function DevToolsLab() {
  const scheme = useColorScheme() ?? "light";
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    performance.mark("devtools-lab-mounted");
    return () => {
      performance.clearMarks("devtools-lab-mounted");
    };
  }, []);
 
  const bump = () => {
    performance.mark("bump-start");
    setCount((c) => c + 1);
    performance.mark("bump-end");
    performance.measure("bump", "bump-start", "bump-end");
    console.log("count", count + 1, "scheme", scheme);
  };
 
  return (
    <View style={[styles.root, scheme === "dark" && styles.rootDark]}>
      <Text style={styles.heading}>Laboratorio de DevTools</Text>
      <Text style={styles.meta}>Esquema activo: {scheme}</Text>
      <Text style={styles.meta}>Contador: {count}</Text>
      <Button title="Incrementar" onPress={bump} />
      <Text style={styles.hint}>
        Abre DevTools (Metro `j`) → Components para seleccionar este árbol; Performance para grabar una traza;
        Command Palette (⌘/Ctrl+Shift+P) → emula light/dark en RN 0.86+.
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1, padding: 24, gap: 10, backgroundColor: "#ffffff" },
  rootDark: { backgroundColor: "#0f172a" },
  heading: { fontSize: 20, fontWeight: "700", color: "#0f172a" },
  meta: { fontSize: 15, color: "#475569" },
  hint: { marginTop: 16, fontSize: 13, lineHeight: 20, color: "#64748b" },
});

Lo que esto demuestra:

• Un componente funcional con useState - Fast Refresh preserva el estado del contador mientras editas estilos.
• useColorScheme - re-renderiza cuando RN 0.86 DevTools emula light/dark vía Emulation.setEmulatedMedia.
• performance.mark / performance.measure - las entradas aparecen en el panel de Performance (RN 0.83+).
• console.log - se encamina a la Consola de DevTools cuando está adjunta.

Análisis Profundo

Cómo Funciona

• Metro sirve tu bundle de JS; la app abre un socket de Chrome DevTools Protocol (CDP) al empaquetador.
• Presionar j (o Open DevTools en el menú de desarrollo) lanza la aplicación de escritorio React Native DevTools, que se adjunta sobre CDP al runtime de Hermes en el dispositivo/simulador seleccionado.
• DevTools es solo para Hermes - reemplazó el depurador de JS de Flipper, el depurador experimental, y la depuración remota de Chrome (eliminada en RN 0.79).
• Desde RN 0.85, múltiples clientes de CDP pueden conectarse simultáneamente (DevTools + extensiones de VS Code + otras herramientas) sin expulsarse mutuamente.
• DevTools está deshabilitado en compilaciones de lanzamiento - igual que LogBox y el menú de desarrollo.

Abriendo DevTools

Paneles de un Vistazo

Inspector de Elementos (Panel Components)

1. Abre DevTools → Components.
2. Haz clic en Select element (arriba a la izquierda), luego toca una vista en el dispositivo - DevTools enfoca la fiber coincidente.
3. Edita props o state de hooks en el cajón derecho para probar la UI sin recompilar.
4. Habilita Highlight updates when components render (⚙︎) para detectar re-renderizaciones evitables.

Los componentes optimizados con React Compiler muestran un badge Memo ✨ en el árbol.

Performance y Network (RN 0.83+)

• Network captura automáticamente mientras DevTools está abierto. Los previsualizados de respuesta se almacenan hasta 100 MB en el dispositivo (el más antiguo se evicta primero).
• Performance fusiona la ejecución de JavaScript, pistas de React Performance, eventos de red, y User Timings personalizados (performance.mark).
• Aún no en el panel de Network de RN: eventos de WebSocket, throttling, mocking de respuestas.

Advertencia de Expo: Los proyectos de SDK 57 pueden mostrar un panel de Expo Network para solicitudes fuera de fetch / XHR / <Image> (por ejemplo algunos caminos de Expo Fetch). Carece de integración de iniciador y vinculación con el panel de Performance - prefiere el panel de Network de núcleo cuando tus llamadas están cubiertas.

Emulación Light/Dark (RN 0.86)

RN 0.86 añade emulación de apariencia sin cambiar el tema del SO del dispositivo:

1. Abre la Paleta de Comandos de DevTools - ⌘+Shift+P (macOS) o Ctrl+Shift+P (Windows/Linux).
2. Ejecuta el comando de emulación light/dark (Emulation.setEmulatedMedia).
3. Observa cómo useColorScheme() y los estilos temáticos se actualizan en el dispositivo.

La anulación es temporal - se reinicia cuando se desconecta DevTools. Para pruebas de tema persistentes en la app, usa Appearance.setColorScheme() en compilaciones de desarrollo (mira Dark Mode & Color Schemes).

Notas de TypeScript

// debugger; es válido en fuentes .tsx - DevTools rompe en el bundle de Hermes en vivo
export function debugBreakpoint(value: unknown) {
  if (__DEV__) {
    // eslint-disable-next-line no-debugger
    debugger;
    console.log("debugBreakpoint", value);
  }
}

Errores Comunes

• Usando chrome://inspect para RN 0.86 - La depuración remota de Chrome se eliminó; la sesión no refleja bytecode de Hermes. Arreglo: Presiona j o usa el menú de desarrollo Open DevTools.
• Esperando DevTools en producción - Las herramientas de depuración se compilan fuera de las compilaciones de lanzamiento. Arreglo: Reproduce en una compilación de desarrollo o binario de simulador __DEV__.
• Los puntos de interrupción nunca se golpean después de una reconstrucción nativa - La sesión de CDP muere cuando reinstala la app. Arreglo: Usa el diálogo de reconexión o presiona j de nuevo.
• El inspector muestra props obsoletos - Editaste el estado en DevTools pero Fast Refresh remontó el árbol. Arreglo: Vuelve a seleccionar el elemento; prefiere ediciones de props para sondeos rápidos, ediciones de código para cambios duraderos.
• Panel de Network vacío para clientes personalizados - Solo fetch, XMLHttpRequest, e <Image> están instrumentados hoy. Arreglo: Verifica Expo Network para pilas no cubiertas, o registra en la capa de redes hasta que el soporte de la biblioteca aterrice.
• La emulación de light/dark "no hace nada" - La pantalla ignora useColorScheme y codifica colores. Arreglo: Rama estilos de tokens de esquema; la emulación impulsa la misma API que el toggle del SO.
• La aplicación de escritorio DevTools bloqueada por firewall - Las redes corporativas pueden bloquear la descarga binaria notarizada. Arreglo: Permite la descarga o recurre al flujo de lanzamiento del navegador que proporciona RN.

Alternativas

Preguntas Frecuentes

Relacionado

• Local Development Basics - Atajos de Metro incluyendo j y limpieza de caché
• Flipper & Alternative Debuggers - cuándo las herramientas nativas del IDE superan a JS DevTools
• Hot Reload vs Fast Refresh - por qué debugger; y puntos de interrupción interactúan con Fast Refresh
• Hermes & the JS Runtime - comportamiento del motor detrás del depurador
• Dark Mode & Color Schemes - tokens de tema real más allá de la emulación de DevTools

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).