console的一些方法

发表于

今天记录一些关于console的用法。
（1）显示信息的命令

1
2
3
4
console.log("程序员常用的方法");
console.info("信息");
console.error("错误");
console.warn("警告");

下图是浏览器控制台打印出来的效果。
"console1"

（2）占位符
（1）中console的方法均支持printf的占位符格式，支持的占位符：字符(%s)、整数(%d或是%i)、浮点数(%f)，对象(%o)。

1
2
3
4
5
6
console.log("%d年%d月%d日",2017,5,27);
var obj = new Object();
obj.console = "loading";
console.info("%o加载失败%s",obj,"!");
console.error("%f不是整数",4.35);
console.warn("%d年%d月%d日，日期错误%s",2017,5,27,"!!!");

浏览器打印效果如下图：
"console2"

（3）信息分组

1
2
3
4
5
6
7
8
9
console.group("第一组");
console.log("第一组(1):aaaaaaaa")
console.log("第一组(2):bbbbbbbb");
console.groupEnd();
console.group("第二组");
console.log("第二组(1):cccccccc");
console.log("第二组(2):dddddddd");
console.log("第二组(3):eeeeeeee");
console.groupEnd();

效果图：
"console3"

（4）查看对象的所有属性和方法

1
2
3
4
5
6
7
var dObj = new Object();
dObj.aa = function()
{
	console.log("我是dObj的aa方法");
}
dObj.msg = "我是一个对象";
console.dir(dObj);

效果图：
"console4"

（5）显示某个节点的内容

1
2
3
4
5
6
7
8
9
10
//console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。
//html
<div id="dirxml">
	<h4>console.dirxml</h4>
	<p>显示我的node节点</p>
</div>
//js
var dirxml = document.getElementById("dirxml")
console.dirxml(dirxml);

效果图：
"console5"

（6）追踪函数的调用轨迹

1
2
3
4
5
6
7
8
function add(a,b){
   console.trace();
　 return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}

效果图：
"console6"

（7）计时功能

1
2
3
4
5
6
7
8
9
10
11
//console.time()和console.timeEnd()，用来显示代码的运行时间。
//此处要注意/console.time()和console.timeEnd()内的值要一样，才能计算console.time()到console.timeEnd()的时间间隔。
console.time("aaa")
for (var i =0; i < 50000; i++) {
	var div = document.createElement("div");
 	div.style.width = "1920px";
 	div.style.height = "1080px";
 	document.body.append(div);
};
			
console.timeEnd("aaa");

效果图：
"console7"

（8）console.profile()的性能分析

1
//性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在。

说明一下，以上的效果图都是我在谷歌浏览器测试的结果，在火狐浏览器中的表现有所不同，没有上图，有兴趣的可以自己测试一下。

下面是我看到的其他博友文章的链接地址
http://www.cnblogs.com/wangking/p/5889215.html
http://www.dongcoder.com/detail-523120.html