控制台日志与DOM执行不同步？为何日志无法准确反映DOM状态？

你遇到的这个问题其实挺常见的，结论先给你：确实不能完全信任控制台直接打印DOM元素来反映代码执行那一刻的真实DOM状态，背后是控制台的工作机制在搞鬼。

到底是怎么回事？ #

当你用console.log(extLinks[i])打印DOM元素时，Chrome控制台并没有立刻把这个元素的所有属性都拍个快照存下来——它存的只是一个指向这个DOM元素的引用。只有当你在控制台里点击展开这个元素，查看它的详细属性时，控制台才会去读取这个元素的当前最新状态，而不是你执行console.log那一刻的状态。

再结合你的延迟场景来看：

• 当延迟设为100ms时，你有足够的时间在控制台展开第一组打印的元素，这时候printLater还没跑，所以元素确实没有target属性，你看到的是真实的当时状态；
• 当延迟只有10ms时，printLater执行得太快了，在你还没来得及点击展开控制台里的元素之前，代码已经给元素加上了target="_blank"。等你再去展开查看时，控制台读取的是已经修改后的状态，就会让你误以为打印的时候属性就已经存在了，但实际上打印的那一刻属性还没被添加。

怎么才能看到真实的执行时刻状态？ #

如果想准确查看代码执行到console.log那一步时DOM元素的真实状态，你需要手动生成快照，给你几个实用的方法：

• 打印元素的HTML结构快照，用outerHTML：

console.log(extLinks[i].outerHTML);

• 浅拷贝元素的属性对象，保存当时的属性状态：

console.log({...extLinks[i].attributes});

• 使用console.dir()代替console.log()，它会强制展示打印时刻的对象静态快照：

console.dir(extLinks[i]);

用这些方法，你就能看到代码执行那一刻DOM元素的真实状态，不会被后续的修改干扰了。

内容的提问来源于stack exchange，提问作者run_the_race