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


Posted in Javascript onAugust 07, 2017

前言

对于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);

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

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

上面简单的介绍了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的方法进行深拷贝是我知道的最简单有效的方法

总结

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

Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 #Javascript
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
bootstrap table表格客户端分页实例
Aug 07 #Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 #Javascript
react native实现往服务器上传网络图片的实例
Aug 07 #Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 #Javascript
ES6新增的math,Number方法
Aug 06 #Javascript
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php计算函数执行时间的方法
2015/03/20 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
angularjs自定义过滤器demo示例
2019/08/24 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python比较两个图片相似度的方法
2015/03/13 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python中引用与复制用法实例分析
2015/06/04 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python中sys.argv函数精简概括
2018/07/08 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
商场活动策划方案
2014/01/24 职场文书
学校安全教育制度
2014/01/31 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript