脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript console.log调试小技巧

JavaScript调试之console.log调试的一个小技巧分享

 更新时间：2017年08月07日 09:11:18   作者：zuank  
日常开发中经常会需要console来查看当前对象的值。当然用debugger会更全面的查看，但是总有只喜欢用console的，比如我。下面这篇文章主要给大家分享了关于JavaScript调试之console.log调试的一个小技巧，需要的朋友可以参考借鉴，下面来一起看看吧。

前言

对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；

alert弹出框需要点击确认比较麻烦，而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑。

最重要的是alert只能输出字符串，不能输出对象里面的结构，console.log()可以接受任何字符串、数字和JavaScript对象，可以看到清楚的对象属性结构，在ajax返回json数组对象时调试很方便。

//兼容Firefox/IE/Opera使用console.log
if(!window.console){
window.console = {log : function(){}};
}
window.console = window.console || {}; 
console.log || (console.log = opera.postError);

下面分享两张打印出来的信息图片：


上面简单的介绍了console.log调试，下面本文将给大家分享一个JavaScript中console.log调试的小技巧，话不多说，来一起看看详细的介绍：

console出正确的值

我们直接来看这一段代码

var obj = {
 name: '小傻子',
 age: 12
}
console.log(obj)
obj.name = '大傻子'

很明显我在第四行的位置添加了console是想查看obj在第四行的时候的值。

但是结果并不如意会打印出

{name: "大傻子", age: 12}

究其原因，是因为obj为引用型变量，console后面的操作同样会影响到console的内容。

我们看一下这一段代码

var obj = {
 name: '小傻子',
 age: 12
}
console.log(obj.name)
obj.name = '大傻子'

这个时候打印的结果就是预期的小傻子

解决方案

我们不可能去打印obj的所有属性，因为这是不现实的。我们还是希望打印obj但是得到在当前位置的结果，我下面贴出自己的解决方案

console.log(JSON.parse(JSON.stringify(obj)))

通过JSON的方法进行深拷贝是我知道的最简单有效的方法

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • BootStrap Progressbar 实现大文件上传的进度条的实例代码

    BootStrap Progressbar 实现大文件上传的进度条的实例代码

    这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • JS删除数组元素的函数介绍

    JS删除数组元素的函数介绍

    有时候我们需要数组元素的值，那么就可以参考下面的方法，文中提到了不少这方面的资料，数组去重功能等
    2013-03-03
  • layui type2 通过url给iframe子页面传值的例子

    layui type2 通过url给iframe子页面传值的例子

    今天小编就为大家分享一篇layui type2 通过url给iframe子页面传值的例子，具有的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序开发WXML模板语法基础教程

    微信小程序开发WXML模板语法基础教程

    这篇文章主要介绍了微信小程序模板语法，WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • JS生态系统加速Tailwind CSS工作原理探究

    JS生态系统加速Tailwind CSS工作原理探究

    这篇文章主要为大家介绍了JS 生态系统加速Tailwind CSS使用及工作原理探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • JavaScript 命名空间 使用介绍

    JavaScript 命名空间 使用介绍

    使用JavaScript实现命名空间就没有这么舒服了，Javascript只有函数作用域，什么块儿啊、神马文件啊统统都认为是一个命名空间的，有时候因为一些重名问题导致的错误让人莫名其妙，难以调试解决
    2013-08-08
  • 微信小程序如何获取用户头像和昵称

    微信小程序如何获取用户头像和昵称

    这篇文章主要介绍了微信小程序如何获取用户头像和昵称，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 详解基于原生JS验证表单组件xy-form

    详解基于原生JS验证表单组件xy-form

    这篇文章主要介绍了详解基于原生JS验证表单组件xy-form，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 用正则xmlHttp实现的偷(转)

    用正则xmlHttp实现的偷(转)

    用正则xmlHttp实现的偷(转)...
    2007-01-01
  • JavaScript逐点突破系列之this是什么

    JavaScript逐点突破系列之this是什么

    本章将专门介绍与执行上下文创建阶段直接相关的最后一个细节——this是什么？以及它的指向到底是什么，感兴趣的朋友跟随小编一起看看吧
    2021-04-04

最新评论