La depuración en JavaScript implica identificar y corregir errores mediante el análisis del comportamiento del tiempo de ejecución, el seguimiento del flujo del programa y el uso de herramientas como consolas de navegador, depuradores y técnicas de registro. A continuación se muestran varios métodos para depurar en JavaScript.
1. Usando la palabra clave del depurador
La palabra clave debugger obliga al motor JavaScript a detener la ejecución en un punto determinado. Cuando se encuentra, pausa la ejecución del código y abre la herramienta de depuración del navegador.
Sintaxis:
depurador;
Ejemplo:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a   b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

Esto le permite inspeccionar las variables y el estado del programa en ese punto exacto utilizando las herramientas de desarrollo del navegador.
2. Usando console.log()
console.log() envía datos a la consola del navegador, lo que le ayuda a rastrear los valores y el flujo del programa durante el tiempo de ejecución.
Sintaxis:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: "   name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

Al colocar declaraciones console.log() en todo el código, puedes verificar si las variables contienen los valores esperados.
3. Usando puntos de interrupción
Los puntos de interrupción se pueden configurar directamente en las herramientas de desarrollo del navegador. Detienen la ejecución del código en una línea específica, permitiéndole inspeccionar el estado del programa en ese momento.
Pasos para establecer puntos de interrupción:

1. Abra Herramientas de desarrollo (presione F12 o haga clic con el botón derecho y seleccione Inspeccionar).
2. Vaya a la pestaña Fuentes.
3. Seleccione el archivo JavaScript y luego haga clic en el número de línea para establecer un punto de interrupción.
4. La ejecución del código se detendrá en esa línea y se podrán inspeccionar todas las variables y el estado. Ejemplo:

function multiply(a, b) { 
   return a * b; 
} 

dejar resultado = multiplicar(2, 5);
// Establece un punto de interrupción aquí e inspecciona los valores
En este ejemplo, después de establecer un punto de interrupción en la función multiplicar(), puede inspeccionar los valores de a y b en las Herramientas de desarrollo.
4. Usando console.warn() y console.error()
Estos métodos funcionan como console.log(), pero el resultado es visualmente distinto en la consola, lo que ayuda a diferenciar advertencias o errores.
Sintaxis:

console.warn(message); 
console.error(message);

Ejemplo:

let age = 17; 

if (age 



En este caso, console.warn() mostrará un mensaje de advertencia amarillo, mientras que console.error() mostrará un error en rojo.

5. Usando declaraciones try…catch

try…catch se utiliza para manejar los errores de tiempo de ejecución con elegancia, permitiéndole registrar errores y evitar que la aplicación falle.

Sintaxis:



try { 
   // Code that may throw an error 
} catch (error) { 
   console.error(error.message); 
} 




Ejemplo:



 try { 
   let result = JSON.parse("invalid JSON string"); 
} catch (error) { 
   console.error("An error occurred: ", error.message); 
   // Logs error without stopping the app 
}




El bloque try…catch detectará el error de análisis JSON y lo registrará en la consola sin bloquear la aplicación.

6. Uso de herramientas de seguimiento del rendimiento

Para la depuración del rendimiento, la pestaña Rendimiento en las Herramientas de desarrollo ayuda a monitorear el tiempo de ejecución de la función, el uso de la memoria y los cuellos de botella en el rendimiento.

Pasos:


Abra Herramientas de desarrollo (presione F12).
Vaya a la pestaña Rendimiento.
Haga clic en Grabar para comenzar a monitorear la ejecución del código.
Realiza acciones en tu aplicación para recopilar datos.
Detén la grabación para analizar la línea de tiempo del desempeño.
Ejemplo:



console.time("loop"); 
for (let i = 0; i 



Este ejemplo utiliza console.time() y console.timeEnd() para medir cuánto tiempo tarda en ejecutarse un bloque de código.

Al aplicar estos métodos y técnicas más avanzadas, como la supervisión del rendimiento, puedes depurar y resolver problemas de forma eficaz en tu código JavaScript.

Si estás aprendiendo JavaScript, asegúrate de seguir mis tutoriales paso a paso en Medium: https://medium.com/@CodingAdventure