chrome控制台调试：f9 和 f11 有何区别?

Question

f10(跳过下一个函数调用)、f11(进入下一个函数调用)用的很熟，但f9(单步调试)没用过，经过测试感觉和f11一样，遇到函数就进入函数里边执行。那么f9 和 f11 有何区别？

Answer 1

stackoverflow

You can spot the difference while running async code or multi-threaded code.

Step into: DevTools assumes that you want to pause in the asynchronous code that eventually runs

Step: DevTools pause in code as it chronologically ran

Consider this example:

setTimeout(() => {
    console.log('inside')
}, 3000);
console.log('outside')

After stopping on the breakpoint on the first line (setTimeout(() => {).

Step into: it waits 3 seconds and stops on the 2nd line (console.log('inside'))

Step: it pauses on the 4th line (console.log('outside'))

Link to the docs: https://developers.google.com...

Answer 2

那个英语答案可能不直观，我做一个直观的demo。区别是f9，f11都能在下一个是自定义函数时，追进函数进行执行，区别是异步和同步的情况。

情况：断点在setTimeout前

如果是f11, 按了断点在异步回调函数的第一句，也就是alert前

如果是f9，按了就跳过异步回调函数