Hopding / js-visualizer-9000-client

A React app to interactively visualize JavaScript's Event Loop
https://jsv9000.app
1.15k stars 132 forks source link

Console Log should be push and pop into call stack #8

Open PhakornKiong opened 3 years ago

PhakornKiong commented 3 years ago

Based on current behaviour, console.log() is visualized using showSnackbar() in the client side.

Currently only user-defined function will get instrumented via Tracer.EnterFunc and Tracer.ExitFunc.

As console.log() is a function call, perhaps we should make visualizing call stack more complete. This can be implemented from server-side or client-side.

However, my opinion skew towards the client-side as this is merely a presentation issue and we do not need to support much function call anyway.

We could simply update this to the supported call expression. The timeout of 500 is picked according to the puase value adopted in the autoPlayEvents() App.js

 playNextEvent = () => {
// other code
  if (type === 'ConsoleLog') {
        this.pushCallStackFrame(type);
        this.showSnackbar('info', message);
        setTimeout(() => {
          this.popCallStackFrame();
        }, 500);
      }
// other code
}

Let me know what you think!