Debugging like superwoman!

About me

  • Creator 👩‍🎨
  • Pythonista at 🧡
  • Front End Coach at Laboratoria 👩‍💻👩‍🏫
  • Made in El Alto 🏔️

Open Code⋅Open Science⋅Open Education

A lot of the material derives from:

  • Syntax Podcast
  • Lady Bug Podcast
  • Chrome Devs Docs

 

Welcome heroines :)

👋 Introduce yourself in the chat 💬

  • Name
  • Location
  • Current role
  • Have you ever formally learn debugging?

Talk's goal

Share with you the debugging mindset and some tools for JavaScript debugging

Debugging? 💭

Identify and
Remove
Errors 🔎🐛

Her "debugging mindset"

💆‍♀️

  • ❓Ask the right questions

  • ❓Ask the right questions

  • 👁️‍🗨️Read the stack trace

  • ❓Ask the right questions

  • 👁️‍🗨️Read the stack trace

  • ✔️Set up a checklist of what should happen!

  • ❓Ask the right questions

  • 👁️‍🗨️Read the stack trace

  • ✔️Set up a checklist of what should happen!

  • 📦Isolate the problem

  • ❓Ask the right questions

  • 👁️‍🗨️Read the stack trace

  • ✔️Set up a checklist of what should happen!

  • 📦Isolate the problem

  • ✍️Document how to solve the problem

let's use this mindset! 💪

Situation #1

"My button does not work"😰

Asking the right questions

  • What is the button supposed to do?
  • Where is that button?
  • When the bug happens?
  • ...
  • ...
  • ...

 

Read the stack trace

Open stack trace on browser

Read the stack trace

Read the stack trace

Read the stack trace

Read the stack trace

Situation #2

When trying to run our NodeJS application the terminal shows a huge error!

😨😨😨

Read the stack trace

$ 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)

Text

Ignore errors we are not owners

$ 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

Type of 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 entry point

Let's look at the code!

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

Recap

Recap: Debugger mindset

  • Ask the right questions

  • Read the stack trace

  • Set up a checklist of what should happen!

  • Document how to solve the bug!

     

Bugs are opportunities to LEARN and GROW!

Contact me!

@luucamay_

Debugging like superwoman!

By Lupe Maydana

Made with Slides.com

Debugging like superwoman!

  • 231

More from Lupe Maydana