El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Depuración de JavaScript

Siguiente ►
►

La depuración es una habilidad esencial para cualquier desarrollador. En esta sección, aprenderás cómo identificar y corregir errores en tu código JavaScript utilizando diversas herramientas y técnicas.

¿Qué es la Depuración?

La depuración es el proceso de encontrar y corregir errores o "bugs" en el código. Estos errores pueden ser sintácticos, lógicos o de ejecución. La depuración efectiva te permite mejorar la calidad y el rendimiento de tu código.

Herramientas de Depuración

  1. Consola del Navegador

La mayoría de los navegadores modernos, como Chrome, Firefox y Edge, vienen con herramientas de desarrollo integradas que incluyen una consola para depuración.

Acceso a la Consola

  • Chrome: Ctrl + Shift + J (Windows/Linux) o Cmd + Option + J (Mac)
  • Firefox: Ctrl + Shift + K (Windows/Linux) o Cmd + Option + K (Mac)
  • Edge: F12 y luego seleccionar la pestaña "Consola"

  1. console.log()

El método console.log() es una forma sencilla y rápida de imprimir mensajes y valores de variables en la consola del navegador.

let x = 10;
console.log("El valor de x es:", x);

  1. Puntos de Interrupción (Breakpoints)

Los puntos de interrupción te permiten pausar la ejecución del código en una línea específica para inspeccionar el estado del programa.

Cómo Configurar Puntos de Interrupción

  1. Abre las herramientas de desarrollo del navegador.
  2. Navega a la pestaña "Sources" (Fuentes).
  3. Encuentra el archivo JavaScript que deseas depurar.
  4. Haz clic en el número de línea donde deseas agregar un punto de interrupción.

  1. debugger Statement

La declaración debugger detiene la ejecución del código en el lugar donde se encuentra, similar a un punto de interrupción.

let y = 20;
debugger; // La ejecución se detendrá aquí
y += 10;
console.log(y);

  1. Herramientas de Desarrollo del Navegador

Las herramientas de desarrollo del navegador ofrecen una variedad de funcionalidades para la depuración, incluyendo:

  • Inspección de Variables: Ver el valor de las variables en el momento de la pausa.
  • Llamadas de Pila (Call Stack): Ver la secuencia de llamadas de funciones que llevaron al punto de interrupción.
  • Scope: Inspeccionar el alcance de las variables locales y globales.

Ejemplo Práctico de Depuración

Vamos a depurar un pequeño programa que tiene un error lógico.

Código con Error

function suma(a, b) {
    return a - b; // Error lógico: debería ser a + b
}

let resultado = suma(5, 3);
console.log("El resultado es:", resultado);

Pasos para Depurar

  1. Identificar el Problema: El resultado esperado es 8, pero el programa imprime 2.
  2. Agregar console.log(): Añadimos console.log() para verificar los valores de a y b.
function suma(a, b) {
    console.log("a:", a, "b:", b); // Verificar valores de a y b
    return a - b; // Error lógico
}

let resultado = suma(5, 3);
console.log("El resultado es:", resultado);
  1. Usar debugger: Añadimos una declaración debugger para pausar la ejecución y examinar el estado del programa.
function suma(a, b) {
    debugger; // Pausar ejecución aquí
    return a - b; // Error lógico
}

let resultado = suma(5, 3);
console.log("El resultado es:", resultado);
  1. Corregir el Error: Cambiamos el operador - por +.
function suma(a, b) {
    return a + b; // Corrección del error
}

let resultado = suma(5, 3);
console.log("El resultado es:", resultado); // Ahora imprime 8

Ejercicio Práctico

Ejercicio

Corrige el siguiente código que tiene un error lógico:

function multiplicar(a, b) {
    return a + b; // Error lógico: debería ser a * b
}

let resultado = multiplicar(4, 5);
console.log("El resultado es:", resultado);

Solución

function multiplicar(a, b) {
    return a * b; // Corrección del error
}

let resultado = multiplicar(4, 5);
console.log("El resultado es:", resultado); // Ahora imprime 20

Resumen

En esta sección, has aprendido sobre las herramientas y técnicas básicas para depurar código JavaScript. La depuración es una habilidad esencial que te permitirá identificar y corregir errores de manera eficiente, mejorando así la calidad de tu código. En la próxima sección, exploraremos cómo realizar pruebas unitarias con Jest para asegurar que tu código funcione correctamente.

◄ Anterior
◄
Siguiente ►
►

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados