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效果之图片减速度滚动实现代码
Dec 08 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
FleaPHP的安全设置方法
2008/09/15 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
smarty简单入门实例
2014/11/28 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
办理生育手续介绍信
2014/01/14 职场文书
服务质量承诺书
2014/03/27 职场文书
青岛海底世界导游词
2015/02/11 职场文书
大学生实习证明
2015/06/16 职场文书
三八妇女节致辞
2015/07/31 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
小学科学课教学反思
2016/02/23 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA