I want to make a program, that can help me visualize any algorithm. what I actually want is that I want to run any script on left hand side and visualize it on right hand side, How can i make a web page or a system that let me execute javascript line by line in the browser and extract all the variable, arrays, function calls, stack memory etc information about that script.

for example write a simple program :

var array = [1,2,3,4,5];
var key = 3;

function LinearSearch(array, key){
    for(let i =0; i<array.length; i++){
       if(array[i] == key){
           return i;
        }
     }
}

LinearSearch(array, key);

now i want to extract all the information from this piece of code like what variable was declare and assigned with watch value what function call came in stack what is the current value of any variable etc.

I don't know if i explained my problem correctly or not ..

you can look at the website https://pythontutor.com/live.html#mode=edit as a reference the only thing i am gonna do different is to that i am gonna use html canvas for better visualization, that's it, All I can see right now is that this website runs the whole code at once and keeps the track record of all the processes happed during the execution, like variables value changes, function calls etc. and show that information after the execution by converting them into steps...

** has anyone have any idea how to do it ** This project is important for me.. I can't skip it.