Debugging with console.log

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Why do you add a temporary console.log(total) inside a function you are debugging?

A To see the value of total while the program runs

B To make the function run faster

2. Which log line is easier to understand in a busy console?

A console.log('price:', price);

B console.log(price);

3. You suspect a function receives the wrong input. Where is the best place to log first?

A At the top of the function, logging the parameter

B After the function has been deleted

4. A loop gives a wrong total. Which log helps you see how the value changes each time?

A console.log('sum:', sum); after the loop only

B console.log('sum:', sum); inside the loop body

5. You fixed the bug and the program works. What should you do with your debugging logs?

A Leave them in so the console stays full

B Remove them

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1console.log('price:', price);		Afunction area(w, h) { console.log('w:', w, 'h:', h); }
2for (let i = 0; i < 3; i++) { console.log('i:', i); }		BThe values are logged without labels, so the output shows two bare numbers and you cannot tell which is score and which is lives.
3Log a parameter on entry to a function to check what value the function actually received		CLogs the value of i on every pass of the loop, so you can watch how it changes each time.
4Once the bug is fixed, remove the temporary debugging line so the console stays clean		DThe closing bracket is missing, so this is a syntax error and nothing is logged.
5console.log(score); console.log(lives);		EPrints the label 'price:' and the value of price, so you can see what the variable holds at that moment.
6console.log('total: ' + total;		Ffunction total(a, b) { return a + b; }

Definitions

console.log(label, value)

Fill in the Blanks

Complete each line of code by filling in the missing parts.

function square(n) { console.log("n:", _); return n * n; }

for (let i = 0; i < 3; i++) { console.log("i:", _); }

let score = 10 * 2; console.___("score:", score);

let sum = 0; for (const n of nums) sum += n; console.log("sum:", ___);

let x = 4 * 5; __ console.log("x:", x);

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A function total(a, b) {

B console.log('a:', a);

C console.log('b:' b);

D return a + b;

E }

Question 2

A function area(w, h) {

B console.log('w', w;

C return w * h;

D }

Question 3

A let sum = 0;

B for (let n of [4, 5, 6]) {

C console.log('n', 'n');

D sum += n;

E }

Question 4

A let price = 20;

B let qty = 3;

C console.log('price', qty);

D console.log(price * qty);

Question 5

A function greet(name) {

B console.log('name', nme);

C return 'Hi ' + name;

D }

Answer Key

Debugging with console.log

Section A: Quick Questions

A — To see the value of total while the program runs

A — console.log('price:', price);

A — At the top of the function, logging the parameter

B — console.log('sum:', sum); inside the loop body

B — Remove them

Section B: Match the Pairs

console.log('price:', price); → Prints the label 'price:' and the value of price, so you can see what the variable holds at that moment.

for (let i = 0; i < 3; i++) { console.log('i:', i); } → Logs the value of i on every pass of the loop, so you can watch how it changes each time.

Log a parameter on entry to a function to check what value the function actually received → function area(w, h) { console.log('w:', w, 'h:', h); }

Once the bug is fixed, remove the temporary debugging line so the console stays clean → function total(a, b) { return a + b; }

console.log(score); console.log(lives); → The values are logged without labels, so the output shows two bare numbers and you cannot tell which is score and which is lives.

console.log('total: ' + total; → The closing bracket is missing, so this is a syntax error and nothing is logged.

Section C: Definitions

console.log(label, value) — A temporary line that prints a variable's value while the program runs, so you can see where it goes wrong. Add a label to tell values apart, then remove it once fixed.

Section D: Fill in the Blanks

function square(n) {
  console.log("n:", n);
  return n * n; }

for (let i = 0; i < 3; i++) {
  console.log("i:", i);
}

let score = 10 * 2;
console.log("score:", score);

let sum = 0;
for (const n of nums) sum += n;
console.log("sum:", sum);

let x = 4 * 5;
// console.log("x:", x);

Section E: Spot the Error

C — There is a comma missing between the label and the value. It should be console.log('b:', b); so the label and value are separate arguments.

B — The closing bracket of console.log is missing. It should be console.log('w', w); so the debug line runs without a syntax error.

C — The value is in quotes, so it prints the text n every time instead of the variable's value. It should be console.log('n', n); to see each loop value.

C — The label says price but the value logged is qty. A wrong label is misleading when you debug. It should be console.log('qty', qty);

B — The variable name is misspelt, so JavaScript throws a ReferenceError. The parameter is called name, so log name on entry to the function.