Breakpoints and stepping in browser DevTools

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. How do you set a breakpoint on a line in the Sources panel of DevTools?

A Type the word breakpoint at the end of the line

B Click the line number beside the code

2. What does a breakpoint do when the program reaches it?

A Pauses the program so you can inspect it

B Deletes the line so it never runs

3. You are paused on a line that calls a function. You want to run the whole call in one go without going inside it. Which button do you use?

A Step into

B Step over

4. You are paused on a line that calls calculateTotal(). You want to see what happens line by line inside it. Which button do you use?

A Step into

B Step over

5. What is the Watch panel used for?

A Tracking the value of a variable or expression as you step

B Writing new code for your program

Match the Pairs

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

Left column		Right column
1debugger;		AA statement that pauses the program on that line when DevTools is open, acting like a breakpoint written in the code
2Step over		BRuns the current line, including any function it calls, then pauses on the next line
3Pause the program on a line by writing the breakpoint in your code instead of clicking in DevTools		CBreakpoints are set by clicking the line number in the Sources tab, not in the Console tab.
4Step into lets you follow the program inside a function that the current line calls		Dlet total = add(2, 3); debugger; console.log(total);
5debugger()		Elet area = getArea(4, 5);
6Click the code on line 5 in the Console tab to set a breakpoint		Fdebugger is a statement, not a function, so it should be written as debugger; with no brackets. Brackets cause a syntax error.

Definitions

breakpoint

Fill in the Blanks

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

let total = 0; ________; total = total + 5;

___ score = 10; debugger; console.log(score);

________ double(n) { debugger; return n * 2; }

function double(n) { return n * 2; } debugger; let answer = ______(4);

let lives = 3; debugger; _____ = lives - 1;

Spot the Error

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

Question 1

A let total == 0;

B for (let i = 0; i < 3; i++) {

C debugger;

D total += i;

E }

Question 2

A fuction double(n) {

B debugger;

C return n * 2;

D }

Question 3

A let price = 20;

B debuger;

C let tax = price * 0.1;

D console.log(tax);

Question 4

A function area(w, h) {

B debugger();

C return w * h;

D }

Question 5

A let count = 0;

B Debugger;

C count = count + 1;

D console.log(count);

Answer Key

Breakpoints and stepping in browser DevTools

Section A: Quick Questions

B — Click the line number beside the code

A — Pauses the program so you can inspect it

B — Step over

A — Step into

A — Tracking the value of a variable or expression as you step

Section B: Match the Pairs

debugger; → A statement that pauses the program on that line when DevTools is open, acting like a breakpoint written in the code

Step over → Runs the current line, including any function it calls, then pauses on the next line

Pause the program on a line by writing the breakpoint in your code instead of clicking in DevTools → let total = add(2, 3); debugger; console.log(total);

Step into lets you follow the program inside a function that the current line calls → let area = getArea(4, 5);

debugger() → debugger is a statement, not a function, so it should be written as debugger; with no brackets. Brackets cause a syntax error.

Click the code on line 5 in the Console tab to set a breakpoint → Breakpoints are set by clicking the line number in the Sources tab, not in the Console tab.

Section C: Definitions

breakpoint — A marker on a line in browser DevTools that pauses the program there, so you can step through the code line by line and watch the variables change.

Section D: Fill in the Blanks

let total = 0;
debugger;
total = total + 5;

let score = 10;
debugger;
console.log(score);

function double(n) {
  debugger; return n * 2;
}

function double(n) { return n * 2; }
debugger;
let answer = double(4);

let lives = 3;
debugger;
lives = lives - 1;

Section E: Spot the Error

A — Declaring a variable needs the single = assignment operator. == is a comparison, so this line is a syntax error. It should be let total = 0; so the Watch panel can track total.

A — The keyword is misspelled. It must be function, otherwise the code never runs and the debugger statement is never reached.

B — The keyword is spelled debugger, with two g's. The misspelled version is just an unknown name, so the program will not pause here in DevTools.

B — debugger is a statement, not a function, so it takes no brackets. It should be written debugger; to pause the program when DevTools is open.

B — JavaScript is case-sensitive. The statement must be written in lowercase as debugger; for the program to pause.