Predictive Stepping

Practice predicting each step of program execution, using your browser's debugger to check your predictions every step of the way.

---

Learning Objectives

The Browser's Debugger

• 🥚 Stepping Through: You can use the Step button to go through a program one statement at a time, pausing an any line you want to inspect.
• 🥚 Scope Panel: You can use the Scope panel in your debugger to find the value of all active variables at step of execution, including when a variable is uninitialized.
• 🥚 Hovering Previews: You can preview the value of any expression or initialized variable in your program, including parts of a longer expression.
• 🥚 Breakpoints: Once in the Debugger, you can set and unset breakpoints to skip ahead to specific lines. You can also set and unset breakpoints within a line when possible.
• 🥚 Stepping Over: You can step over functions in your program to skip their implementation and focus on your program's behavior.
• 🐣 debugger Statement: You understand the difference between debugger and a breakpoint, and can write a debugger statement in your source code to pause the program before specific lines.

Debugging Workflows

• Programs with prompt/alert/confirm interactions:
  • 🥚 You can open, run, debug and edit these JavaScript programs programs with Study Lenses.
• Programs with HTML, CSS and DOM Interactions:
  • 🥚 You can edit these programs in VSCode.
  • 🥚 You can open these programs' in the browser using a file path, LiveServer or Study Lenses.
  • 🥚 You run and debug these programs in the browser using your browser's devtools.

---

During Class

Practice stepping through and predicting programs behavior using your browser's debugger.

Before Break

• All Together:
  • Discuss the Predictive Stepping study method.
  • A coach demonstrates the debugger features in /1-isolate/examples
• In Small Groups:
  • Practice stepping through and predicting the programs in /1-isolate/exercises

Break!

After Break

• All Together:
  • A coach demonstrates how to step through JavaScript in an HTML project with /2-integrate/examples
• In Small Groups:
  • Practice stepping through and predicting the programs in /2-integrate/exercises
• All Together
  • Each group will share: What went well? What went less well? Lessons learned?
  • Discuss!