8. Debug en Consola y Navegador
Tutorial: Debug en Consola y Navegador
🔍 Parte 8: Debug en Consola y Navegador
🎯 Objetivo:
Aprender a depurar (debug) aplicaciones React Native usando la consola de Metro y las herramientas del navegador, identificando cuándo usar cada método.
🚀 Paso 1: Preparar la Aplicación
1.1 Iniciar la Aplicación
Abre tu terminal en el directorio del proyecto
Ejecuta:
powershell
npm run android
Espera a que la aplicación se cargue completamente
Verifica que el Metro Bundler esté corriendo:
text
Welcome to Metro!
Running "myapp" on "emulator-5554"
1.2 Entender el Flujo de Depuración
text
Tu Código → Metro Bundler → Emulador/Dispositivo
↓ ↓ ↓
Console.log → Terminal Metro → Consola Navegador
📝 Paso 2: Debug con Console.log Básico
2.1 Agregar un Console.log
Abre App.js en tu editor
Antes del return, agrega:
javascript
console.log('Hola mundo!');
Código completo del ejemplo:
javascript
const App = () => {
// Debug básico con console.log
console.log('Hola mundo!');
return (
<View style={styles.container}>
<Text>Mi Aplicación</Text>
</View>
);
};
Guarda el archivo (Ctrl+S)
2.2 Ver el Resultado en Metro
Observa la terminal de Metro
Verás algo como:
text
LOG Hola mundo!
Cada vez que guardes el archivo, se ejecutará nuevamente
2.3 Tipos de Console.log
javascript
// Diferentes niveles de log
console.log('Mensaje informativo'); // LOG
console.warn('Advertencia'); // WARN (amarillo)
console.error('Error crítico'); // ERROR (rojo)
console.debug('Debug detallado'); // DEBUG
console.info('Información'); // INFO
// Objetos y arrays
const usuario = { nombre: 'Juan', edad: 25 };
console.log('Usuario:', usuario);
console.table([usuario]); // Tabla formateada
🎪 Paso 3: Debug con Herramientas del Navegador
3.1 Abrir Menú de Debug
En el emulador/dispositivo:
Agita el dispositivo (en emulador: Ctrl+M)
O haz clic derecho en la pantalla
Selecciona "Debug" o presiona la tecla D
3.2 Conectar con el Navegador
Se abrirá una alerta preguntando qué hacer
Selecciona "Debug"
Se abrirá automáticamente una pestaña en tu navegador:
text
http://localhost:8081/debugger-ui/
Ve a la Consola del Navegador:
F12 o Ctrl+Shift+I
Pestaña "Console"
3.3 Ejemplo Práctico
Agrega en App.js:
javascript
const App = () => {
// Este log se verá en el navegador
console.log('Hola mundo desde navegador!');
// Datos de ejemplo para debug
const productos = [
{ id: 1, nombre: 'Producto A', precio: 100 },
{ id: 2, nombre: 'Producto B', precio: 200 }
];
console.log('Productos:', productos);
console.table(productos);
return (
<View style={styles.container}>
<Text>Debug en Navegador</Text>
</View>
);
};
Guarda y verifica en la consola del navegador
🔄 Paso 4: Comparación de Métodos
4.1 Consola Metro vs Navegador
4.2 ¿Cuándo usar cada uno?
✅ Usa Consola Metro cuando:
Debug rápido de valores simples
Ver logs durante desarrollo
No necesitas inspección profunda
Quieres máxima velocidad
✅ Usa Navegador cuando:
Necesitas debuggear peticiones HTTP
Quieres poner breakpoints
Inspeccionar objetos complejos
Analizar performance
Debuggear errores difíciles
⚠️ Paso 5: Problemas y Soluciones
5.1 Debug Lento con Navegador
Síntoma: La aplicación se vuelve muy lenta cuando el debug del navegador está activo.
Solución:
Desactiva el debug:
Menú del dispositivo → "Stop Debugging"
O presiona D nuevamente
Usa solo cuando sea necesario
5.2 Console.log no Aparece
Posibles causas y soluciones:
Verifica que Metro esté corriendo
powershell
# Reinicia Metro si es necesario
npm start
Limpia la caché
powershell
npx react-native start --reset-cache
Usa console.warn o console.error (son más visibles)
5.3 Navegador no se Conecta
Solución:
powershell
# Verifica que Metro esté en el puerto correcto
netstat -ano | findstr :8081
# Si el puerto está ocupado
npx kill-port 8081
npm start
🛠️ Paso 6: Técnicas Avanzadas de Debug
6.1 Debug Condicional
javascript
const App = () => {
const debugMode = true; // Cambiar a false en producción
if (debugMode) {
console.log('Modo debug activado');
console.log('Rendering App...');
}
// Resto del código...
};
6.2 Debug de Estado (State)
javascript
import React, { useState, useEffect } from 'react';
const App = () => {
const [contador, setContador] = useState(0);
const [usuarios, setUsuarios] = useState([]);
// Debug cuando el estado cambia
useEffect(() => {
console.log('Contador cambió:', contador);
}, [contador]);
// Debug de API calls
const fetchData = async () => {
console.log('Iniciando fetch...');
try {
const response = await fetch('https://api.ejemplo.com/data');
const data = await response.json();
console.log('Datos recibidos:', data);
setUsuarios(data);
} catch (error) {
console.error('Error en fetch:', error);
}
};
return (
<View>
<Text>Contador: {contador}</Text>
<Button
title="Incrementar"
onPress={() => {
console.log('Botón presionado');
setContador(prev => prev + 1);
}}
/>
</View>
);
};
6.3 Debug de Props
javascript
const MiComponente = ({ titulo, datos, onPress }) => {
// Debug de props recibidas
console.log('MiComponente - Props recibidas:', {
titulo,
datos: datos?.length,
onPress: typeof onPress
});
return (
<View>
<Text>{titulo}</Text>
</View>
);
};
🔧 Paso 7: Herramientas de Debug Útiles
7.1 React Developer Tools
Instalación:
powershell
npm install -g react-devtools
Uso:
powershell
# En una terminal separada
react-devtools
Características:
✅ Inspección de componentes
✅ Props y estado en tiempo real
✅ Jerarquía de componentes
7.2 Flipper (Facebook)
Para React Native 0.62+
powershell
# Instala Flipper desde https://fbflipper.com
# Se integra automáticamente con React Native
Ventajas:
✅ Logs visuales
✅ Network inspector
✅ Database inspector
✅ Layout inspector
7.3 Configuración Personalizada
Crea un archivo debugConfig.js:
javascript
// debugConfig.js
export const DEBUG_CONFIG = {
logs: true,
network: true,
errors: true,
performance: false
};
// Función de debug condicional
export const debugLog = (message, data = null) => {
if (DEBUG_CONFIG.logs) {
console.log(`[DEBUG] ${message}`, data || '');
}
};
// Uso en tu app
import { debugLog } from './debugConfig';
debugLog('Componente montado', { timestamp: Date.now() });
📊 Paso 8: Debug de Performance
8.1 Medir Tiempos
javascript
const ComponenteLento = () => {
const inicio = performance.now();
// Código costoso...
const resultado = procesarDatos();
const fin = performance.now();
console.log(`Tiempo de procesamiento: ${fin - inicio}ms`);
return <Text>Resultado: {resultado}</Text>;
};
8.2 Evitar Console.log en Producción
javascript
// En producción, deshabilitar console.log
if (!__DEV__) {
console.log = () => {};
console.warn = () => {};
}
🎯 Paso 9: Ejercicio Práctico
Ejercicio: Debug de API Call
Crea un componente que consuma una API
Agrega console.log en cada etapa
Debuggea tanto en Metro como en navegador
Compara la experiencia
Código de ejemplo:
javascript
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
const ApiDebugExample = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const fetchApiData = async () => {
console.log('🔵 Iniciando fetch...');
setLoading(true);
setError(null);
try {
console.log('🟡 Haciendo request a API...');
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
console.log('🟢 Response status:', response.status);
const jsonData = await response.json();
console.log('✅ Datos recibidos:', jsonData);
setData(jsonData);
} catch (err) {
console.error('❌ Error en fetch:', err);
setError(err.message);
} finally {
console.log('🏁 Fetch completado');
setLoading(false);
}
};
return (
<View style={{ padding: 20 }}>
<Button title="Obtener Datos" onPress={fetchApiData} />
{loading && <Text>Cargando...</Text>}
{error && <Text style={{ color: 'red' }}>Error: {error}</Text>}
{data && <Text>Datos: {JSON.stringify(data)}</Text>}
</View>
);
};
export default ApiDebugExample;
📋 Resumen de Comandos y Atajos
🎬 Próximo Tutorial
En el siguiente video aprenderemos:
Navegación entre pantallas
React Navigation setup
Stack Navigator básico
Paso de parámetros entre pantallas
✅ ¡Dominas ahora las técnicas básicas de debug en React Native! Recuerda: usa la consola Metro para debug rápido y el navegador solo cuando necesites herramientas avanzadas. ¡Tu productividad mejorará significativamente!
Comentarios
Publicar un comentario