ReactNative使用chrome调试查看log的一个小坑

在 chrome 中打印对象的时候, 对象数据是折叠起来的, 如下图:

image.png
这样一层层的包裹让数据看起来更加清晰, 但是这里却有一个小坑: 在展开数据的时候 chrome 会再次从内存中读取一次数据, 对于需要展开的log, 展开后看到的可能不是打印时的值, 而是展开时内存中的值 ,如果需要查看打印时数据, 还是从对象取出后再打印吧.

下面是针对这个现象的测试:

    componentDidMount() {
        const a = {
            a1:1,
            b:{
                a2:2,
            }
        };
        console.log(a); // 改变前 a1 = 1
        setTimeout(()=>{
            a.a1=12;
            console.log(a); // 改变后 a1 = 12
        }, 2000);
    }

这里设置了一个2秒以后改变a对象中a1值的小机关

下面是 chrome 打印结果:

image.png
在第一次的打印中 a1没展开的值是 1, 展开后(2秒后展开的)成了12, 第二次也就是2秒后, 展开和非展开的值相同.
这里其实 chrome 给出了提示 value below was evaluated just now