使用debugger来调试代码的原因是什么

这篇文章主要介绍了使用debugger来调试代码的原因是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇使用debugger来调试代码的原因是什么文章都会有所收获，下面我们一起来看看吧。

10年积累的成都网站建设、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有沙坡头免费网站建设让你可以放心的选择与我们合作。

console.log vs Debugger

相信绝大多数同学使用 console.log 调试的，把想看的变量值打印在控制台。

这样能满足需求，但是遇到对象的打印就不行了。

比如我想看 webpack 源码里的 compilation 对象的值，我打印了一下：

但你会发现对象的值也是对象的时候不会展开，而是打印一个 [Object] [Array] 这种字符串。

更致命的是打印的太长会超过缓冲区的大小，terminal 里会显示不全：

而你用 debugger 来跑，在这里打个断点来看就没这些问题了：

有的同学可能会说，那打印一个简单的值的时候用 console.log 还是很方便呀。

比如这样：

真的么？

那还不如用 logpoint：

代码执行到这里就会打印：

而且没有污染代码，用 console.log 的话调试完之后这个 console 不也得删掉么？

但是 logpoint 不用，它就是个断点的设置，不在代码里。

当然，最重要的是 Debugger 调试是可以看到调用栈和作用域的！

首先是调用栈，它就是代码的执行路线。

比如这个 App 的函数组件，你可以看到渲染这个函数组件会经历 workLoop、beginWork、renderWithHooks 这些流程：

你可以点开调用栈的每一帧看下都执行了啥逻辑，用到啥数据。比如可以看到这个函数组件的 fiber 节点：

再就是作用域，点击每一个栈帧就可以看到每个函数的作用域中的变量：

用 Debugger 可以看到代码的执行路径，每一步的作用域信息。而你用 console.log 呢？

只能看到那个变量值而已。

拿到的信息量的差距不是一点半点，调试时间长了，别人会对代码的运行流程越来越清晰，而你用 console.log 呢？还是老样子，因为你看不到代码执行路径。

所以，不管是调试库的源码还是业务代码，不管是调试 Node.js 还是网页，都推荐用 Debugger 打断点，别再用 console.log 了，就算想打印日志，也可以用 LogPoint。

而且在排查问题的时候，用 Debugger 的话可以加一个异常断点，代码跑到抛异常的地方就会断住：

可以看到调用栈来理清出错前都走了哪些代码，可以通过作用域来看到每一个变量的值。

有了这些东西，排查错误不就很轻松了么！

而你用 console.log 呢？

啥也没，只能自己猜。

Performance

前面说 Debugger 调试可以看到一条代码的执行路径，但是代码的执行路径往往比较曲折。

比如那个 React 会对每个 fiber 节点做处理，每个节点都会调用 beginWork。处理完之后又会处理下一个节点，再次调用 beginWork：

就像你走了一条小路，然后回到大路之后又走了另一条小路，用 Debugger 只能看到当前这条小路的执行路径，看不到其他小路的路径：

这时候就可以结合 Performance 工具了，用 Performance 工具看到代码执行的全貌，然后用 Debugger 来深入每一条代码执行路径的细节。

SourceMap

sourcemap 很重要，因为我们执行过的都是编译打包后的代码，基本是不可读的，调试这种代码也没啥意义，而 sourcemap 就可以让我们直接调试最初的源码。

比如 vue，关联了 sourcemap 之后，我们能直接调试 ts 源码：

nest.js 也是：

不用 sourcemap 的话，想搞懂源码，但你调试的是编译后的代码，怎么读懂呢？

读懂一行

前面说的 Debugger、Performance、SourceMap 只是调试代码的工具，那会了调试工具，依然读不懂代码怎么办呢？

我觉得这是不可能的。

为什么这么说呢？

就拿 react 源码来说：

关于“使用debugger来调试代码的原因是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“使用debugger来调试代码的原因是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。