Try it out! jsv9000.app
The repo for the backend service is here.
A React app to interactively visualize JavaScript's Event Loop
Home Page: https://jsv9000.app
Try it out! jsv9000.app
The repo for the backend service is here.
I am pasting this code in text box and the ui is breaking.
console.log("3…"); setTimeout(() => { console.log("2…"); setTimeout(() => { console.log("1…"); setTimeout(() => { console.log("Happy New Year!!"); }, 1000); }, 1000); }, 1000);
When I pasted the same on another compiler, It worked completely fine.
Hey, thank you for this tool, it's really nice, but currently is not working :(
This is what I in crhome's dev console:
WebSocket connection to 'wss://js-visualizer-9000-server.herokuapp.com/' failed:
its a feature request, could we add setImmediate, process.nextTick
thanks
The links in repo page/README ref to: https://jsv9000.app/
Doesn't get through:
Adjust DNS or web server config might be the right fix, but for a patch, this ref will work: https://www.jsv9000.app/
Awesome job with this, I work as an instructor at a web engineering school, and I have used it so much as a resource to talk about the event loop. Respect!
Heroku just recently killed their free plan and it seems that your app is affected.
Console error: WebSocket connection to 'wss://js-visualizer-9000-server.herokuapp.com/' failed: Invalid frame header
As per the flow, I can see Micro task is executed before the macro task.
So the Event loop pseudocode may be:
while (EventLoop.waitForTask()) {
const microtaskQueue = EventLoop.microTaskQueue;
while (microtaskQueue.hasNextMicrotask()) {
microtaskQueue.processNextMicrotask();
}
const taskQueue = EventLoop.selectTaskQueue();
if (taskQueue.hasNextTask()) {
taskQueue.processNextTask();
}
rerender();
}
Example code:
setTimeout(function a() {console.log("Macro");}, 0);
Promise.resolve().then(function b(){console.log("Micro");});
console.log("Stack");
Output:
Stack
Micro
Macro
The callback function of setTimeout doesn't immediately enter the Task Queue.
It only does so after the timer expires. However, in a web interface, this happens instantly, which is an error.
When I copy the code to the page, the website is clean and the console displays the following error message:
"react-dom.production.min.js:2857 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range."
I searched from the internet,The reason seems to be this:
This error indicates that a string that does not conform to the Latin1 character set range was passed while using the btoa function. The Latin1 character set (also known as ISO-8859-1) contains most commonly used Latin letters and numbers, but excludes Chinese characters and some other common non-Latin characters.
To solve this problem, you need to transcode the strings so that they conform to the range of the Latin1 character set. This can be done using JavaScript's encodeURIComponent function, for example:
var str = "这是一个包含中文字符的字符串";
var encodedStr = encodeURIComponent(str);
// now you can use btoa safely
var base64Str = btoa(encodedStr);
could you please fix this problem?thank you very much!
Your website(https://www.jsv9000.app/) is very good!
when visualizing javaScript code, their should be button to go back the step
The website breaks when I add any Cyrillic character to the text field, for example: а б в г д е
Task queue is not extrictly FIFO, as this code demonstrate.
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 0, 'two');
});
Promise.race([promise1, promise2]).then(function race(value) {
console.log(value);
// Both resolve, but promise2 is faster
});
// expected output: "two"
microtask queue workd correctly on the following picture
https://github.com/Hopding/js-visualizer-9000-client/blob/master/demo.gif
but when i download the client and the server,same running code the result is different,the 'logC' is not in the microtask!!!
i try to refund the source code ,but it still not work correctly!
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!
Don't support async、await key words.
Hi,
first off, this project is really cool. it's a great idea!
It's not really that important, but i thought it would be cool if the program highlighted currently executed line while stepping through code.
Keep in mind this is only a proposition, so maybe the visualizer doesn't actually need it.
Thanks for great job and keep it up!
Thank you for great work!
#code-editor
with Japanese mode (or paste あ
)btoa
The toBinary
function may be helpful.
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa#unicode_strings
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.