放弃 console.log 吧!用 Debugger 你能读懂各种源码

这篇具有很好参考价值的文章主要介绍了放弃 console.log 吧!用 Debugger 你能读懂各种源码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

放弃 console.log 吧!用 Debugger 你能读懂各种源码

放弃 console.log 吧!用 Debugger 你能读懂各种源码

很多同学不知道为什么要用 debugger 来调试,console.log 不行么?

还有,会用 debugger 了,还是有很多代码看不懂,如何调试复杂源码呢?

这篇文章就来讲一下为什么要用这些调试工具:

console.log vs Debugger

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

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

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

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

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

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

比如这样:

放弃 console.log 吧!用 Debugger 你能读懂各种源码

真的么?

那还不如用 logpoint:

放弃 console.log 吧!用 Debugger 你能读懂各种源码

 

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

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

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

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

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

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

放弃 console.log 吧!用 Debugger 你能读懂各种源码

放弃 console.log 吧!用 Debugger 你能读懂各种源码

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

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

而你用 console.log 呢?

啥也没,只能自己猜。

由于本篇文章都是gif动图,今天上传太累了,要看全文,请点击以下链接:https://cybozudev.kf5.com/hc/community/question/34258651/文章来源地址https://www.toymoban.com/news/detail-416411.html

到了这里,关于放弃 console.log 吧!用 Debugger 你能读懂各种源码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序console.log不打印问题

    好像某一天突然小程序就不打印了... 全局搜索compress.drop_console(一般在config文件中),设置为false即可 解决了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 然后顺便升级了小程序最新版本。 附上配置图:

    2024年02月12日
    浏览(37)
  • vue 模板中使用 console.log

    在 vue 工程中,你是否以为下述方式可以正常使用? 如果项目中这样使用,vue2 会直接抛出警告: [vue warn]: Property or method “console” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the prope

    2023年04月21日
    浏览(33)
  • Selenium 捕获 console logs (Java)

    目录 启用日志记录功能 有时候在进行自动化测试的时候控制台输出会帮忙定位问题,所以捕获控制台输出就显得很重要了~ 以下以selenium 4为例:  我们可以使用driver.manage().logs().get(LogType.BROWSER)代码在Selenium中检索日志,该代码将返回一个包含所有控制台日志的LogEntries对象。

    2024年02月05日
    浏览(39)
  • vscode 清除全部的console.log

    在放页面的大文件夹view上面右键点击在文件夹中查找 console.log.*$  注意:要选择使用正则匹配  替换为 \\\" \\\" (空字符串) 注释打印  注意:我这里在匹配前面加了四个空格,是因为页面里面有些已经是注释了的,如果不在前面加空格就会全部都匹配到,重复加注释变成 // // co

    2024年02月10日
    浏览(37)
  • 【前端】webpack打包去除console.log

    需要在打包的时候,自动地去除掉所有console.log 也可以用 if(process.env.NODE_ENV === \\\'production\\\'){} 之类的条件判断包起来,打包的时候生产环境自动去掉console.log测试环境保留

    2024年02月09日
    浏览(41)
  • javascript实现久久乘法口诀表、document、write、console、log

    MDN console.log() 方法向 Web 控制台输出一条信息。这条信息可能是单个字符串(包括可选的替代字符串),也可能是一个或多个对象。 w3school log() 方法返回数字的自然对数(以 E 为底)。 如果参数 x 为负数,则返回 NaN 。 如果参数 x 为 0 ,则返回 -Infinity 。 MDN Console 对象提供了浏览

    2024年02月17日
    浏览(42)
  • webpakc原理之开发一个清除console.log(xxx)的loader

    一、webpack中清除console的方法 当然想要清除console我们可以使用babel-loader结合babel-plugin-transform-remove-console插件来实现。 安装babel-loader和babel-plugin-transform-remove-console插件 在webpack配置文件中配置loader 其中, babel-plugin-transform-remove-console 插件中的exclude选项可以指定保留哪些日志

    2024年02月11日
    浏览(37)
  • 【IDE 小程序】小程序控制台 不打印 console.log问题

    全局搜索compress.drop_console(一般在config文件中),设置为false,再重新打开小程序即可

    2024年02月13日
    浏览(95)
  • uniapp小程序console.log在微信开发者工具中不打印问题

    最近在开发一款uniapp小程序,发现console.log在微信开发者工具中不打印,但在H5页面就能够有打印输出,于是在网上寻找原因… 主要是由于vue.config.js文件中有设置发布时删除console的配置,如下: 官网参考地址:全局文件 —— vue.config.js 此时可以全局搜索 drop_console 将compres

    2024年02月10日
    浏览(70)
  • 如何在【微信小程序 】中的 webview 查看H5页面的console.log和调试H5页面?

    大家好我是 黑臂麒麟 ; 下面是开发微信小程序嵌入H5调试技巧: 问题: 在微信小程序页面中,web-view内嵌了另一个页面url,从小程序跳转到该H5页面的时候,无法看到该H5页面的控制台信息。那就没有办法了么?不,凭着锲而不舍的精神,在网络的海洋遨游许久。我查找到解

    2024年02月17日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包