Time-travel debugging interface about codecombat HOT 14 OPEN

Any progress on the debugger? This feature would make a huge difference in the ability of students to self study.

from codecombat.

We just shipped the interpreter, so now it should be a lot more performant to inspect variable state than the hacky method we were using before, and it'll actually do scoping correctly and all that stuff. We will still need to improve the UX a lot, though, before it will be helpful to beginners.

The current state of the code: it's turned off here, and it now needs to be updated to work with the way that the interpreter reads variable state. @basicer can advise on what needs to be done there. Then we'll have to fix whatever rust it's gathered from being turned off for so long and design a new, simpler user interface for it.

from codecombat.

Just a warning: jsdares' implementation is rather comprehensive, in fact, I think I spent most of the time working on jsdares just to make this work. But the most advanced features (time scrubbing, code scrubbing) are actually not used by most people. This might be because for the simpler puzzles they are not really necessary, but also because they might be too hard to use.

I still believe that just having all kinds of data (yay, Aether!) is great for trying out different visualisations. Inspecting specific variables might be a great one to start with. A visualisation that I think works well for jsdares is visualising method calls by highlighting corresponding elements on the canvas. Just be careful -- this may be a great time-sink as chances are that you won't get the great debugger you're hoping for on first try. But it might well be worth it, too. :-)

from codecombat.

A challenge! Yeah, I wasn't prioritizing this until we did Gridmancer–the need for it in harder challenges became painfully clear then.

from codecombat.

Made some progress on this–see screenshot at end of the Gridmancer blog post.

from codecombat.

Sweet, looks good! Keep us posted on any user testing or other results about this, I'm very curious to hear if and how learners use these controls. :)

[And, in any case, keep up the great work with CodeCombat, awesome to see your open approach]

from codecombat.

@janpaul123 I haven't really finished it, it's not too pretty, it's often slow, there are no step messages, there's no time-abstracted variable display, and there are many edge cases left to handle for which variables can be inspected, but you can kind of get the idea now:

Would love any feedback.

from codecombat.

Some remaining UI tasks:

• Do something where it's not just a <ode> tag with typography: "terrible"
• Add timelessness to SpellDebugView for simple values (think a sparkline for numbers)
• Give SpellDebugView a nicer interface for displaying Thangs (Portraits? full ThangAvatarViews?)

from codecombat.

Looks great. I guess we all know from using debugging tools that this is very valuable. This solves a real problem reported by users, so that's good!

Just want to reiterate what I said earlier: would love to hear about user testing results! The scrubbable timeline didn't work too well in jsdares (see also codecombat/aether#10), so it's critical to test how learners actually use this. Might also be worthwhile to just prototype/hack different visualisations (this one, step messages, breakpoints, jumping to function calls when clicking a function, showing the flow through a program a la Learnable Programming, etc) and test if they work before fully implementing them.

from codecombat.

I agree that it's all about UX testing it. I'm guessing we'll have some different results, because we implemented this for more advanced challenges with more experienced programmers rather than the beginners, since we saw (and you mentioned) that beginners don't take advantage of the debugging tools.

from codecombat.

👍

from codecombat.

@nwinter The debugging hover tool is very useful for me. But I also add a lot of variables to "this", and when I hover over them, it says "this.myvar is undefined". Naturally, the variables I add are the ones most in need of debugging, so it would be very very helpful if the hover could show the variables that have been added to "this".

from codecombat.

@schmatz this relates to what you've been working on recently.

from codecombat.

@nwinter Thanks for tagging these things for me, I'll keep an eye on them as I work on this.

from codecombat.