Skip to content

Latest commit

 

History

History

devtools-debugger

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
1-isolate
1-isolate
 
 
2-integrate
2-integrate
 
 
README.md
README.md
 
 
study.json
study.json
 
 

README.md

DevTools Debugger

Practice using different features in your browser's DevTools Debugger to understand interactive JS programs.

Prep Work

Learning Objectives

  • 🥚 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.
  • 🐣 Continue to Here: When paused in the debugger, you can skip the program's execution to a specific line using the "continue to here" option.
  • 🐣 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.
  • 🐥 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.
  • 🐥 Stepping Over: You can step over functions in your program to skip their implementation and focus on your program's behavior.

During Class

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

Before Break

  • All Together: 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 Regroup with ~20 minutes left at the end of class for each group to present:
    • what went well?
    • what went less well?
    • lessons learned

1. Isolate

2. Integrate

After Class

No deliverables. Just lots of study time, alone and in groups. Here's some ideas for what to focus on after this lesson:

  • Continue studying your favorite online tutorials
  • Finish studying /2-just-enough-javascript if you haven't yet
  • Study /3-understanding-programs
  • /0-flashcards: ~20 minutes every day (add more cards as you go!)