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

前言

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

image.png

Step into next function call与Step'的区别

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’)可以被断点到。

实验在线案例为:https://codepen.io/huihui/pen/poZpggJ

相关文档

https://developer.chrome.com/blog/new-in-devtools-65/#async

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容