- Published on
07-console.log 的 "bug" ?
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
💡
问题 用 console.log()
来打印一个修改过的对象,修改前后打印的结果,竟然是一样的?
1.例子

最后一次执行的代码,我们再修改的前后打印同一个对象,但打印的时候,为什么都是修改之后的值呢?
如果你细心一点你就会发现右边有一个小小的 i
符号,把鼠标放上去就可以看到原因:

这里告诉我们,这个是刚刚执行完代码的结果。
💡
敲黑板 console
中的对象,在被打印之前是以引用的方式保存的。
2.如何正常打印
那如果要打印修改之前的值如何操作?
- 打印一个从这个对象复制出来的对象。
- 使用资源面中的断点来调试
- 使用
JSON.stringify()
方法处理打印的结果 - 更多你可以想到的好方法~
Related series
00-写在前面
March 2, 2021
01-Chrome 版本
March 2, 2021
02-复制 & 保存
March 2, 2021
03-快捷键和通用技巧
March 2, 2021
04-使用 Command
March 2, 2021
05-代码块的使用
March 2, 2021
06-console 中的 $
March 2, 2021
07-console.log 的 "bug" ?
March 2, 2021
08-异步的 console
March 2, 2021
09-Ninja console.log
March 2, 2021
10-自定义格式转换器
March 2, 2021
11-对象&方法
March 2, 2021
12-console.log 并不简单
March 2, 2021
13-打造一个终极 log
March 2, 2021
14-打印时间戳
March 2, 2021
15-直接把 `log` 作为回调函数
March 2, 2021
16-初窥 Network
March 2, 2021
17-Network 深入
March 2, 2021
18-Network 细节
March 2, 2021
19-元素面板的基本操作
March 2, 2021
20-元素面板调试技巧
March 2, 2021
21-元素面板里的编辑器
March 2, 2021
22-颜色选择器
March 2, 2021
23-Drawer 使用技巧
March 2, 2021
24-Drawer 动画调试
March 2, 2021
25-Drawer 性能优化
March 2, 2021
26-Workspace 使用技巧
March 2, 2021
27-自动美化输出
March 2, 2021
28-CSS 概览
March 2, 2021
29-Custom UI Themes
March 2, 2021
30-Source diff
March 2, 2021