首页 > 代码库 > javascript之console篇

javascript之console篇

2024-07-09 15:06:25   228人阅读

javascript中的console使用得当，将会事半功倍，对bug，性能等的跟踪，优化是个不错的利器！

1、基本日志消息打印：

console.debug(msg);
console.info();
console.warn();
console.error();
console.log();


方法参数：
msg
类似C语言的printf
console.log("The number of %s is %d", mytext, myval)
变量替换具有五种变量类型：
%s - 字符串 
%d - 整数 
%f - 浮点数 
%i - 整数 
%o - 无类型/任意
变量类型控制变量的呈现方式。例如，由整数变量类型表示的浮点数值显示为一个整数。

2、打印可折叠的对象或者dom

要显示可检查的 JavaScript 对象，请使用 console.dir() 将其发送到控制台。
要显示可检查的 DOM 节点，请使用 console.dirxml() 将其发送到控制台。 console.dir(对象);
console.dirxml(domid);

3、计数器

使用 console.count()，其字符串包含作为参数的计数器标签。首次与特定标签一起使用时，
将在控制台输出中建立一个计数器。之后使用带有相同标签的 console.count() 时，计数
器的计数将增加。要将计数器重置为零，请使用带有标签的 console.countReset()。
 

4、计时器

在代码的任意位置使用 console.time() 以启动计时器，并使用 console.timeEnd() 以结
束计时器并将结果发送到控制台。如果要为你的计时器添加标签或需要多个计时器，请为
console.time() 和 console.timeEnd() 方法传递具有作为参数的唯一标签的字符串。如果
不传递参数，这些方法将使用“default”作为标签

5、断言

console.assert() 的第一个参数评估为 false，它将运行 console.error()，并将断言的额外参数用于错误消息
console.assert(f < 25, ‘f is not less than %d, but is instead %o‘, 25, f);
它等效于写入：
if(!(f < 25)){
console.error(‘f is not less than %d, but is instead %o‘, 25, f)
}

6.跟踪和分析

了解从何处调用你的代码、正在运行哪个代码，以及执行任务需要多长时间，这些信息对于
分析速度缓慢或异常行为非常有用。
堆栈跟踪通过向上追溯路径的跟踪请求向你显示到达当前代码的执行路径。在代码中使用
console.trace() 以显示堆栈跟踪。
在其他实例中，查看两点间运行的代码的每个部分将十分有用。探查器是用于该目的的最佳
工具，但在一些情况下可能需要比手动停止和开始更高的精确度。
要从代码中精确地开始和停止探查器，请使用 console.profile() 开始记录探查器会话，并
使用 console.profileEnd() 停止记录。
将字符串作为方法的参数传递到 console.profile()，以将其用作分析报告的名称。
覆盖分析会话可能会创建异常报告。在首次测试运行时使用  console.trace() 替代
console.profile()，以确保不会在结束分析会话前多次调用 console.profile()。如果发现获
取的跟踪比预计的多，这可能是你的问题。

7、使用demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="GBK">
	<title>Console</title>
	
</head>
<body>
	<div id="qunit">
		<div id="qunit-fixture">test markup</div>
		</div>
	
</body>
</html>
<script type="text/javascript" >
	//打印信息
	var s = 'string',i=123,f=123.456,d=234,o={name:'wch',id:123};
	console.debug('debug');
	console.info(o);
	console.warn('s=%s,i=%i,f=%f,d=%d,o=%o',s,i,f,d,o);
	console.log('%o,%s',s,s);
	
	console.dir(o);
	console.dir(s);
	console.dirxml(qunit);
	
	console.count('mylabel');
	for(var i = 0; i < 10; i++){
		console.count('mylabel');
		console.count(i);
	}
	
	
	console.time('time');
	alert('time');
	console.timeEnd('time');

	console.assert(d<100,"d 小于100");
	console.assert(d<1000,"d小于1000");
	
	console.profile('pro');
function a(){
c();
}
function b(){
c();
}
function c(){
		
console.trace()
}
function e(){
	a();
b();

}
console.trace();
a();
e();
console.profileEnd('pro');


	</script>




联系
我们