No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Debugging

10/11
Recursos

Debugging es el t√©rmino para solucionar bugs. Los bugs (‚Äúbichos‚ÄĚ en ingl√©s) son errores en la aplicaci√≥n, saber c√≥mo solucionarlos de manera eficiente es clave para tu desarrollo como profesional.

Todo navegador dispone de Dev tools o herramientas de desarrollador, que es un conjunto de características del código de la página web, una de estas es el debugging.

La consola del navegador es importante para ver qu√© est√° pasando con el c√≥digo generado. La consola se muestra con la combinaci√≥n de teclas F12 / Ctrl + Shift + I / Cmd+Opt+I o clic derecho e ‚ÄúInspeccionar‚ÄĚ en tu navegador preferido (de preferencia Google Chrome).

Código de ejemplo

El código de ejemplo que se usará en las Dev Tools será el siguiente:

var a = "Hello global"

function hello() {
  let b = "Hello function"

  if(true) {
    let c = "Hello block"
  }
}

hello()

Palabra reservada debugger

La palabra reservada debugger sirve para detener la ejecución del programa, pero solo funciona si el panel de las herramientas de desarrollo está abierto. Este panel te mostrará información sobre el código hasta la línea del debugger.

Ejecuta el código de prueba que contenga la palabra reservada debugger en la consola de tu navegador, puedes hacerlo en una página en blanco tan solo poniendo about:blank como una URL.

var a = "Hello global"

function hello() {
  let b = "Hello function"

  if(true) {
    let c = "Hello block"
    debugger // <---- Palabra reservada para debbuging
  }
}

hello()

Al momento de ejecutar el código te aparecerá el panel de debugging.

Herramientas de desarrollador de Chrome

En el panel de informaci√≥n, existe un apartado ‚ÄúScope‚ÄĚ que muestra el *scope/ de cada variable correspondiente al punto donde la ejecuci√≥n se detuvo.

Sección de Scope de las DevTools de Chrome

Breakpoints

Los breakpoints son puntos donde la ejecución del programa se parará. Para activarlos se debe dar clic en la línea de código que se desea parar.

Breakpoints en un código JavaScript

Closures en debugging

Si el c√≥digo tiene closures, aparecer√°n en el panel ‚ÄúScope‚ÄĚ.
scope_closure05.PNG

Para concluir, deberías aprender a utilizar las herramientas de desarrollo web para ser más eficiente, y de esta forma encontrar de manera eficiente la causa de un error o un comportamiento no deseado que provocaría un bug.

Contribución creada por Andrés Guano.

Aportes 7

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

les comparto un recurso de como realizar debugging desde visual stuio code.
https://www.youtube.com/watch?v=YpFR8Q2lVDU&t=10s

‚Äú-utilizas para todo console log?‚ÄĚ

yo: jaja si soy

Curso de Debugging con Chrome DevTools de Platzi: https://platzi.com/cursos/devtools/

una extensión de VSCode muy conocida, pero a alguien le puede servir: Error Lens.

Existe un curso de debug que da el profe degranda ‚̧ԳŹ

para mi ha sido suficiente por ahora con debugger;

Dev Tools