Inspector

Inspector

This is the debugger module in js-slang. Unfortunately, it does not remove bugs for you. It does however allow you to inspect them. If you're looking for the actual debugger itself, look at this wiki. This is just the frontend stuff that communicates with it.

Breakpoints

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. And whatever is in the context right now will be exposed to the frontend.

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.

How it works

Most of it is inside sagas/index.ts. When slang meets a breakpoint, it packs up, saves and just gives up, returning with a status of suspended instead of finished. The frontend always saves a copy of the context, and it can use the resume function in slang to kick start it again. If you evaluate things in the REPL when it is paused, the frontend recognizes this and tells slang to evaluate the REPL but without enabling the debugger. So it runs, and after it ends it ends, but the whole machinery is still in its originally paused state.

There is also a small script to sanitize and put all this into the tab. It is in public/externalLibs/inspector. It just cleans things up and formats them into the table format. It is in vanilla js so it will break without warning if the structure of the context type every changes! You should look there first if you see weird messages in the inspector pane.

Future work

• Editable table?
• Make the nice notification icon blinking onto other tabs as well (it's just simple css animations and settimeout, see public/externalLibs/inspector)
• Move buttons into tabs? Consider some UX stuff.
• Chrome debugger allows setting breakpoints in between statements. (Can try faking it with hidden debugger statements?)
• Make parent child relationship of environments more obvious (accordion effect? Something like that)
• Nicer colors