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

转载 2016年08月30日 10:13:58

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;
alert弹出框需要点击确认比较麻烦,而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑。
最重要的是alert只能输出字符串,不能输出对象里面的结构,console.log()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);

 

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

php上传多文件console.log打印日志

console.log 原先是 Firefox 的"专利",严格说是安装了 Firebugs 之后的 Firefox 所独有的调试"绝招"。

IE8用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错。
IE浏览器下默认是不支持console.log,反而会因为这句代码报错,解决办法是声明该console对象的log函数为空函数
if(!window.console){
window.console = {log : function(){}};
}

Opera还是不能用 console.log 加上下面两句代码兼容:
window.console = window.console || {};
console.log || (console.log = opera.postError);
这样Firefox/IE/Opera 都能用上console.log,不过没有必要去做这种兼容性工作 console.log()等调试代码应当从最终的产品代码中删除掉。

IE 和 Opera 下的 console.log 比起 Firebugs还是太过简单,比如参数是 Object 或者数组就没有进一步的显示功能。

//变量
var i = 'I am a string';
console.log('变量:',i);
//数组
var arr = [1,2,3,4,5];
console.log('数组:',arr);
//对象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
};
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
};
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
};
console.log('对象:',obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
console.log('对象数组1:',objArr1);
console.log('对象数组1:',objArr2);
/*
输出:
变量:I am a string
数组:[1, 2, 3, 4, 5]
对象:Object { key1="value1", key2="value2", key3="value3"}
对象数组1:[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}]
对象数组1:[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]]
*/

除了console.log(),Firebug还支持多种不同的日志级别:debug、info、warn、error。以下代码将在控制台中打印这些不同日志级别的信息:
代码如下://Use different logging level
console.log("Log level");
console.debug("Debug level");
console.info("Info level");
console.warn("Warn level");
console.error("Error level");
从Firebug控制台中可以看到,不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤,不过这些比较少用到,不是很实用。

来源:http://www.ssqhm.com

 

js调试console.log使用总结图解

一 实例 二 Console.log 总结 1 如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么。我的...
  • bcbobo21cn
  • bcbobo21cn
  • 2016年07月02日 12:36
  • 22811

微信小程序用console.log打印json数据

JSON.stringify(fun.nav_more(cp_nav_state)) JSON.parse()和JSON.stringify() JSON.parse() 方法用于将一个 ...
  • cplvfx
  • cplvfx
  • 2017年10月28日 17:17
  • 885

在JavaScript中使用console.log打印对像、数组等调试代码

js console.log 打印 对像 数组 详解 console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump。co...
  • cangchen
  • cangchen
  • 2015年03月30日 12:19
  • 2184

console.log 打印提示 object 解决方案

console.log(JSON.stringify(data)) 如果你ajax请求后返回值是 data 那这样就可以转换成字符串 了...
  • xuelang532777032
  • xuelang532777032
  • 2016年08月10日 12:41
  • 3139

Firebug: 关于console.log(obj)

如果console.log()中的参数是一个引用对象,控制台上显示的是程序结束后对象的值,而不是程序执行过程中对象的值。测试代码: 1  >>    var obj={hello:1, world...
  • FuDesign2008
  • FuDesign2008
  • 2010年10月13日 10:54
  • 1463

console.log格式输出全解及console的其他方法

console.log还支持格式化输出:%s(字符串)%d、%i(整数)%f(浮点数)%c(CSS样式) script> console.log("%c%s","color: red; backgr...
  • u010081689
  • u010081689
  • 2016年03月31日 14:09
  • 3191

webstorm中console.log的快捷补全方法

c.log 再按tab键  因为嫌 console.log() 的写法太繁琐,想将其简写为 log() 。 我最初是这样写的: var log = console.log; log...
  • xdongll
  • xdongll
  • 2016年08月02日 15:29
  • 4115

在JavaScript中使用console.log打印对像、数组等调试代码

js console.log 打印 对像 数组 详解 console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump。co...
  • cangchen
  • cangchen
  • 2015年03月30日 12:19
  • 2184

js调试console.log使用总结图解

一 实例 二 Console.log 总结 1 如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么。我的...
  • bcbobo21cn
  • bcbobo21cn
  • 2016年07月02日 12:36
  • 22811

【JavaScript】你不知道的 console

consolelog 基础用法 格式化输出 文字样式 consoledir consoletime consolecount consoleassert consolegroup consolecle...
  • csdn_yudong
  • csdn_yudong
  • 2017年06月15日 14:30
  • 316
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript调试技巧之console.log()详解
举报原因:
原因补充:

(最多只允许输入30个字)