Chrome新出的开发者调试工具'Step'用途讲解

2023-01-19 本文已影响0人前端妹子ice

前言

最近开发的时候发现，Chrome开发者调试工具中多了Step按钮，主要是为了步入进函数内调试代码。那么之前我们已经有了Step into next function call，可以步入进函数调试。为什么Chrome还要新出step呢？

image.png

image.png

Step into next function call：执行异步函数后，异步函数后面的代码无法断点到。快捷键F11。
Step：执行异步函数后，异步函数后面的代码可以断点到。快捷键F9。

<html>
  <script>
    debugger
    setTimeout(() => {
      alert(‘B’);
    }, 2000);
    console.log(‘A’);
  </script>
</html>

Step into next function call：执行异步函数setTimeout后，异步函数后面的代码console.log(‘A’)无法断点到。
Step：执行异步函数setTimeout后，异步函数后面的代码console.log(‘A’)可以被断点到。