回调队列（调试器）内部是什么？

Question

I would like to know how is it possible to know the content of the callback queue.
For example, if you consider the following Javascript code :

<script>
    console.clear();   
    setTimeout( function () {console.log("Hello ")},5000);      
    console.log("What is inside Callback Queue ? ");        
</script> 

Is there a mean to print the content of the callback queue to the console ?
If not possible in such that way, is it possible with a debugger by adding a break point to the line console.log("What is inside ...?"); (I tried with Firefox debugger but I did not manage to do it)
Or another solution ? Thanks for answer.

Answer 1

The performance tab of the browser's developer tools contains all the informations needed. Do the following:

1. Filter markers : function call (only to avoid a lot of informations)

2. Start Recording

3. Reload (CTRL + R)

4. Stop Recording (With my example, when Hello is printed to the console)

In the waterfall, Click on the mark that appears after 5000ms (with my example) and useful informations are displayed in the right pane.

Answer 2

While I'm not sure what your final goal is, you can wrap the function you're calling with the following wrapper function, which prints to the log whenever a function is being enqueued:

 function wrapper(func) { console.log(`'${func.name}' was enqueued`); return func; } function foo() { console.log('Hello') } setTimeout(wrapper(foo), 5000); 

You can use a similar mechanism to maintain an array that'll contain all the functions that are currently waiting.