Any way to debug tasks and microtasks?

Question

Disclaimer: tasks and microtasks are still quite blurry to me.

I'm running into some issue and I think timing is to blame.

I'm maintaining a project that uses a lot of setTimeout(... , 0).

Is it possible to peer into browser's event loop and see what tasks are in the task's and microtask's queue?

I could try to use chrome's devtools timeline or slap some debugger keywords but it is quite tedious.

Answer 1

I could try to use chrome's devtools timeline or slap some debugger keywords but it is quite tedious

Well, there are no shortcuts. You need breakpoints, browser developer tools and a lot of patience.

You could also make an attempt at visualizing the javascript runtime code using the loupe tool. This is the source code if you want to play around or extend it: https://github.com/latentflip/loupe

This project is still at the beginning and there's no way to guarantee it'll reach maturity, so best would be to dig into developer tool documentation and make use of it, as tedious as it might be