Aprende a debuggear

JS

Sobre mí

  • Creadora 👩‍🎨
  • Pythonista 🧡
  • Front End Coach en Laboratoria 👩‍💻👩‍🏫
  • Hecha en El Alto 🏔️

Open Code⋅Open Science⋅Open Education

A lot of the material derives from:

  • Syntax Podcast
  • Lady Bug Podcast
  • Chrome Devs Docs

 

Hola!

👋 Presentate en el chat 💬

  • Nombre
  • Ciudad
  • Ocupación
  • Has aprendido alguna vez formalmente a debuggear?

Objetivo de la charla

Compartir contigo el mindset de debugging y algunas herraminetas para debuggear JavaScript

Debugging? 💭

Identificar y Eliminar
Errores🔎🐛

Debugging mindset

💆‍♀️

  • ❓Has las preguntas correctas

  • ❓Has las preguntas correctas.

  • 👁️‍🗨️Lee el stacktrace

  • ❓Has las preguntas correctas

  • 👁️‍🗨️Lee el stacktrace

  • ✔️Realiza un checklist de que debería pasar

  • ❓Has las preguntas correctas

  • 👁️‍🗨️Lee el stacktrace

  • ✔️Realiza un checklist de que debería pasar!

  • 📦Aisla el problema

  • ❓Has las preguntas correctas

  • 👁️‍🗨️Lee el stacktrace

  • ✔️Realiza un checklist de que debería pasar

  • 📦Aisla el problema

  • ✍️Documenta como resolviste el problema

Usemos el debugging mindset

💪

Situación #1

"Mi botón no funciona"😰

Has las preguntas correctas

  • Qué es lo que este botón debería hacer?
  • Dónde está el botón?
  • Cuando ocurre el bug?
  • ...
  • ...
  • ...

 

Lee el stacktrace

Como abrir el stacktrace

Lee el stacktrace

Lee el stacktrace

Lee el stacktrace

Lee el stacktrace

Situación #2

Cuando intentas correr una aplicación NodeJS la terminal muestra un error gigante!

😨😨😨

Lee el stacktrace!

$ node stacktrace.js
/Users/harrymoreno/stacktrace.js:9
  notDefined();
  ^

ReferenceError: notDefined is not defined
    at c (/Users/harrymoreno/stacktrace.js:9:3)
    at b (/Users/harrymoreno/stacktrace.js:6:3)
    at a (/Users/harrymoreno/stacktrace.js:3:3)
    at Object.<anonymous> (/Users/harrymoreno/stacktrace.js:11:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Function.Module.runMain (module.js:575:10)
$ node stacktrace.js
/Users/harrymoreno/stacktrace.js:9
  notDefined();
  ^

ReferenceError: notDefined is not defined
    at c (/Users/harrymoreno/stacktrace.js:9:3)
    at b (/Users/harrymoreno/stacktrace.js:6:3)
    at a (/Users/harrymoreno/stacktrace.js:3:3)
    at Object.<anonymous> (/Users/harrymoreno/stacktrace.js:11:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Function.Module.runMain (module.js:575:10)

Ignora los errores que están en archivos que no nos pertenecen

$ node stacktrace.js
/Users/harrymoreno/stacktrace.js:9
  notDefined();
  ^

ReferenceError: notDefined is not defined
    at c (/Users/harrymoreno/stacktrace.js:9:3)
    at b (/Users/harrymoreno/stacktrace.js:6:3)
    at a (/Users/harrymoreno/stacktrace.js:3:3)
    at Object.<anonymous> (/Users/harrymoreno/stacktrace.js:11:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Function.Module.runMain (module.js:575:10)

Text

$ node stacktrace.js
/Users/harrymoreno/stacktrace.js:9
  notDefined();
  ^

ReferenceError: notDefined is not defined
    at c (/Users/harrymoreno/stacktrace.js:9:3)
    at b (/Users/harrymoreno/stacktrace.js:6:3)
    at a (/Users/harrymoreno/stacktrace.js:3:3)
    at Object.<anonymous> (/Users/harrymoreno/stacktrace.js:11:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Function.Module.runMain (module.js:575:10)

Text

Tipo de error

$ node stacktrace.js
/Users/harrymoreno/stacktrace.js:9
  notDefined();
  ^

ReferenceError: notDefined is not defined
    at c (/Users/harrymoreno/stacktrace.js:9:3)
    at b (/Users/harrymoreno/stacktrace.js:6:3)
    at a (/Users/harrymoreno/stacktrace.js:3:3)
    at Object.<anonymous> (/Users/harrymoreno/stacktrace.js:11:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Function.Module.runMain (module.js:575:10)

Text

Stack Frame punto de entrada

Revisemos el código!

// stacktrace.js
a = () => {
  b();
}
b = () => {
  c();
}
c = () => {
  notDefined();
}
a();
// stacktrace.js
a = () => {
  b();
}
b = () => {
  c();
}
c = () => {
  notDefined();
}
a();

Repaso

Repaso: Debugger mindset

  • Has las preguntas correctas.

  • Lee el stacktrace.

  • Realiza una lista de que debería pasar.

  • Documenta como resolviste el error!

     

Los bugs son opportunidades para APRENDER y CRECER!

Sigamos en contacto!

@luucamay_

Aprende a debuggear JS

By Lupe Maydana

Made with Slides.com

Aprende a debuggear JS

  • 289

More from Lupe Maydana