js代码debugger模式下console.log结果和非debugger模式下不一样

我们来看一下下面一段简单代码的输出:

var obj = {a:{b:2}};
console.log("before:",obj);
var obj2 = obj; // 断点1
obj2.a.b = 0;
console.log("after:",obj);

当我们不打断点的时候,输出结果为:

before:{a:{b:0}}
after:{a:{b:0}}

当我们在断点1处打上断点后,当到达断点后,我们可以看到,控制台输出结果:

before:{a:{b:2}}

猜测这可能是console.log做的一个优化,因为整段代码执行完后,obj的值是改变了的,而为什么obj值会改变,这就需要弄清楚js中的基本类型和引用类型的区别。

js中的基本类型和引用类型:

基本类型:Number, Boolean, String, undefined, null
引用类型:Object, Function
基本类型的数据是存放在栈内存中的,引用类型的数据是存放在堆内存中的。
因此,基本类型的复制就是在栈内存中开辟出一个新的存储区域用来存储新的变量,两个值之间不会互相影响。
而引用类型的定义其实就是在栈内容中存储了一个指针,这个指针指向堆内存中改对象的存储地址,将引用类型复制给另一个变量时,实际是将该引用类型的指针给了变量,两个变量指向了同一个指针,因此这两个变量之间是相互影响的。

参考资源链接:[前端开发调试秘籍:JS调试技巧深度解析](https://wenku.csdn.net/doc/21d0tkmoma?utm_source=wenku_answer2doc_content) 《前端开发调试秘籍:JS调试技巧深度解析》是一份宝贵的资源,它深入探讨了从基础到高级的JavaScript调试技巧,特别适合希望提升前端开发调试效率的开发者。要有效地利用console.log及其相关功能进行JavaScript代码调试,首先需要理解这些工具在不同浏览器中的使用方法和最佳实践。 console.log是最常用的调试函数,它可以在控制台输出字符串、对象或变量的信息。例如,使用`console.log(variable)`可以帮助开发者查看变量在代码执行时的值。更高级的用法包括字符串插值,如`console.log('The value of x is %d', x);`,这允许开发者以更加灵活的方式输出调试信息。 当需要追踪代码执行流程时,可以使用`console.debug()`,它与`console.log()`类似,但在控制台中以不同的颜色显示,便于识别。而`console.warn()`和`console.error()`则分别用于输出警告和错误信息,它们在调试中起到提示作用,帮助开发者快速定位潜在的问题点。 若要实现更复杂的调试,可以使用`console.group()`和`console.groupEnd()`来组织相关联的日志信息,使得调试信息更加条理化。`console.time()`和`console.timeEnd()`可用于计时,以评估代码执行的时间效率。`console.profile()`和`console.profileEnd()`可以启用浏览器的性能分析器,这对于优化性能瓶颈常有用。 在现代浏览器控制台中,还提供了`debugger`语句,这是一个常强大的调试工具,它会在代码执行到该语句时自动暂停,相当于在代码中设置了一个断点。这使得开发者可以在执行的特定时刻检查程序状态,包括调用栈、作用域变量等,而无需手动在每个可能出错的地方插入console.log语句。 除了上述技巧,前端开发者还应该熟悉如何使用浏览器的开发者工具进行元素检查、网络请求分析和性能监控。这些功能可以帮助开发者理解页面的动态行为,找出性能瓶颈,优化用户体验。 综上所述,掌握并熟练使用console.log及其相关功能是前端开发者进行高效调试的关键。通过阅读《前端开发调试秘籍:JS调试技巧深度解析》,开发者可以更深入地理解这些工具的使用场景和高级用法,从而提升开发效率和问题解决能力。 参考资源链接:[前端开发调试秘籍:JS调试技巧深度解析](https://wenku.csdn.net/doc/21d0tkmoma?utm_source=wenku_answer2doc_content)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值