会用chrome浏览器控制台console.log来打印数据时出现的奇怪现象

使用chrome浏览器控制台console.log时，发生一个问题

查阅资料

我在stackoverflow上提了这个问题 ¹，不过重复了。然后看一下这个几个Weird console.log behavior in Chrome dev tools? ²，Weird behavior with objects & console.log ³，console.log() async or sync ⁴,

具体代码

然后具体问题的代码是这样的

// test.js
const Halper = new Image()
console.log('Halper1:', Halper)
Halper.src = './Halper.jpg'
console.log('Halper2:',Halper)

<script src="./test.js">script>

// chrome coinsole
Halper1: <img src=​"./​Halper.jpg">​ test.js:4 
Halper2: <img src=​"./​Halper.jpg">​ test.js:6

问题是第一个console.log 不应该输出 不带src属性的？

测试代码二

const wait = function(fn, time) {
    setTimeout(function() {
        fn()
    }, time)
}

const Halper = new Image()

wait(function() {
    console.log('1')
    console.log('Halper1:', Halper)
}, 200)

wait(function() {
    console.log('2')
    Halper.src = './Halper.jpg' 
    console.log('Halper2:',Halper)
},3000)

输出是

1
Halper1: <img>​
2
Halper2: <img src=​"./​Halper.jpg">​

测试代码三

// 这里3000改成了300
// 结果和上面的一样

测试代码四

// 200和300都改成了100 
1
Halper1: <img src=​"./​Halper.jpg">​
2
Halper1: <img src=​"./​Halper.jpg">​

总结

可以说需要明白chrome是如何优化这方面的。虽然console.log都会去截取快照，但是就是如果两次console.log和对元素属性进行修改的顺序和时间十分的接近，这么这个console.log会打印出这个元素的引用，这个引用会显示修改后的元素属性。

---

1. why-the-console-log-doesnt-output-data-as-expected ↩︎

2. weird-console-log-behavior-in-chrome-dev-tools ↩︎

3. weird-behavior-with-objects-console-log ↩︎

4. console-log-async-or-sync ↩︎