chrome控制台console.log无法时实打印引用类型值的

2019-01-31 本文已影响3人龙旗飘扬的舰队

在js脚本中，使用console.log打印一个大型的对象（像 vm （vue实例），或者 window 对象），然后再设置延迟改变该对象的的某个属性（假设属性名为 ppp ）的值，会发现个有趣的现象：

如果是 window，假设执行如下脚本

image

会在控制台打印出如下输出：

image

首先，马上点击展开第一个输出值，10s后点击展开第二个输出值，会发现两个值分别为

第一个

image

第二个

image

从结果上看，【点击展开对象】时，控制台才会动态展示window对象的属性值。第一次点击，ppp的值仍然是666，10s之后再点击就变为了20000

如果是 vm 对象，也有问题，只是略有不同，如下：

image

首先，打印出数据后，第一时间点击并展开这两个对象

image

等待5s后，【点击 ... 展开第一个对象属性ppp的值】，展开前后分别如下图

image

等待10s后，【点击 ... 展开第二个对象属性ppp的值】，展开前后分别如下图

image

从结果上看，【点击...展开对象属性的值】控制台才会动态展示 vm 对象的属性ppp的值

所以可以确定，这个是 chrome 内核中 console.log 功能上的一个bug，而且没有修复。实际上，这个bug早在2012年就已经被提出，不过至今没有正式修复。目前已知，火狐浏览器上，并没有这个问题。

目前并没有特别好的解决办法，如果强制 string 化，对某些 dom 类对象是有问题的，所以只能尽量不要打印过于复杂的对象，或者仅打印必要的对象属性
这个bug目前的状态如下：

Webkit(http://trac.webkit.org/changeset/125174)2012年8月9日两年半后实施了一个修复程序，但似乎还没有将其添加到Chrome中。

参考文档：