메모리에서 변수를 시각화하는 좋은 방법은 무엇입니까? (시각적 인 디버거)

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

교수님이 Intro to CS 과정에서 컴퓨터의 메모리를 표현하기 위해 실제로 넓은 직사각형을 그려서 열로 분리하는 것이 었습니다 (임의로 길고 임의의 너비의 한 행).

변수를 만들 때마다 작은 블록을 사용하여 변수를 나타내거나 해당 변수에 대한 참조를 나타냅니다. 예를 들어, int 변수는 단순히 작은 열 또는 "블록"메모리를 차지합니다. 그러나 int[] 변수 (또는 값 대신 참조로 전달되는 다른 종류의 변수)의 경우 참조를 나타내는 블록을 그 다음 실제 값을 나타내는 행 아래로 다른 블록을 그립니다. 그는 더 작은 블록이 더 큰 블록을 참조했음을 보여주기 위해 단순히 화살표를 그릴 것입니다.