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 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
九种原生js动画效果
Nov 11 Javascript
js微信分享API
Oct 11 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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网站在线人数统计
2008/04/09 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js控制input输入字符解析
2013/12/27 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
浅谈五大Python Web框架
2017/03/20 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
浅析python内置模块collections
2019/11/15 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
详解python with 上下文管理器
2020/09/02 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
网上签名寄语活动留言
2014/01/18 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python