Flow and Debugging in the Browser

Scheduled

Planned for Jan 19 – Delivered on Jan 26

Learning Outcome Guide

At the end of this class, you should be able to…

• Utilize decisions and loops to implement branching and repetition in scripts.
• Demonstrate how to access and use browser developer tools for debugging JavaScript.
• Interpret console error messages to identify code issues.
• Apply breakpoints and step-through code execution to isolate bugs.
• Utilize the console for testing code snippets and exploring variable values.

The focus of this lesson is on basic implementation of control structures and using the debugger. If students are concerned that they are learning several control structures in one lesson when weeks are taken to cover these topics in another course, remind them that we will be using these structures every day moving forward, and they will get the exposur they need to fully understand them.

Students must read chapter 2 of JSFBP

---

Coding Demo

Starter Kit

For this demo, you need to have your Student Workbook open in Visual Studio Code.

1. Open the terminal window and paste in the following single line.

   Run from the root of your repository

   pnpm dlx tiged --disable-cache --force DG-InClass/SDEV-1150-A04-Jan-2026/sk/lesson-04 ./src/lesson-04

2. Walk through the steps in the `ReadMe.md` of the new lesson.

Walkthrough

Install dependencies and run the dev server

1. Extract the starter zip to lesson-04
2. Move into the lesson-04/ directory:

cd lesson-04

3. Install the necessary dependencies:

npm install

or

npm i

4. Run the dev server with the dev script:

npm run dev

5. Open the provided development server URL in your browser
6. You should see the default render for the vite project.
7. Use this as the base for today’s examples.

Instructor Demo and Student Exercise

Complete the demo along with your instructor and then attempt the exercise prompts (see the Student TODO comments at the end of the main.js file).

Simple if

const x = 5;
if (x > 0) {
  console.log('x is positive');
}

if-else

if (x % 2 === 0) {
  console.log('x is even');
} else {
  console.log('x is odd');
}

Nested if-else

if (x > 10) {
  console.log('x is greater than 10');
} else if (x < 0) {
  console.log('x is non-positive');
} else {
  console.log('x is between 1 and 10');
}

while loop

let count = 3;
while (count > 0) {
  console.log('Countdown:', count);
  count = count - 1;
}

do-while loop

let i = 0;
do {
  console.log('i is', i);
  i++;
} while (i < 3);

for loop

for (let j = 0; j < 3; j++) {
  console.log(`j = ${j}`);
}

Debugging practice

This small snippet includes two intentional bugs for students to find and fix. Uncomment and correct each bug as part of the exercise. Use the DevTools to help find and correct the bugs.

// Snippet with bugs for debugging practice
const num = 10;

if (num < 5) {
  console.log('num is greater than 5');
} else {
  console.log('num is 5 or less');
}

let k = 0;
while (k < 3) {
  k + 1;
  console.log(k);
}

Push to your GitHub workbook repo

Once you’re done making your own custom updates to the project, stage your files, commit your work, and push to the remote repository.

1. Open a terminal in VS Code
2. Stage all updated and created files:

git add .

3. Commit the changes:

git commit -m 'Lesson 04 Example'

4. Push your changes to the remote workbook repository:

git push origin main