Skip to content

README.md

Latest commit

 

History

History
63 lines (48 loc) · 2.44 KB

README.md

File metadata and controls

63 lines (48 loc) · 2.44 KB
Raw

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!