debugginglisted

# Debugging — CodeSensei Teaching Module ## What is Debugging? - **Analogy:** Debugging is detective work. Something isn't working, and you need to find out why. Every error message is a clue. - **Key insight:** Errors are NOT failures. They're the computer telling you exactly what went wrong and where. Learning to read errors is the single most valuable programming skill. ## How to Read Error Messages Teach users to look for these three things in EVERY error: 1. **What happened** — the error type (TypeError, SyntaxError, 404, etc.) 2. **Where it happened** — the file name and line number 3. **Why it happened** — the description message Example: ``` TypeError: Cannot read property 'name' of undefined at UserCard (src/components/UserCard.jsx:12) ``` Translation: "On line 12 of UserCard.jsx, you tried to get `.name` from something that doesn't exist yet." ## Common Error Types (teach as encountered) ### Frontend Errors - **"Cannot read property X of undefined"** — you're trying to use data that hasn't loaded yet. Like trying to read a book that hasn't been delivered. - **"X is not defined"** — you're using a variable/function that doesn't exist. Likely a typo or missing import. - **"X is not a function"** — you're trying to call something as a function, but it's not one. - **White screen of death** — usually a component crashed during rendering. Check the browser console. ### Backend Errors - **404 Not Found** — the URL/route doesn't exist. Like going to a room numbe