美文网首页
ReactNative使用chrome调试查看log的一个小坑

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

作者: 王家薪 | 来源:发表于2018-08-17 19:58 被阅读37次

在 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

相关文章

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

    在 chrome 中打印对象的时候, 对象数据是折叠起来的, 如下图: 下面是针对这个现象的测试: 这里设置了一个...

  • 移动端调用console.log检查代码

    前言 移动端调用console.log,打印出来的数据无法查看,在调试过程中让人头疼不已。chrome的inspe...

  • 前端开发 ~ Chrome 调试小坑

    最近在使用AngularJS 进行开发并使用 Google Chrome 进行前端调试的时候,踩了一些小坑,记录一...

  • react-native 运行ios程序remote js de

    1. 问题 我们知道,调试rn程序时,使用remote js debugging,通过chrome查看日志,但是有...

  • 1.2调试工具-页面制作

    调试工具 Chrome 调试工具面板 Elements调试html、css Networks查看网站的请求,与后端...

  • chrome 调试Node.js代码

    chrome 调试Node.js代码 添加--inspect 步骤 编写代码 app.js 使用命令 浏览器查看 ...

  • 移动端js调试工具:eruda

    在写H5页面或者web页面时,最常见的调试是在chrome的开发模式下面,使用console.log();或者打个...

  • 自定义LogUtils

    在开发过程中,Log是必不可少的,在代码节点加上调试Log,可以查看调试内容,比如在网络请求前添加请求参数Log,...

  • 开发小程序遇到的那些事儿

    总结下使用Mac版微信开发工具开发小程序遇到的一些坑和注意事项 Mac 版开发工具不能断点调试,只能打Log的形式...

  • OctDump

    gdb调试MySQL时,查看内存值,很多时候显示为8进制值利用log协助调试时,log无法直接打印这些8进制的值,...

网友评论

      本文标题:ReactNative使用chrome调试查看log的一个小坑

      本文链接:https://www.haomeiwen.com/subject/whitiftx.html