UD5工具箱
可视化引用状态对比
工具提供三种引用状态的实时可视化展示：强引用对象以高亮色块表示，始终可见且不可回收；弱引用对象以半透明色块表示，随 GC 执行而消失；已回收对象以虚线边框表示，标注为已释放状态。用户可以通过颜色和形态的直观差异，快速区分不同引用类型的行为特征，无需阅读底层代码即可理解引用类型对对象生命周期的影响。每种状态的变化都配有平滑的过渡动画，使引用关系的转变过程一目了然。
对象创建与管理
支持快速创建 JavaScript 对象，并将其加入不同的数据结构。用户可以选择将对象添加到普通 Map（强引用键值对）、WeakMap（弱引用键）、普通 Set（强引用值）或 WeakSet（弱引用值）中。每次添加操作都会更新可视化面板中的引用关系图，同时在操作日志中记录详细的创建时间和当前引用计数。工具还支持批量创建对象，便于进行对比实验。创建的对象会自动分配唯一标识符，确保在复杂的实验场景中也能准确追踪每个对象的状态。此外，工具还提供了对象属性编辑功能，允许用户为对象添加自定义属性，模拟真实项目中的复杂数据结构。
引用操作模拟
提供完整的引用操作模拟功能，包括：释放对象的强引用（将变量设为 null）、从 Map 或 Set 中移除指定元素、从 WeakMap 或 WeakSet 中移除弱引用键。每执行一步操作，工具会立即更新可视化状态并记录操作日志。用户可以通过组合这些操作，模拟实际开发中的各种内存管理场景，例如缓存淘汰、DOM 节点清理、观察者模式中的弱引用订阅等。每种操作都配有详细的状态说明，帮助用户理解操作前后的引用关系变化。
操作日志实时记录
工具内置完整的操作日志系统，以时间线形式记录每一步操作。日志内容包括：操作类型（创建、添加、释放、移除、回收）、操作时间戳、对象标识、当前引用状态等关键信息。日志支持滚动查看和筛选过滤，开发者可以通过日志回溯完整的操作序列，分析不同操作对内存回收的影响，便于调试和学习。日志面板还支持按时间范围和操作类型进行高亮标记，帮助快速定位关键事件。
FinalizationRegistry 回调监听
工具集成了 FinalizationRegistry（ES2021）回调监听功能。当弱引用对象被 GC 回收时，注册的回调函数会被触发，工具会将回调执行信息实时显示在状态面板中。这使得原本不可预测的 GC 事件变得可观测，开发者可以清晰地看到哪些对象被回收、回收时机以及回调的执行顺序。此功能是理解弱引用实际行为的关键。面板会显示每个回调的触发时间、关联的对象标识以及回调执行的完整堆栈信息，帮助开发者深入理解 GC 的内部工作机制。
Map/Set vs WeakMap/WeakSet 对比
工具提供四组数据结构的并行对比展示：Map、WeakMap、Set、WeakSet。每种结构的键值对或元素以独立面板呈现，引用状态实时更新。用户可以直观看到 Map 和 Set 的强引用特性（即使外部变量置空，集合内仍持有引用），以及 WeakMap 和 WeakSet 的弱引用特性（外部引用消失后，GC 可随时回收）。这种并行对比极大降低了理解四种数据结构差异的认知负担。面板还提供了关键特性的速查标签，标注了每种结构是否可迭代、是否支持 size 属性等核心区别。
GC 事件模拟与状态追踪
工具提供手动触发 GC 模拟的功能（注：实际 GC 由浏览器引擎控制，此功能为教学模拟）。当 GC 模拟执行时，工具会遍历所有弱引用对象，检查其外部引用状态：若外部强引用已释放且仅存弱引用，则标记为"已回收"并触发 FinalizationRegistry 回调；若外部仍持有强引用，则保持"存活"状态。每次 GC 模拟后，工具会生成状态变化报告，展示本次回收的对象数量、释放的内存估算以及剩余的活跃对象列表。报告还包含引用关系的变化摘要，帮助用户全面掌握 GC 对整个对象图谱的影响。