专栏首页前端充电站不靠谱的 console

不靠谱的 console

前言

作为一名前端, console 估计会时时刻刻陪伴我们,其实各个端都会有输出变量的值的方法,以便调试,这里我指的 console 单纯指的是前端中的 console。不得不说,它是一个调试的好方法,但它也是不可信的。

一个例子

先上代码:

  1. var obj = {
  2. name: {
  3. age: '1'
  4. }
  5. }
  6. console.log(obj);
  7. obj.name.age = 2;
  8. console.log(obj);

大家猜测下结果,我们预期的肯定是不一样的,毕竟中间有修改

但是事实上却是出乎我们意料的

是的,两个都是一样的, console 真的是一个吃里扒外的东西,那到底是为什么呢?

原因

实际上我们输出非对象类型的值的时候,是完全没问题的,比如

所以,我们可以知道,在使用 console 打印一个 JavaScript 对象的时候,由于对象是引用类型,那么它会一直引用内存中的值,当你输出的时候,对象中的值已经发生了改变,所以才会出现这种打印结果不正确的情况

另外,从上面可以看出,在浏览器环境中,console.log() 实际上也是一种异步的方法

对此,《你不知道的javascript中卷》第二部分异步和性能1.1节异步控制台部分有提及:

并没有什么规范或一组需求指定 console.* 方法族如何工作——它们并不是 JavaScript 正式的一部分,而是由宿主环境(请参考本书的“类型和语法”部分)添加到 JavaScript 中的。因此,不同的浏览器和 JavaScript 环境可以按照自己的意愿来实现,有时候这会引起混淆。 尤其要提出的是,在某些条件下,某些浏览器的 console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是,在许多程序(不只是 JavaScript )中, I/O 是非常低速的阻塞部分。所以,(从页面/ UI 的角度来说)浏览器在后台异步处理控制台 I/O 能够提高性能,这时用户甚至可能根本意识不到其发生。

node 环境中的 console

上面我们分析是在浏览器环境中,那么在 node 环境中会出现上面的情况么?

从上面可以看出, node 环境中是不存在情况的

解决方法

方法一

使用 JSON.stringify,原理是将它转换成字符串输出,这样就不会在引用原有的对象的内存,如下所示

方法二

打断点,这种方法是最合适的,也是我们前端最正确的打开方式

题外话

看到网上有这样一个问题,觉得有点意思

参考

https://blog.csdn.net/extendworld/article/details/82709777

https://cnodejs.org/topic/59142d12ba8670562a40ef4d


本文分享自微信公众号 - 前端杂货铺(gh_9013e08e595a),作者:GpingFeng

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端踩坑系列《一》

    记录下最近踩的一些坑,也作为踩坑系列的第一篇,主要是希望以后对遇到的问题,都能够记录下来,下次尽量避免或者在遇到的时候能够快速定位并解决。由于自己的水平有限,遇...

    GopalFeng
  • 关于 JavaScript 中 null 的一切

    JavaScript 有两种类型:原始类型(strings, booleans, numbers, symbols)和对象

    GopalFeng
  • 深入浅出 Vue 中的 key 值

    前几天我写了一篇文章,sortable.js——Vue 数据更新问题 ,当时自己只是从数据的强制刷新角度去分析,而且并没找到真正的“元凶”。

    GopalFeng
  • console有趣的用法

    1.修改控制台输出内容样式 2.重写控制台输出格式(追加出错日期) 3.以表格的形式显示控制台输出内容 4.如何统计一个函数在程序中被调用的总次数 5....

    酷走天涯
  • console 让 js 调试更简单

    Web开发最常用的就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之...

    grain先森
  • 聊聊调试的那些事,超实用!!!

    今天给大家分享的是开发中调试的那些事,在开发中我们最害怕也是最常见的就是出现bug,然后去修改bug,那么怎么去快速定位bug的位置和原因呢?这个时候调试显得尤...

    小丑同学
  • 还是只使用console.log()进行调试?好吧,其实还有更多。

    在浏览器控制台中打印消息无疑可以拯救所有开发人员。 console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题。

    Tz一号
  • 【译】超越console.log() —当debug时你需要使用的8个console方法

    你debug时或许没有使用过的超越console.log()的console方法!

    腾讯IVWEB团队
  • JavaScript Console的常见用法

    行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优...

    Nian糕
  • Firebug控制台详解

    Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它...

    ruanyf

扫码关注云+社区

领取腾讯云代金券