您的位置：首页 > Web前端 > JavaScript

利用Console来调试JS程序、Console用法总结

2016-01-21 16:25 681 查看
[原文链接]http://blog.163.com/zhangmihuo_2007/blog/static/27011075201452522824347/
目录：

一、什么是Console
二、什么浏览器支持Console
三、为什么不直接使用alert或自己写的log
四、console.log(object[,object,.....])
五、console.debug，info，warn，error
六、console.assert(expression[,object,...])
七、console.clear()
八、console.dirxml(node)
九、console.trace()
十、console.group(object[,object,...]),groupCollapsed,groupEnd
十一、console.time(name)/console.timeEnd(name)
十二、console.profile(name)/console.profileEnd()
十三、console.count([title])
十四、console.table(data)
十五、console.dir(function)
十五、tab键代码补全
十五、百度首页的彩蛋！

一什么是Console

Console是用于显示JS和DOM对象信息的单独窗口。并且向JS中注入1个console对象，使用该对象可以输出信息到Console窗口中。

二什么浏览器支持Console

很多人可能都知道Chrome和FireFox(FireBug)中都支持Console。而其他浏览器都支持不好。比如IE8自带的开发工具虽然支持Console，但功能比较单调，显示对象的时候都是显示[Object,Object]，而且不能点击查看对象里面的属性。IE6、IE7虽然可以安装DeveloperToolbar，但也不支持console。Safari、Opera都支持Console，但使用上都没有FireBug和
Chrome的方便。现在firebug推出了firebuglite工具，可以让所有浏览器都支持Console功能，而且使用上和FireBug几乎一样。详见http://getfirebug.com/firebuglite

三为什么不直接使用alert或自己写的log

使用alert不是一样可以显示信息，调试程序吗？alert弹出窗口会中断程序，如果要在循环中显示信息，手点击关闭窗口都累死。而且alert显示对象永远显示为[object]。自己写的log虽然可以显示一些object信息，但很多功能支持都没有console好，看完后面console的介绍就知道了。
（部分比较鸡肋的方法没有列出来，用粗蓝标出来的是常用的方法）

四、console.log(object[,object,.....])

Console.log是最简单输出信息到console窗口的方法，支持多个参数，该方法会把这些参数组合在一起显示
我们首先来写一段倒计时的代码

<!DOCTYPE
HTMLPUBLIC
"-//W3C//DTD
HTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>


<html>


<head>


<title>倒计时</title>


<meta
http-equiv=
"Content-Type"
content=
"text/html;
charset=UTF-8"
/>


</head>


<script
src=
"http://libs.baidu.com/jquery/2.0.0/jquery.min.js"
></script>


<body>


<h1>倒计时：<span>10</span></h1>


<script
type=
"text/javascript"
>


$(document).ready(
function
(){


var
num
=$(
"h1
span"
).first();


var
i
=9;


var
interval
=setInterval(
function
(){


num.text(i);


i--;


console.log(
"当前数值："
+i);


if
(i
<0){


clearInterval(interval);


}


},1000);


});


</script>


</body>


</html>


我们在line:16加入console.log("当前数值："+i);那么在控制台中将输出每次i的值：



log方法第一个参数支持类似C语言printf字符串替换模式，Log支持下面几种替换模式：

%s代替字符串
%d代替整数
%f代替浮点值
%o代替Object

例如，我们输出一个时间日期：

console.log("%d年%d月%d日"，2014,6,25);



比如，我们要把月份“6月”变成“06月”，那么可以使用“%s”，在传入参数的时候要用引号：

console.log("%d年%s月%d日",2014,'06',25);



五console.debug，info，warn，error
这4种方法与log方法使用一模一样，只是显示的图标和文字颜色不一样.



六console.assert(expression[,object,...])
assert方法类似于单元测试中的断言，当expression表达式为false的时候，输出后面的信息,e.g：



注：assert方法在firebuglite不支持，Chrome和FireBug支持
七console.clear()
该方法清空console中的所有信息(Chrome中不支持)

八console.dirxml(node)
把html元素的html代码打印出来,等同于log.

九console.trace()
trace方法可以查看当前函数的调用堆栈信息，即当前函数是如何调用的



十console.group(object[,object,...]),groupCollapsed,groupEnd

这3个函数用于把log等输出的信息进行分组，方便阅读查看。
groupCollapsed方法与group方法一样，只是显示的分组默认是折叠的.

注意：如果后面不跟console.groupEnd()，则第二个分组默认是第一个分组的子节点。



十一console.time(name)/console.timeEnd(name)

我们经常需要测试js函数的执行时间，可能我们自己写代码在第1条语句和最后1条语句取当前时间相减。这组函数其实就实现了这样的功能，time(name)根据name创建1个新的计时器。timeEnd(name)停止给定name的计时器，并显示时间。

下面给个空的for循环，打印0-1000的i的值，用时124.61ms：



十二console.profile(name)/console.profileEnd()

这组方法用于打开浏览器的分析器，用于分析这组函数之间的js执行情况
注：firebuglite不支持profile功能，Chrome支持profile，但分析的内容不详。

十三console.count([title])
count方法用于统计当前代码被执行过多少次，title参数可以在次数前面输出额外的标题以帮助阅读。e.g:

$(
function
(){


test();


test();


test();


test();


});


var
test
=
function
(){


console.count(
"test被执行次数："
);


};


在Chrome中的结果，会打印出累积次数：



而在fireBug中只会显示最后一次最终的次数：test被执行次数：4。
十四console.table(data)
table方法把data对象用表格的方式显示出来，这在显示数组或者格式一样的JSON对象的时候非常有用。
注：table只支持FireBug，而且是在firebug1.6+版本后才有。
此内容将单独开一篇博客，请见《利用console.table()做高级JS调试、Console用法总结（2）》

十五console.dir(function)
dir方法是把列出对象的所有方法。比如，我们显示console对象下都些什么方法：
console.dir(console);



十五tab键代码补全

此功能只针对fireBug下，在Chrome下自带代码提示功能
在fireBug下输入co再按Tab键，将会出现代码提示：



而在Chrome下边输入边出现代码提示，很强大。

十五百度首页的彩蛋！
打开百度首页，查看Javascript输出控制台，呵呵，你发现了什么？百度的招聘启事：


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航