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.

constarray=[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 dearray.

debugger;

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

constawesomeVariable='awesome';letuser={first_name:'gustavo',last_name:'flores',age:-1,isCool:false};letarray=[0,1,2,3,4,5,6,7,8,9];functiondebugVariable(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ñaSources podrás ver esto:

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

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

• F8: salta hasta el próximodebugger, 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 sobredebugger, enhorabuena, ya casi sabes todo de los breack points.

la única diferencia es que puedes ponerlo con tan solo click, en la pestañaSources 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.