Debugging Lesson Notes

debugging.md

Debugging

Objectives

• Identify common error types and their meanings
• Solve a bug with "wolf fencing"
• Use the VS Code debugging tools to step through code and identify bugs

Guiding Questions

• What is a bug 🐛?

  Your answer...

• What are some common bugs you've encountered with your javascript code?

  Your answer...

• What is "wolf fencining"? How do you use it to find errors?

  Your answer...

• Use your debugging skills to find the errors in the code bellow.

  Copy the code into a file and use console.log to find the errors.

  var zoo = [
    { name: 'Ziggy', species: 'Lemur' },
    { name: 'Spike', species: 'Aligator' },
    { name: 'Paul', species: 'Zebra' }
  ]
  
  var names = []
  
  for (var animal in zoo) {
    names.push(animal.name)
  }
  
  console.log(names)

  Your answer...

• How do you setup the built-in debugger in VS Code?

  Your answer...

• Use the VS Code debugger to find and fix the three bugs bellow:

  // We want to put all the snacks within our price limit into the result array.
  // Can you find the 3 bugs in our code and fix them?
  
  var snacks = [
    { id: 1, name: 'Delicious Crunchie Munchies', price: 4.50 },
    { id: 2, name: 'Jumbo Bannana Waffers', price: 5.99 },
    { id: 3, name: 'Zachs Zesty Stuff', price: 11.00 },
    { id: 4, name: 'Tangy Spice Blasters', price: 2.95 }
  ]
  
  var result = []
  var priceLimit = 5
  
  for (var i = 0; i < snacks.length; i++) {
    var snack = snacks[i]
    if (snack.price > priceLimit) {
      result.snack = snack
    }
  }
  
  console.log(result)
  /* Correct output should be an array of two snacks and look something like this:
  Debugger console: Array(2) [Object, Object]
  Node console:
  [ { id: 1, name: 'Delicious Crunchie Munchies', price: 4.5 },
    { id: 4, name: 'Tangy Spice Blasters', price: 2.95 } ]
  */

  Your answer...