Cursos Empresas Blog Live Conf Eventos Precios

0:004:33

Recursos

Resumen

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.

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.

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.

Closures en debugging

Si el código tiene closures, aparecerán en el panel ""Scope"".

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.

Debugging

Curso de Closures y Scope en JavaScript

Clase 10 de 11

Clase 10 / 11

Daniel Flores

Hace un año

Resumen breve: Debugging

Debugging es el proceso de encontrar y corregir errores (bugs) en el código. Es esencial para mejorar el funcionamiento de tus aplicaciones. Los navegadores como Chrome ofrecen herramientas de desarrollo (DevTools) que facilitan esta tarea.

🔧 ¿Cómo acceder a DevTools?

Teclas: F12, Ctrl + Shift + I o Cmd + Opt + I
O clic derecho → "Inspeccionar"

🧪 Código de ejemplo:

var a = "Hello global";

function hello() {
  let b = "Hello function";
  if (true) {
    let c = "Hello block";
    debugger; // Pausa aquí
  }
}

hello();

🛑 debugger

Detiene la ejecución justo donde se coloca.

Solo funciona si DevTools está abierto.

Permite inspeccionar valores actuales de variables.

🎯 Breakpoints

Puedes hacer clic en una línea de código en DevTools para detener la ejecución allí.

Ideal para analizar el flujo paso a paso.

🔍 Scope en DevTools

Muestra las variables disponibles en cada contexto (global, function, block).

En closures, también se puede visualizar el scope retenido.

✅ Conclusión:

Aprender a usar herramientas como debugger, breakpoints y panel de scope te hará más eficiente para identificar y corregir errores en tus proyectos.

Comentarios (21)21 comentarios

karen gonzalez

Hace 4 años

"-utilizas para todo console log?"

yo: jaja si soy

Rafael Martínez Rodríguez

Jajajaja. Tal cual

Emerson David Cabrera Salas

Eres de los míos! Jajajaja

Mauricio Galvez

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

Oscar Fuentes Esteves

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

Santiago Rodriguez Chaves

Existe un curso de debug que da el profe degranda <3

Charles Castillo Rosas

Mis apuntes de este curso en Notion

Alirio Isea

Hace 2 años

Muy buen aporte! muchas gracias!

Ricardo Alfonso Chavez Vilcapoma

¿A alguien más le pasa que no se pueden ver las imágenes de la descripción de la clase?

Fernando Orozco Velasquez

A mi también me pasa, no sé porque será tal vez es porque ya no tienen acceso a la URL de las imágenes

Brandon Gutierrez

Hace 3 años

Solo es tratar de cambiar de server de la clase y ya te las muestra.

De (depurar) bug (error) ing (ando)

Ulises Serrano Pérez

Por si ocupan hice un micro-post acerca de este tema: https://dev.to/ulisesserranop/debugger-vs-consolelog-1jme

Johan Danilo Garzón Forero

Yo en las preguntas del inicio: 'Si señoor, si señor!' :( jajaja

Miguel Negron Garcia

Estaria brutal que trajeran un curso de debuggear pero con las herramientas que nos brinda VsCode,.

Xavier Flores

apoyo la idea.

Jonathan David Olivos

debugger

The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.

Examples

Using the debugger statement

The following example shows code where a debugger statement has been inserted, to invoke a debugger (if one exists) when the function is called.

function potentiallyBuggyCode() {
  debugger;
  // do potentially buggy stuff to examine, step through, etc.
}

When the debugger is invoked, execution is paused at the debugger statement. It is like a breakpoint in the script source.

Jherom Chacon

Dev Tools

Daniel Eduardo Salmerón Alvarado

sí

Juan Guillermo Perez Cardozo

para mi ha sido suficiente por ahora con debugger;

Andres Prieto

Yo programo en Vim, para "debugger" tengo un snippet que lo saca con darle "cd" + espacio

Jefred Bedoya

Hace 6 meses•editado

Estrategias de Debugging

Mentalidad de resolución El debugging no es un castigo, es una investigación. Antes de tocar el código, replica el error de forma consistente. Si no puedes reproducirlo, no puedes arreglarlo.

Herramientas clave

Breakpoints: Pausan la ejecución para inspeccionar el estado exacto de las variables.
Watch Expressions: Monitorean valores específicos en tiempo real mientras navegas por el código.
Call Stack: Rastrea el camino que tomó el programa para llegar al error.

Proceso lógico

Aislar: Reduce el problema a la mínima expresión.
Hipótesis: ¿Qué crees que está fallando?
Verificación: Usa console.log o herramientas de inspección para confirmar tu teoría.
Solución: Aplica el cambio y valida que no rompa nada más.

Raul Galicia Abud

Un poco off topic, ¿pero alguien sabe por qué en el Scope Local sale que "this" es Window?

Ana Velez Ossa

Buenas prácticas:

Declara siempre tus variables y funciones antes de usarlas para evitar confusiones.
Usa let y const en lugar de var para minimizar problemas con el hoisting y el alcance.

Jose Luis Bedoya

:000000

----- ----

Yo nunca me equivoco 🗿 okno xd

Juan Pablo Lagos Idrobo

Esto me ahorrara muchos console.log("pass")

Recursos

Resumen

Debugging

Progreso del curso

Bienvenida

Tipos de scope en JavaScript

Closure

Hoisting

Debugging

Cierre