A visual way of debugging code and testing lines

Contributors
1

Hi

I’ve started the Basic Algorithm Scripting challenges and finding it hard to work out where my code is going wrong.

It would be really great to have a debugger so you could step through the code and see what is going wrong.
If the debugger or stepper could be more visual and show what is happening behind the scenes that would really help with some of the concepts.
e.g., as a loop iterates over and array you can see each number being processed and added to the new array.

It would also be useful to have a test console to experiment with arrays and strings (like a notepad).

J

3

Also you can use pythontutor.com … just set it to use javascript es6 it wont work for everything you code i mostly used it for the algorithm section and when im doing snippets of code in projects eg tic tac toe.
you can step through your code and it shows whats happenning.
Best though is the dev tools built into Chrome and others

2 Likes
4

You can use Visual Studio Code with a QuokkaJS plugin.
You can see if it’s a valid/error-free JS line, see value of variables, etc.

or use the built-in debugger in VS Code, + node.

vscode_debugger.png1072×826 97.7 KB

You can step line by line, watch variables, etc.

1 Like
5

This is great!

The realtime suggestions and results are exactly what a newbie needs to wrap their head around the notation.