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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
Angular的事件和表单详解
Dec 26 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php动态变量定义及使用
2015/06/10 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
JavaScript 事件系统
2010/07/22 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python算法演练_One Rule 算法(详解)
2017/05/17 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
html5时钟实现代码
2010/10/22 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
文秘自荐信
2013/10/20 职场文书
护理专科自荐书范文
2014/02/18 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL