Lesson 11 of 11

Bug Hunt

A page with four features and four bugs. Your job is to find them and fix them.

What you will learn

How to debug
The F12 console
console.log
= and ===
Infinite loops
Positions past the end
Printing instead of returning

Before you start

Every lesson before this one. The four bugs are four mistakes you have already seen.

What to do

Try each feature in the preview above. Watch how each one goes wrong.
Open bugs.js. Then press F12 to open the console.
Find each bug and fix it. Reload the page. Check that the feature works now.
There are hints at the bottom of bugs.js. The first hints give a little help. The later hints tell you more.

The rules of the hunt

Each feature has exactly one bug.
The comments are all true. They describe what the code is supposed to do. When a comment and its code disagree, the code is wrong.
The safety brake in Hunt 2 is not a bug. It stops a runaway loop from freezing the tab. Leave it in place.

The three debugging moves

Do not read the code line by line and hope to spot the mistake. Use a method instead.

Move	What you do	Question to ask
Run it	Use the feature and watch exactly what goes wrong.	What did I expect, and what happened instead?
Read it	Read the few lines that produce that symptom.	Does the code do what its comment says?
Probe it	Add `console.log` to print a value at a chosen moment.	Is this value what I think it is?

Then fix one thing and reload the page. Check the feature again. Change one thing at a time. If you change three things and it works, you do not know which one fixed it.

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Write a fifth broken feature for someone else to hunt. To write a good bug, you have to understand it well.
For each bug, write the single console.log line that finds it fastest.
Start again from a fresh copy. Fix all four bugs in under 10 minutes.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

Do not point at the broken line. Teach the loop instead. The loop is symptom, then guess, then probe, then fix, then check.

Do Hunt 1 together
Symptom: every password is accepted. Guess: the if is always true. Probe: read the condition one character at a time. Fix it and reload the page. Then test a right answer and a wrong answer.
Let them do Hunts 2 to 4 alone
Only step in to ask questions. "What does the console say?" "Which way is count moving?" "How many finishers are there, and what is the last position?"
Debrief every fix
Ask the student to name the kind of bug in one sentence. Sections B and C of the readiness test give marks for exactly that vocabulary.

Answer key

Do not open this in front of the student.

Hunt	The bug	The fix	Kind of bug
1. Password Gate	`if (guess = "acorn")` sets the value instead of comparing it. The condition is always true.	`if (guess === "acorn")`	Assignment instead of comparison
2. Launch Countdown	`count = count + 1` moves the count away from 0. So `count > 0` never becomes false.	`count = count - 1`	Infinite loop
3. Medal Ceremony	The code uses `finishers[5]`. Five items means the valid positions are 0 to 4. So position 5 is `undefined`.	`finishers[4]`, or better `finishers[finishers.length - 1]`	Position past the end
4. Tip Calculator	`addTip()` prints the answer but returns nothing. So `total` receives `undefined`.	`return bill * 1.2;`	Printing instead of returning