🎯 Today's Goal: Transform from fearing errors to using them as debugging tools!
📚 Introduction: Why Errors Are Good
Complete this thought: Error messages are not your _______________,
they are your _______________!
Without error messages, debugging would be:
- _________________________
- _________________________
- _________________________
🔬 Anatomy of an Error Message
Uncaught ReferenceError: c is not defined
at script.js:4:13
Label each part of the error message:
| Part |
Example |
What It Tells You |
| Error Type |
ReferenceError |
_________________________ |
| Error Message |
c is not defined |
_________________________ |
| File Name |
script.js |
_________________________ |
| Location |
4:13 |
Line ____, Column ____ |
🚨 Three Main Error Types
1. ReferenceError
Definition: _________________________________________
Common Causes:
- Typos in _______________ names
- Using variables before _______________ them
- Variable is out of _______________
// Example - Fix this code:
const userName = "Alice";
console.log(userNmae); // What's wrong? _______________
2. SyntaxError
Definition: _________________________________________
Common Causes:
- Missing _______________: ( ) { } [ ]
- Missing _______________: " " or ' '
- Missing or extra _______________
// Example - Add what's missing:
function helloWorld() {
console.log___"Hello World!"___
}
3. TypeError
Definition: When you try to use a value in an _______________ way
Common Scenarios:
- Using wrong _______________ for data type
- Calling something that's not a _______________
- Accessing properties on _______________ or _______________
// Example - Why does this fail?
const str1 = "Hello";
const str2 = "World";
const message = str1.push(str2); // Error because: _______________________
📚 Understanding Stack Traces
A stack trace shows the _______________ of function calls that led to the error.
Uncaught ReferenceError: c is not defined
at add (script.js:2:10)
at print (script.js:6:3)
at script.js:9:1
Reading the stack trace (fill in the sequence):
- Error occurred in function: _______________ at line _____
- Which was called by function: _______________ at line _____
- Which was called from: _______________ at line _____
🛠️ Debugging Tools & Techniques
Console Methods
| Method |
Purpose |
When to Use |
| console.log() |
Regular output |
_________________________ |
| console.error() |
Red error style |
_________________________ |
| console.table() |
Table format |
_________________________ |
| console.trace() |
Show stack trace |
_________________________ |
The Debugger Statement
Adding debugger; to your code will:
- _______________ execution at that point
- Let you inspect all _______________
- Allow you to step through code _______________ by _______________
⚠️ Errors vs Warnings
| Aspect |
🛑 Errors (Red) |
⚠️ Warnings (Yellow) |
| Execution |
_______________ code |
Code _______________ running |
| Severity |
Must be _______________ |
Should be _______________ |
| Impact |
_______________ your program |
Potential _______________ |
🕵️ Your Debugging Strategy
The 4-Step Process:
-
Read: Don't panic! The error type is _______________
and the message is _______________
-
Locate: Click the _______________ link to jump to the problem
-
Understand: Look at the _______________ around the error
-
Research: Copy the _______________ (not your code) and search
💡 Google Search Tips:
Good: "TypeError push is not a function string javascript"
Bad: "my code doesn't work help"
💻 Practice: Debug This Code!
Find and fix all errors in this shopping cart code:
const items = [
{ name: "Shirt" price: 29.99 }, // Error 1: _______________
{ name: "Pants", price: 49.99 },
{ name: "Shoes", price: 79.99 }
];
function calculateTotal(cartItems) {
let total = 0;
for (item of cartitems) { // Error 2: _______________
total += item.price;
}
return totl; // Error 3: _______________
}
console.log("Total: $" + calculateTotal(items).toUppercase()); // Error 4: _______________
🛡️ Handling Errors Gracefully
Try-Catch Syntax
try {
// Code that might _______________ an error
} catch (error) {
// Handle the error _______________
console.error("Error:", error.message);
}
Use try-catch when:
- Dealing with user _______________
- Making _______________ calls
- Parsing _______________ or other data
- Any operation that might _______________
⭐ Best Practices
Professional Debugging Tips (check off as discussed):
- ☐ Read error messages _______________ before panicking
- ☐ Fix _______________ error at a time (start with the first)
- ☐ Use descriptive _______________ names to avoid typos
- ☐ Test code _______________ (don't write 100 lines then test)
- ☐ Keep _______________ open while developing
- ☐ _______________ out code to isolate problems
- ☐ Take _______________ when stuck (fresh eyes help!)
📋 Quick Reference
Common Error Messages and Solutions
| Error Message |
Likely Cause |
Solution |
| "is not defined" |
_______________ |
Check spelling and scope |
| "is not a function" |
_______________ |
Check data type and methods |
| "Unexpected token" |
_______________ |
Check brackets and quotes |
| "Cannot read property of undefined" |
_______________ |
Check if object exists first |
🤔 Review Questions
- What are the three main types of JavaScript errors?
1. _______________
2. _______________
3. _______________
- What two parts of an error message help you find where the error originates?
1. _______________
2. _______________
- What is the key difference between an error and a warning?
- Name three console methods besides console.log():
1. _______________
2. _______________
3. _______________
- What does the debugger statement do?
📝 Tonight's Assignment
From The Odin Project - Complete these exercises:
- ☐ Read MDN docs on ReferenceError, SyntaxError, TypeError
- ☐ Work through "What went wrong?" troubleshooting guide
- ☐ Download and fix the intentionally broken starter code
- ☐ Practice with console methods (table, trace, time)
📝 Additional Notes
Use this space for any additional notes during the lecture: