Skip to content
BranchesTags

Latest commit

 

History

6 Commits

Folders and files

NameName
Last commit message
Last commit date
examples
examples
 
 
src
src
 
 
tests
tests
 
 
update
update
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
requirements.txt
requirements.txt
 
 
run.py
run.py
 
 
启动.bat
启动.bat
 
 

Repository files navigation

C++ Execution Visualizer

An interactive teaching tool for C++ memory layout — step through code and watch the memory diagram update in real time.

Features

Feature Description
Step-by-step & auto-play Advance one step at a time or let it run automatically with adjustable speed
Stack frame display Stacked frames with parameter binding, shown in creation order
Heap visualization Dynamic allocation and deallocation with byte-level cell widgets
Struct layout Member alignment, padding bytes, and total size
Object layout Inheritance chains, EBO, vptr, multiple vtables
Virtual dispatch vptr highlighted per step; dynamic binding traced through vtable
Pointer arrows Auto-drawn arrow for the active pointer on each step; hover any pointer to see its arrow in a distinct color
Pointer cross-reference Pointer cards show target address; target card is highlighted
Crash simulation Halts on wild pointer, double free, null dereference, use-after-free with explanation dialog
Segmentation modes Simple / Standard / Detailed (Code / Literals / Data / BSS / Heap / Stack)
Layout modes Split-panel (columns per region) or unified address space
47 built-in examples 9 curriculum groups covering language basics through modern C++, plus LeetCode
External files Load any .cpp file from disk

Pointer Arrow Behavior

  • Auto arrow (blue #539bf5): drawn automatically for the pointer that is highlighted on the current execution step. At most one arrow is shown at a time, so the diagram stays uncluttered even when many pointers exist.
  • Hover arrow (orange #f0883e): hover or focus any pointer card to temporarily show its arrow in a different color. The auto arrow is restored when the cursor leaves.
  • Arrows reposition correctly when the panel is scrolled or the window is resized.

Crash Simulation

Execution halts and a dialog appears when these undefined behaviors are triggered:

  • Wild Pointer — deleting or dereferencing an uninitialized pointer
  • Double Free — delete on an already-freed address
  • Null Dereference — write or read through nullptr
  • Use After Free — accessing memory after delete

Built-in Examples

Group Examples Topics
01 Language Basics 2 Variables, types, for-loop accumulation
02 Functions, Scope & Stack 3 Function calls, variable shadowing, recursion
03 Pointers & Dynamic Memory 13 Addresses, new/delete, arrays, smart pointers, malloc/free
04 Objects & Layout 11 Classes, inheritance, EBO, diamond inheritance, polymorphism, pure virtual, final
05 Memory Model 1 Data / BSS / Literals / Code regions
06 Memory Safety 3 Wild pointer, double free, null dereference
07 STL & Algorithms 2 vector, unordered_map / Two Sum
08 Modern C++ 3 Lambda, rvalue references, lvalue references vs. pointers
09 Virtual Dispatch 8 Static vs. dynamic binding, vptr size, multiple vtables, pure virtual, virtual destructor, vptr construction order
LeetCode auto-discovered Recursively mirrors examples/leetcode/

Virtual Dispatch Group Highlights (09)

01_virtual_basic.cpp covers three concepts in one file:

  1. ShapeA* pa = &ca calls ShapeA::draw (static binding) vs. ShapeB* pb = &cb calls CircleB::draw (dynamic binding through vptr).
  2. sizeof(Empty) = 1 (placeholder byte) vs. sizeof(EmptyVirt) = 8 (vptr mandatory even with no data members).
  3. Duck : IFlyable, ISwimmable → 2 vptrs → sizeof(Duck) = 16.

Requirements

  • Python 3.11+
  • PyQt6 6.11+
  • PyQt6-WebEngine 6.11+
pip install -r requirements.txt

Run

python run.py

On Windows you can also double-click 启动.bat.

Run Tests

PYTHONPATH="." python -m unittest discover -s tests -p "test_*.py"

Windows PowerShell:

$env:PYTHONPATH = "."
python -m unittest discover -s tests -p "test_*.py"

Tests cover: example tree, toolbar, example loading, web memory UI, snapshot serialization, QWebChannel bridge, layout modes, crash state, CSP constraints.

Usage

  1. Expand a learning stage in the example tree and select an example, or use Open to load your own .cpp file.
  2. Click Run to parse the code.
  3. Click Step to advance one step at a time. The memory panel updates in real time.
  4. Click Auto to play continuously; use the speed slider to adjust the interval.
  5. Click ⚙ Settings to change segmentation granularity and layout mode.
  6. On crash examples, a dialog appears automatically at the offending line.
  7. Hover any pointer card to see where it points; the arrow color distinguishes hover from the auto-drawn step arrow.

Project Structure

C++/
├── run.py                    # Entry point
├── requirements.txt
├── README.md
├── 启动.bat                  # Windows launch script
├── update/                   # Changelogs
│   ├── FIXES_2026-07-23.md
│   ├── CHANGES_2026-07-25.md
│   ├── CHANGES_2026-08-13_EN.md
│   └── CHANGES_2026-08-13_CN.md
├── tests/
│   ├── test_main_window_web.py
│   ├── test_memory_serializer.py
│   ├── test_web_bridge.py
│   └── test_web_memory_view.py
├── examples/
│   ├── 01_language_basics/
│   ├── 02_functions_scope_stack/
│   ├── 03_pointers_dynamic_memory/
│   ├── 04_objects_layout/
│   ├── 05_memory_model/
│   ├── 06_memory_safety/
│   ├── 07_stl_algorithms/
│   ├── 08_modern_cpp/
│   ├── 09_virtual_dispatch/
│   └── leetcode/
└── src/
    ├── main_window.py        # Main window UI
    ├── cpp_interpreter.py    # Step execution engine
    ├── memory_serializer.py  # Snapshot → JSON DTO
    ├── web_bridge.py         # QWebChannel bridge
    ├── web_memory_view.py    # Embedded WebEngine host
    ├── web/                  # HTML / CSS / JS memory UI
    │   ├── index.html
    │   ├── app.js
    │   └── styles.css
    ├── editor.py             # Code editor widget
    ├── highlighter.py        # C++ syntax highlighter
    ├── dialogs.py            # Settings and crash dialogs
    ├── config.py             # Color theme and settings
    ├── type_parser.py
    ├── stl_containers.py
    └── method_dispatch.py

UI Architecture

The memory visualization is a local HTML/CSS/JS page embedded in a QWebEngineView. Python is the sole execution-state authority; QWebChannel pushes a versioned JSON snapshot on each step. The editor, toolbar, auto-play, file dialogs, settings, and crash dialogs are native Qt widgets. No network, CDN, or build tools required.

Segmentation Modes

Mode Regions
Simple Code / Global / Heap / Stack
Standard Global / Heap / Stack
Detailed Code / Literals / Data / BSS / Heap / Stack

Detailed mode uses a 2 rows × 3 columns layout: top row for read-only regions (Code / Literals / Data), bottom row for runtime regions (BSS / Heap / Stack).

Supported C++ Subset

Feature Supported
Basic types: int / float / double / char / bool ✓
Pointer types: T* ✓
References: T&, T&& ✓
Assignment and compound assignment += -= *= ✓
Increment / decrement ++ -- ✓
for / while loops ✓
if / else ✓
Functions, recursion ✓
new / delete / delete[] ✓
malloc / free ✓
Smart pointers: unique_ptr, shared_ptr, weak_ptr ✓
Classes with constructors and destructors ✓
Single inheritance, EBO ✓
Diamond (virtual) inheritance ✓
Virtual methods, pure virtual, override, final ✓
Multiple inheritance with multiple vptrs ✓
cout output ✓
Global and static variables ✓
Lambda (basic capture modes) ✓
Crash / UB detection ✓

Address Model

Simulates x86-64 little-endian. Addresses are illustrative, not real.

Region Base
Code 0x00401000 ↑
Literals 0x00402000 ↑
Global / Data 0x00400000 ↑
Heap 0x01000000 ↑
Stack 0x7FFF0000 ↓

Changelog

Full change notes are in update/:

File Contents
FIXES_2026-07-23.md Pointer dereference on stack variables; recursion fix; small-screen scroll; heap growth direction
CHANGES_2026-07-25.md Smart pointers; empty class 1B fix; single/diamond inheritance; polymorphism; modern C++ examples (total 20→35)
CHANGES_2026-08-13_EN.md Virtual dispatch group; multi-vptr layout; pointer arrow auto-draw, scroll-track, hover color (total 35→47)
CHANGES_2026-08-13_CN.md 同上（中文）

C++ 执行可视化教学工具

逐步执行 C++ 代码，实时观察内存布局变化的交互式教学工具。

功能特性

功能 说明
逐步执行 / 自动播放 单步推进或以可调速度自动运行
栈帧层叠展示 按创建顺序显示，含参数绑定
堆内存可视化 动态分配与释放，字节格子图
结构体布局 成员对齐、padding 字节、总大小
对象布局 继承链、EBO、vptr、多 vtable
虚函数分发 每步高亮 vptr；动态绑定路径可追踪
指针箭头 当前步骤高亮指针自动绘制箭头；悬浮任意指针卡片以不同颜色显示箭头
指针地址追踪 指针卡片显示目标地址，目标卡片高亮
崩溃模拟 野指针 / 二次释放 / 空指针解引用 / 释放后使用，暂停并弹出说明弹框
内存分段粒度 简单 / 标准 / 详细（含代码/常量/数据/BSS/堆/栈）
布局模式 分栏（每区一列）/ 统一虚拟地址空间
47 个内置示例 9 个课程阶段从基础到现代 C++，另含 LeetCode 递归分组
加载外部文件 可加载磁盘上任意 .cpp 文件

指针箭头行为

  • 自动箭头（蓝色 #539bf5）：每步执行后，自动为当前高亮的指针变量绘制一条箭头。同一时刻最多一条，避免多指针时箭头交错。
  • 悬浮箭头（橙色 #f0883e）：鼠标悬浮或聚焦任意指针卡片，以不同颜色临时显示该指针的箭头；鼠标离开后恢复自动箭头。
  • 滚动或调整窗口大小后，箭头自动重绘，保持位置正确。

崩溃模拟

触发以下未定义行为时，工具暂停执行并弹出说明弹框：

  • 野指针 — 删除或解引用未初始化指针
  • 二次释放 — 对同一地址执行两次 delete
  • 空指针解引用 — 通过 nullptr 读写
  • 释放后使用 — delete 后仍访问该内存

内置示例

分组 数量 教学内容
01 语言基础 2 变量、类型、for 循环累加
02 函数、作用域与调用栈 3 函数调用、变量遮蔽、递归栈帧
03 指针与动态内存 13 地址与解引用、new/delete、数组、智能指针、malloc/free
04 对象与内存布局 11 类、继承、EBO、菱形继承、多态、纯虚、final
05 进程内存模型 1 Data / BSS / 常量区 / 代码段
06 内存安全错误 3 野指针、二次释放、空指针解引用
07 STL 与算法 2 vector、unordered_map / Two Sum
08 现代 C++ 3 Lambda、右值引用、左值引用 vs 指针
09 虚函数分发 8 静态/动态绑定、vptr 大小、多 vtable、纯虚、虚析构、构造期 vptr
LeetCode 自动发现 递归镜像 examples/leetcode/ 目录

09 组亮点：01_virtual_basic.cpp

一个文件覆盖三个要点：

  1. ShapeA* pa = &ca 调用 ShapeA::draw（静态绑定）vs ShapeB* pb = &cb 调用 CircleB::draw（动态绑定，经 vptr）。
  2. sizeof(Empty) = 1（占位字节）vs sizeof(EmptyVirt) = 8（即使没有数据成员，有虚函数就必须存 vptr）。
  3. Duck : IFlyable, ISwimmable → 2 个 vptr → sizeof(Duck) = 16。

环境要求

  • Python 3.11+
  • PyQt6 6.11+
  • PyQt6-WebEngine 6.11+
pip install -r requirements.txt

运行

python run.py

Windows 下也可以双击 启动.bat。

运行测试

PYTHONPATH="." python -m unittest discover -s tests -p "test_*.py"

Windows PowerShell：

$env:PYTHONPATH = "."
python -m unittest discover -s tests -p "test_*.py"

测试覆盖：示例树、工具栏、示例加载、Web 内存界面、执行快照序列化、QWebChannel 桥接、布局模式、崩溃状态、CSP 约束。

使用方法

  1. 在左侧示例树中展开学习阶段并选择示例，或点击 打开 加载自己的 .cpp 文件。
  2. 点击 运行 解析代码。
  3. 点击 单步 逐步执行，右侧内存面板实时更新。
  4. 点击 自动播放 开始或暂停，用速度滑块调节间隔。
  5. 点击 ⚙ 设置 切换内存分段粒度与布局模式。
  6. 遇到崩溃示例时，执行到问题行自动弹出崩溃说明弹框。
  7. 悬浮任意指针卡片可查看指向关系；箭头颜色区分"悬浮"和"当前步骤自动绘制"。

项目结构

C++/
├── run.py                    # 启动入口
├── requirements.txt
├── README.md
├── 启动.bat
├── update/                   # 修复与变更记录
│   ├── FIXES_2026-07-23.md
│   ├── CHANGES_2026-07-25.md
│   ├── CHANGES_2026-08-13_EN.md
│   └── CHANGES_2026-08-13_CN.md
├── tests/
│   ├── test_main_window_web.py
│   ├── test_memory_serializer.py
│   ├── test_web_bridge.py
│   └── test_web_memory_view.py
├── examples/
│   ├── 01_language_basics/
│   ├── 02_functions_scope_stack/
│   ├── 03_pointers_dynamic_memory/
│   ├── 04_objects_layout/
│   ├── 05_memory_model/
│   ├── 06_memory_safety/
│   ├── 07_stl_algorithms/
│   ├── 08_modern_cpp/
│   ├── 09_virtual_dispatch/
│   └── leetcode/
└── src/
    ├── main_window.py        # 主窗口 UI
    ├── cpp_interpreter.py    # 模拟执行引擎
    ├── memory_serializer.py  # 执行快照 → JSON DTO
    ├── web_bridge.py         # QWebChannel 通信桥
    ├── web_memory_view.py    # 内嵌 WebEngine 容器
    ├── web/                  # HTML / CSS / JS 内存界面
    │   ├── index.html
    │   ├── app.js
    │   └── styles.css
    ├── editor.py             # 代码编辑器
    ├── highlighter.py        # C++ 语法高亮
    ├── dialogs.py            # 设置弹框 / 崩溃弹框
    ├── config.py             # 颜色主题与设置
    ├── type_parser.py
    ├── stl_containers.py
    └── method_dispatch.py

界面架构

核心内存可视化使用本地 HTML/CSS/JS 实现，通过 QWebEngineView 嵌入 PyQt6 桌面窗口。Python 解释器是唯一的执行状态来源，QWebChannel 在每步时向页面推送版本化 JSON 快照。编辑器、工具栏、自动播放、文件对话框、设置和崩溃弹框均为原生 Qt 控件。不依赖网络、CDN 或构建工具。

内存分段粒度

模式 分区
简单 代码区 / 全局区 / 堆 / 栈
标准 全局区 / 堆 / 栈
详细 代码区 / 常量区 / 数据段 / BSS / 堆 / 栈

详细模式采用 2 行 × 3 列 布局：上行为只读区（代码/常量/数据段），下行为运行时区（BSS/堆/栈）。

支持的 C++ 子集

特性 支持
基本类型 int / float / double / char / bool ✓
指针类型 T* ✓
引用类型 T&、T&& ✓
变量赋值、复合赋值 += -= *= ✓
自增/自减 ++ -- ✓
for / while 循环 ✓
if / else ✓
函数定义与调用、递归 ✓
new / delete / delete[] ✓
malloc / free ✓
智能指针 unique_ptr / shared_ptr / weak_ptr ✓
类（含构造函数、析构函数） ✓
单继承、EBO ✓
菱形（虚）继承 ✓
虚函数、纯虚函数、override、final ✓
多重继承（多 vptr） ✓
cout 输出 ✓
全局变量、静态变量 ✓
Lambda（基本捕获模式） ✓
崩溃 / 未定义行为检测 ✓

地址模型

模拟 x86-64 小端序，地址为教学演示用虚构值：

区域 基址
代码段 0x00401000 ↑
常量区 0x00402000 ↑
全局 / 数据段 0x00400000 ↑
堆 0x01000000 ↑
栈 0x7FFF0000 ↓

修改记录

详细记录见 update/：

文件 内容
FIXES_2026-07-23.md 指针解引用修改栈变量；递归修复；小屏幕横向滚动；堆增长方向
CHANGES_2026-07-25.md 智能指针；空类 1B 修复；单/菱形继承；多态；现代 C++ 示例（总数 20→35）
CHANGES_2026-08-13_CN.md 虚函数分发示例组；多 vptr 布局；指针箭头自动绘制、滚动追踪、悬浮颜色（总数 35→47）
CHANGES_2026-08-13_EN.md Same as above (English)

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages