什么是可视化内存中变量的好方法？ （一个可视化的调试器）

Question

我为我的学生编写了一个浏览器内部的java-esque调试器（http://www.kapparate.com/kj/。在一个支持javascript的浏览器中点击编译按钮），我试图弄清楚什么是最好的可视化方式当前范围中的变量。现在，我将它们打印为JSON：

6 KJDB> 7 STACK {"x":"hello","y":"hello","a":4,"z":5,"xx":-5.6400000000000015,"c":true,"intArray":[5,90,35,45,150,3]} 

因此，表示x，y，a，z，xx，c和intArray。各自的价值观也在那里。

但是，我的一些学生在初中，这种表情有时会令人困惑。我应该使用表格（每行是不同的变量？）。或者可能是用矩形表示变量的图形？

Answer 1

两列表，名称和值。当您开始讨论方法调用和可能的递归时，您可能需要使用不同的边界来标记不同的堆栈帧。或者，您可以用包含方法名称的单个列标题标记堆栈帧。

Answer 2

我在CS入门课程中所做的工作就是绘制一个非常宽的矩形来表示计算机的内存，然后将它分离为多列（所以一行可以任意长，然后多列，也可以是任意宽度）。

无论何时创建变量，他都会使用一个小块来表示变量或表示对该变量的引用。例如，一个int变量只会占用一个小列或“块”内存。但对于一个int[]变量（或任何其他类型的变量，通过引用而不是按值传递），他会绘制一个块来表示引用，然后在该行下方绘制另一个块来表示实际值。他会简单地画出箭头来表明较小的块引用较大的块。