Program visualizations help to form useful mental models of how programs work, and to reason and debug code. But these visualizations exist at a fixed level of abstraction, e.g., line-by-line. In contrast, programmers switch between many levels of abstraction when inspecting program behavior. Based on results from a formative study of hand-designed program visualizations, we designed CrossCode, a web-based program visualization system for JavaScript that leverages structural cues in syntax, control flow, and data flow to aggregate and navigate program execution across multiple levels of abstraction. In an exploratory qualitative study with experts, we found that CrossCode enabled participants to maintain a strong sense of place in program execution, was conducive to explaining program behavior, and helped track changes and updates to the program state.

翻译：程序可视化有助于形成关于程序运行机制的有效心智模型，并辅助代码推理与调试。然而，现有可视化工具通常处于固定的抽象层级（如逐行可视化），而程序员在检查程序行为时却需要在多个抽象层级间切换。基于一项关于手工设计程序可视化的形成性研究结果，我们设计了CrossCode——一个基于Web的JavaScript程序可视化系统，该系统利用语法、控制流和数据流中的结构线索，在多个抽象层级上聚合并导航程序执行过程。通过一项面向专家的探索性质性研究发现，CrossCode使参与者能够在程序执行过程中保持强烈的空间定位感，有助于解释程序行为，并帮助追踪程序状态的变更与更新。