Equivocarse es humano: #howto debug en js

Hola humano errador, hoy hablaremos de debug 🐞.

Existen formas de saber por que tu código funciona o no funciona.

si no quieres ser como mi amigo de aca arriba, sigue leyendo que estas de suerte 💁‍♂️✨

En mi lista de como debuggear en js, tengo 3 puntos a tener en cuenta:

console.log("");

si bien esta es la forma mas intuitiva, revisar las variables de este modo no esta del todo bien, es la forma más rápida de hacerlo, pero cuando tienes que hacerlo más a fondo, existen mejores formas de hacerlo.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

array.forEach((number) => {
    console.log(number);
});

de este modo podrás ver en la consola de tu navegador uno a uno los números de array.

debugger;

debugger; es una herramienta poderosa al momento de poder debuggear tu código, pero esto depende de el navegador que estés usando, yo que tengo RAM de sobra uso Chrome para trabajar, por lo que las siguientes imágenes serán de Chrome.

const awesomeVariable = 'awesome';
let user = {
    first_name: 'gustavo',
    last_name: 'flores',
    age: -1,
    isCool: false
};
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function debugVariable(variable) {
    debugger;   
}

debugVariable(awesomeVariable);
debugVariable(user);
debugVariable(array);

si ejecutas este código en tu navegador, dentro de las herramientas de desarrollador, en la pestaña Sources podrás ver esto:

puedes interactuar con tus variables, y revisar que esta sucediendo con todo el scope.

para manejar este debugger y los que vienen tienes 2 botones practicos, F8 y F10:

• F8: salta hasta el próximo debugger, si no existe, el código sigue ejecutandose

• F10: salta hasta la próxima función, con esto puedes hacer un seguimiento de que se esta ejecutando.

breack points

Si entendiste todo sobre debugger, enhorabuena, ya casi sabes todo de los breack points.

la única diferencia es que puedes ponerlo con tan solo click, en la pestaña Sources podras usar los break points haciendo click en el numero de tu linea de código.

al momento de recargar la pagina, los break points se guardarán para seguir usandolos.