← ACARA Digital Technologies Years 9–10

Breakpoints and stepping in browser DevTools

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.

Part of: ACARA Digital Technologies Years 9–10 — Modular and Object-Oriented Programming (JavaScript) — Module 40

Understanding Breakpoints and stepping in browser DevTools in ACARA Digital Technologies Years 9–10

What it does: The debugger statement placed before console.log pauses the program on that line when DevTools is open. It does the same job as a breakpoint. Step over runs the function call as a single step. Step into would take you inside the function's code. Add something like total to Watch and you can see how its value changes after each step. The correct form is debugger; because it is a keyword. Adding brackets makes JavaScript treat it as a function call, which fails.

Common mistakes: 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. The keyword is misspelled. It must be function, otherwise the code never runs and the debugger statement is never reached.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Breakpoints and stepping in browser DevTools to a class →

This module's key terms are also in a printable crossword (Modules 710–727) and word search (Modules 710–742).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

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

Type the word breakpoint at the end of the lineClick the line number beside the code

Matches

debugger()

↓

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

Applying

Meanings

Term

breakpoint

Meaning

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.

Practice

function total(prices) {

Testing

Gaps

;

Check Answer

Spots

1let total == 0;

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

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

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 ✓

In Sources, clicking a line number sets a blue marker. The program pauses there before running that line.

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

A breakpoint only pauses the program. Nothing is changed or removed, and you can then step through the code.

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 ✓

Step over runs the function call as a single step. Step into would take you inside the function's code.

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

Step into moves the pause inside the called function so you can follow each of its lines.

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

Add something like total to Watch and you can see how its value changes after each step.

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.

Key Term

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.

Fill in the Blanks

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

Hint: Type the statement that pauses the program at this line when DevTools is open, just like a breakpoint.

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

Hint: Type the keyword that creates a variable you could then watch in the Watch panel when paused.

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

Hint: Type the keyword that declares a function. The pause happens each time this function runs.

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

Hint: Type the name of the function being called. Using step into on this line would jump inside it.

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

Hint: Type the variable name from line 1 whose value changes. You can watch it update as you step over.

Spot the Error

Question 1

A let total == 0;

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

C debugger;

D total += i;

E }

Line 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.

Question 2

A fuction double(n) {

B debugger;

C return n * 2;

D }

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

Question 3

A let price = 20;

B debuger;

C let tax = price * 0.1;

D console.log(tax);

Line 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.

Question 4

A function area(w, h) {

B debugger();

C return w * h;

D }

Line 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.

Question 5

A let count = 0;

B Debugger;

C count = count + 1;

D console.log(count);

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

Student with a class code? Join your class →