JavaScript Debugging
Debugging means finding why the program does the wrong thing. This page has one order, { drink: "tea", size: "regular" }, and one wrong property name. The broken log is tea / undefined. After the fix, the page line is fixed / tea / regular.
Not a class lesson
The previous page built Drink and SpecialDrink. Its line was tea / regular / mint. Nothing there was broken on purpose.
Here the data is already correct. The function reads order.cup, but the object has size, not cup.
Read the value before you rewrite the function
console.log prints a value and the script keeps going. console.warn marks a warning. console.error marks a failure. None of them repairs the data. They only make the wrong value visible.
The property name is wrong
label joins order.drink and order.cup. drink exists, so the first word is tea. cup does not exist, so the second word is undefined.
const order = { drink: "tea", size: "regular" };
function label(order) {
return order.drink + " / " + order.cup;
}
console.log(label(order));
The log is tea / undefined. The object still has size. The function never read it.
Mark the failure
When size is missing, call console.error with a short reason. This snippet passes an empty object, so the error path runs.
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
console.log(label({ drink: "tea" }));
The console shows the error missing size, and the returned text is tea / missing size. An empty size string is also treated as missing because !"" is true.
Pause on purpose
The debugger statement asks the browser to pause when developer tools are open. If the tools are closed, the statement does nothing and the next line still runs.
const order = { drink: "tea", size: "regular" };
debugger;
console.log(order.size);
With the tools open, execution stops on debugger and you can inspect order. With the tools closed, the log is still regular. debugger is not an error and it does not change order.
The call list
If label calls format, and format throws, the console lists both function names. Start at the top of that list: it is the line that failed. Then step back to the caller. This page’s bug throws nothing; undefined is a value, so the list stays quiet until you log it.
Change one name
Replace order.cup with order.size. Do not add a cup property just to silence undefined. The object was already right.
The line after the fix
The page reads size, checks it, and writes a short status before the label.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { drink: "tea", size: "regular" };
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
document.getElementById("line").textContent = "fixed / " + label(order);
</script>
</body>
</html>
The line reads fixed / tea / regular. The word fixed is only a status. The drink and size come from the object. tea / undefined was the broken function.
At the counter
- Log
label(order)while it readsorder.cup. The log is tea / undefined. - Pass
{ drink: "tea" }and read the error. The message is missing size. - Leave
debuggerin the script. With tools closed, the next log is still regular. - Read the page line: fixed / tea / regular.
Misses at the counter
- Changing the object because the log says undefined
- Treating
console.logas a pause - Expecting
debuggerto stop the page when developer tools are closed - Reading
tea / regular / mintfrom the class page - Calling
console.errorand thinking it throws
Keep this
console.logshows a value and the script continues- The broken read is
order.cup; the real property issize console.error("missing size")marks the failure; it does not throwdebuggerpauses only while developer tools are open- The page line reads fixed / tea / regular
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top