Depuracion

Depuracion en JavaScript

Saber depurar es una habilidad esencial. JavaScript proporciona varias herramientas para encontrar y corregir errores.

Metodos de Console

// Basicos
console.log("Mensaje normal");
console.info("Informacion");
console.warn("Advertencia"); // Amarillo
console.error("Error");      // Rojo

// Con formato
console.log("Usuario: %s, Edad: %d", "Ana", 25);
console.log("Objeto: %o", { nombre: "Ana" });

// Agrupando
console.group("Grupo de logs");
console.log("Log 1");
console.log("Log 2");
console.groupEnd();

// Tabla (excelente para arrays/objetos)
const usuarios = [
  { nombre: "Ana", edad: 25 },
  { nombre: "Juan", edad: 30 }
];
console.table(usuarios);

// Tiempo de ejecucion
console.time("mi-operacion");
// ... codigo a medir
console.timeEnd("mi-operacion"); // mi-operacion: 123ms

// Conteo
for (let i = 0; i < 5; i++) {
  console.count("iteracion"); // iteracion: 1, 2, 3, 4, 5
}

// Limpiar consola
console.clear();

Debugger y Breakpoints

function calcular(a, b) {
  debugger; // Pausa la ejecucion aqui
  const resultado = a + b;
  return resultado;
}

// Cuando debugger se encuentra:
// 1. El navegador pausa la ejecucion
// 2. Puedes inspeccionar variables
// 3. Puedes avanzar paso a paso

// Tambien puedes poner breakpoints directamente en DevTools:
// - Click en el numero de linea en Sources
// - Breakpoints condicionales: click derecho > "Add conditional breakpoint"

Manejo de Errores

// try...catch...finally
try {
  const datos = JSON.parse(jsonInvalido);
} catch (error) {
  console.error("Error al parsear:", error.message);
  // error.name - tipo de error
  // error.message - descripcion
  // error.stack - stack trace
} finally {
  console.log("Siempre se ejecuta");
}

// Lanzar errores personalizados
function dividir(a, b) {
  if (b === 0) {
    throw new Error("No se puede dividir por cero");
  }
  return a / b;
}

// Tipos de error integrados
throw new TypeError("Se esperaba un string");
throw new RangeError("Valor fuera de rango");
throw new ReferenceError("Variable no definida");

DevTools del Navegador