INSPECT

[podocarp]

Inspector

This requires the use of the debugger branch of js-slang to work. Clone both the frontend and the debugger slang to the same directory, then npm install. If that give some errors about slang, you can try removing the entries for slang in the lock file, then install again. The merge over there is still ongoing. Meanwhile, please try to break this.

The mental model we are using is: A breakpoint means that the interpreter will stop right before it. Whatever is highlighted is going to be evaluated next. If you meet any inconsistencies with this, also please raise it up for discussion.

What you can do

• Set breakpoints by clicking on the gutter
• debugger; just like ECMAScript
• Inspect!
• Run stuff in the context of the paused program!

Usage

Here's what happens: After you click run, if there the interpreter meets a breakpoint, the first thing you're going to notice is that the REPL feedbacks to you it hit a breakpoint, the line is highlighted, and one of the icons on the right pane is going to start blinking. If you click on the icon, it reveals the inspector. All the variables in every frame is exposed here. The REPL is also now in the context of where ever you are. So you can evaluate anything you would normally be able to in the REPL. It is all quite simple really.

Note

Because we use a local version of js-slang, the CI just breaks all the time.

[lumos309]

Can I request @jiachen247 to review the additions for the env model visualizer? Thanks!

[martin-henz]

There seems to be a bug with inspecting parameters inside a breakpoint:

[martin-henz]

The error appears only after you try to display the value of "x" in the REPL.

[podocarp]

The error appears only after you try to display the value of "x" in the REPL.

Fixed in latest commit along with the latest slang version.
Furthermore, you can now pause anywhere. Where the execution stops is entirely up to how fast you can click the button. For example, try this:

function a(x){
    for(let i = 0; i < 3; i=i+1){
        display(1);
        a(1);
        display(1);
    }
}

a(1);

This executes forever so it gives you plenty of time to click the pause button. Then you're given the same highlighting and the same inspector as though there's a breakpoint there.

Also, there is something quirky with this. The stack overflow detector does not actually terminate this code. If you remove the display functions you will see that it does. Might be a separate issue.

[martin-henz]

Also, there is something quirky with this. The stack overflow detector does not actually terminate this code. If you remove the display functions you will see that it does. Might be a separate issue.

Hmm, strange. So this runs with constant space consumption?

[podocarp]

Also, there is something quirky with this. The stack overflow detector does not actually terminate this code. If you remove the display functions you will see that it does. Might be a separate issue.

Hmm, strange. So this runs with constant space consumption?

Looking at the chrome process manager shows that the memory consumption keeps increasing, so I would think otherwise.

[martin-henz]

Also, there is something quirky with this. The stack overflow detector does not actually terminate this code. If you remove the display functions you will see that it does. Might be a separate issue.

Hmm, strange. So this runs with constant space consumption?

Looking at the chrome process manager shows that the memory consumption keeps increasing, so I would think otherwise.

Interesting. So the memory goes into the JavaScript heap and the stack does not grow. Or the stack grows slowly compared to other stuff that's happening.

[coveralls]

Pull Request Test Coverage Report for Build 1486

• 31 of 172 (18.02%) changed or added relevant lines in 17 files are covered.
• 27 unchanged lines in 3 files lost coverage.
• Overall coverage decreased (-0.2%) to 24.295%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/components/academy/grading/GradingWorkspace.tsx	0	1	0.0%
src/containers/ApplicationContainer.ts	1	2	50.0%
src/actions/workspaces.ts	2	4	50.0%
src/components/workspace/ControlBar.tsx	0	3	0.0%
src/components/workspace/side-content/Inspector.tsx	2	5	40.0%
src/containers/assessment/AssessmentWorkspaceContainer.ts	0	4	0.0%
src/containers/missionControl/EditingWorkspaceContainer.ts	0	4	0.0%
src/reducers/workspaces.ts	0	4	0.0%
src/containers/PlaygroundContainer.ts	0	5	0.0%
src/containers/academy/grading/GradingWorkspaceContainer.ts	0	5	0.0%

Files with Coverage Reduction	New Missed Lines	%
src/components/assessment/AssessmentWorkspace.tsx	1	79.44%
src/components/missionControl/EditingWorkspace.tsx	1	6.67%
src/components/workspace/ControlBar.tsx	25	11.05%

Totals
Change from base Build 1459:	-0.2%
Covered Lines:	1170
Relevant Lines:	4017

---

💛 - Coveralls

[openorclose]

There are some minor code style issues, but they can be fixed later.