call stack

what is it .

How does this work?

Loupe runs entirely in your browser.
It takes your code.

• Runs it through esprima, a JS parser.
• Instruments it a bunch so that loupe knows where function calls, timeouts, dom events, etc happen.
• Adds a whole bunch of while loops everywhere to slow down the code as it runs. This modified code is then turned back into JavaScript and sent to a webworker (in your browser) which runs it. As it runs, the instrumentation sends messages to the visualisation about what is going on so it can animate things at the right time. It also has some extra magic to make dom events, and timers work properly.

$.on('button', 'click', function onClick() {
    setTimeout(function timer() {
        console.log('You clicked the button!');    
    }, 2000);
});

console.log("Hi!");

setTimeout(function timeout() {
    console.log("Click the button!");
}, 5000);

console.log("Welcome to loupe.");