A Step-Through Debugger for Learning Python

An interactive, web-based Python code visualizer that helps beginners understand how Python code executes line-by-line. Watch variables come to life, see how loops iterate, and understand function scopes in real-time.

Setup

Download the folder/repo and open the html file in any browser with js support. No installation required.

Benefits

Unlike traditional coding environments where you only see the final output, this visualizer shows you exactly what happens at each step of your program's execution. No more guessing what's happening "under the hood"!

Understand Variable States

• Watch variables get created, modified, and updated in real-time
• See how values change during loops and conditions
• Understand variable scope and lifetime visually

See Program Flow

• Follow the execution path through functions, loops, and conditionals
• See which lines execute and in what order
• Understand how loops iterate one step at a time

Works like a debugger

• Step Mode: Take full control and advance one line at a time
• Auto Mode: Watch the code run automatically with adjustable speed
• Pause/Resume: Stop anytime to examine the current state

🚀 Key Benefits for Python Learners

Use Cases

• Visual Learning: Perfect for visual learners who need to "see" concepts to understand them
• Debug Mental Models: Verify if your understanding matches actual execution
• Homework Helper: Trace through algorithms step-by-step to understand how they work
• Teaching Aid: Project on screen to demonstrate code execution to a class

🔍 Visual Hierarchy

The visualizer displays code execution in a hierarchical structure:

Global Scope
  └── Variables defined at module level
      
Function Scope
  └── Function parameters
  └── Local variables
  
Loop Iterations
  └── Loop counter values
  └── Variables modified in each iteration

🎨 Color-Coded Values

Different data types are displayed in distinct colors for easy identification:

• Strings: Green
• Numbers: Blue
• Booleans: Orange
• Lists/Objects: Default

Code Examples Included

1. Fibonacci Sequence

Learn about:

• Variable initialization and swapping
• Loop iterations
• List building
• Mathematical sequences

2. Bubble Sort

Understand:

• Nested loops
• Array manipulation
• Comparison operations
• Algorithm optimization

3. Factorial Calculation

Master:

• Accumulator pattern
• Loop ranges
• Mathematical operations
• Edge cases

4. Prime Number Detection

Explore:

• Conditional logic
• Mathematical algorithms
• Efficiency considerations
• Boolean returns

5. Nested Loops (Multiplication Table)

Grasp:

• Loop nesting
• 2D data structures
• Pattern generation
• Variable scope in nested contexts