Herramientas de depuración web

En este artículo vamos a explicar las herramientas de depuración web que ofrece la consola del navegador y cómo depurar errores, menajes de advertencias y ver otros registros de información. Este artículo forma parte de la serie la consola del navegador. Una serie de diez artículos donde se explican todas las funcionalidades de la consola del navegador y que facilitan el proceso de desarrollo, depuración y optimización de sitios y aplicaciones web.

La consola del navegador es una herramienta básica para depurar errores, advertencias y registros de información en aplicaciones web. En este artículo, explicaremos cómo utilizar la consola de manera efectiva para identificar y solucionar problemas en el código JavaScript.

Tipos de depuración web

Tal y como vimos en el artículo donde se explicaban las diferentes pestañas de la consola del navegador, la pestaña Consola nos abre la puerta a muchas funcionalidades. Entre estas funcionalidades están las herramientas de depueración web. Entre los distintos registros de información que podemos obtener están los siguientes:

Identificación de errores

Cuando el navegador encuentra un error en el código JavaScript, muestra un mensaje detallado en la Consola para indicar el tipo de error y la ubicación del problema. Algunos ejemplos de mensajes de error comunes serían:

ReferenceError: Se produce cuando intentas utilizar una variable que no está definida.

console.log(variableNoDefinida); 
// ReferenceError: variableNoDefinida is not defined

TypeError: Se produce cuando intentas realizar una operación en un tipo de datos incorrecto.

console.log(null.foo); 
// TypeError: Cannot read property 'foo' of null

SyntaxError: Se produce cuando el código JavaScript contiene errores de sintaxis.

console.log('Hola);
// SyntaxError: Unexpected string

Advertencias y registros

Además de los errores, la Consola también puede mostrar advertencias y mensajes de registro que pueden ser útiles para identificar posibles problemas en el código. Algunos ejemplos serían:

console.warn(): Muestra un mensaje de advertencia en la consola.

  console.warn("¡Cuidado! Este es un mensaje de advertencia.");

console.error(): Muestra un mensaje de error en la consola.

  console.error("¡Error! Esto es un mensaje de error.");

console.log(): Registra un mensaje de información en la consola.

  console.log("Esto es un mensaje de registro.");

Depuración interactiva

Una de las ventajas de la Consola es que proporciona un entorno interactivo donde puedes ejecutar código JavaScript en tiempo real para probar funciones y expresiones. Por ejemplo:

Ejecución de código: Puedes escribir y ejecutar código JavaScript directamente en la consola para realizar pruebas rápidas.

  let resultado = 5 + 3;
  console.log(resultado); // 8

Exploración de variables: Puedes inspeccionar el valor de las variables en un punto específico de la ejecución del programa.

  let mensaje = "¡Hola, mundo!";
  console.log(mensaje); // ¡Hola, mundo!

Establecimiento de puntos de interrupción: Utiliza la instrucción debugger; para establecer puntos de interrupción en el código y detener la ejecución en ese punto para inspeccionar el estado del programa.

  function miFuncion() {
    let x = 10;
    debugger;
    console.log(x); // El código se detiene aquí
  }