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

总结

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

赞 (0)

相关推荐

  • js调试工具console.log()方法查看js代码的执行情况

    我之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是: console.log("值为:",fn); console.log()能够输出变量,函数,数组,对象等等 <html> <head> <title>this关键字_函数调用</title>

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • javascript 在firebug调试时用console.log的方法

    console.log(); 当你使用console.log()函数时,下面的firebug一定要打开,不然这函数在用firefox运行时无效且影响正常程序,如果用IE打开,将会出错. 第一个参数可以是一个包含格式化占位符输出的字符串,例如: console.log("The %s jumped over %d tall buildings", animal, count); 格式化字符串 类型 %s 字符串 %d, 整型 %i (暂不支持数字型) %f 浮点型 (暂不支持数字型) %

  • javascript代码调试之console.log 用法图文详解

    javascript代码调试之console.log 用法图文详解

    大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松

  • Python中使用filter过滤列表的一个小技巧分享

    有的时候使用dir(Module),可以查看里面的方法,但是模块自带的属性"__"开头的也会显示,如下: >>> import random >>> dir(random) ['BPF', 'LOG4', 'NV_MAGICCONST', 'RECIP_BPF', 'Random', 'SG_MAGICCONST', 'SystemRandom', 'TWOPI', 'WichmannHill', '_Buil tinMethodType', '_M

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

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

    前言 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用: alert弹出框需要点击确认比较麻烦,而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑. 最重要的是alert只能输出字符串,不能输出对象里面的结构,console.log()可以接受任何字符串.数字和JavaScript对象,可以看到清楚的对象属性结构,在ajax返回jso

  • javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 1.他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. 2.console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作. 3.onsole里面的内容非常丰富,你可以在控制台输入:console,然后就可看到: Console {memory: Memo

  • JavaScript编码小技巧分享

    三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. const x = 20; let big; if (x > 10) { big = true; } else { big = false; } //这样写... const big = x > 10 ? true : false; Short-circuit Evaluation 分配一个变量值到另一个变量的时候,你可能想要确保变量不是null.undefined或空.你可以写一个有多个if的条件语句或者Short

  • JavaScript的一些小技巧分享

    数组去重 ES6提供了几种简洁的数组去重的方法,但该方法并不适合处理非基本类型的数组.对于基本类型的数组去重,可以使用... new Set()来过滤掉数组中重复的值,创建一个只有唯一值的新数组. const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); > Result:(4) [1, 2, 3, 5] 这是ES6中的新特性,在ES6之前,要实现同

  • 关于JavaScript中JSON的5个小技巧分享

    目录 1.格式化 2.隐藏字符串化数据中的某些属性 3.使用toJSON创建自定义输出格式 4.恢复数据 5.使用revivers隐藏数据 1. 格式化 默认的字符串化器还会缩小 JSON,看起来很难看 const user = { name: 'John', age: 30, isAdmin: true, friends: ['Bob', 'Jane'], address: { city: 'New York', country: 'USA' } }; console.log(JSON.str

  • 8个JavaScript条件语句优化小技巧分享

    8个JavaScript条件语句优化小技巧分享

    目录 1.Array.includes 2.Array.every 3.尽早 return 4.三元运算符 5.switch...case 6.Map/Object 7.默认函数参数和解构 8.逻辑与运算符 大家好,我是 CUGGZ. 在日常的开发中,我们经常会编写一些条件语句,过多的 ​ ​if...else​ ​会导致代码难以理解和维护,今天来分享几个优化条件语句的小技巧! 1.Array.includes 来看下面的代码: function test(animal) { if (anima

  • JavaScript中的console.log()函数详细介绍

    JavaScript中的console.log()函数详细介绍

    对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用:而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑. 什么是console.log()? 除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来

  • javascript中关于&& 和 || 表达式的小技巧分享

    如果你还是新手, 而且读完所有这些技巧的详解和每种技巧是如果工作的以后运用它们, 你会写出更加简练高效的JavaScript程序. 确实, JavaScript高手已经运用这些技巧写出了很多强大, 高效的JavaScript程序. 但是你可以这样. 强大的 && 和 || 表达式 你可能在JavaScript库和JavaScript框架中已经见过它们了, 那么我们先由几个基本的例子开始: 例子1. || (或) 设置默认值, 通常用 复制代码 代码如下: function document

随机推荐