Google Chrome DevTools Debugger 中的 Step 和 Step into 有什么区别？

你在开发中也应该用过 Step （F9）和 Step into（F11 or Command+;）这两个快捷键吧，它们执行后的效果看似一样，但还是有区别的，那你真的知道它们的区别吗？

您可以在运行异步代码或多线程代码时发现差异。

Step into：DevTools 假设您希望在最终运行的异步代码中暂停。

Step：DevTools 在代码中按时间顺序运行时暂停。

例子：

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

在第一行 setTimeout(() => { 的断点处停止后。

Step into：它等待 3 秒并停在第 2 行 console.log('inside')。

Step：它停在第 4 行 console.log('outside')。

所以这个 Step 和 Step into 工作方式相同，但 Step 它会跳过异步功能并进入下一行。

参考：

• What’s New In DevTools (Chrome 65) - Chrome Developers

• debugging - What’s the difference of Step and Step Into in Google Chrome developer tools? - Stack Overflow