Skip to content

Environment Diagrams

Jump to bottom
Rahul Arya edited this page Mar 22, 2019 · 5 revisions

After running a program, we can press "Environments" in the editor to open an environment diagram visualizer. Each frame of the current environment is represented as a rectangle on a draggable canvas. The active frame is highlighted with a solid border, while other frames have dashed borders. By default, each frame has its call stack directly above it, and have a parent of Global unless otherwise specified.

Navigation

The environment diagram toolbar has a number of buttons - from left to right, they are:

  • Step backward. Go back to the most recent variable assignment strictly before the current time, if one exists. Otherwise do nothing.
  • Step forward. Go forward to the next variable assignment strictly after the current time, if one exists. Otherwise do nothing.
  • Step backward to the time when the first variable was assigned in the current frame.
  • Step forward to the time when the last variable is assigned in the current frame.
  • Step back to the first variable assignment in the current execution trace.
  • Step forward to the last variable assignment in the current execution trace.
  • Toggle box and pointer visualizations.

Box and Pointer Diagrams

Environment diagrams can be displayed in two modes: inline, and box-and-pointer. A new environment diagram defaults to inline mode, but the box-and-pointer toggle button in the toolbar can be used to switch between the two modes.

The inline mode displays the reprstring of each object adjacent to its binding in its frame. This way is similar to how most real debuggers work, due to its additional clarity in reading long lists. However, it is different from how most environment diagrams are drawn in CS 61A. In addition, the inline mode does not display the forced value of Promises, unlike the box-and-pointer mode.

The box-and-pointer mode replicates the behavior of Python Tutor and <scheme.cs61a.org>, and draws objects on the heap using standard box and pointer notation. It can be zoomed and scrolled using the mouse for better clarity. Unlike Python Tutor, however, objects drawn on the heap may move around slightly as we step through programs, which may be a slight source of confusion.

Clone this wiki locally