关于FireBug和Chrome的控制台 | 九号球

Firebug和Chrome的控制台是个非常强大的工具，对于页面的调试可谓是利器。看了些资料，略微总结了些使用方法。

1、console.log(); info(); warn(); error();

这是用的最多的控制台指令，完全弥补了alert()打印信息的不足，可以把一个对象完整的打印出来。像console.warn()和console.error()

然后是chrome的控制台

2、分组显示console.group();  console.groupEnd();

分组可以把需要打印很多信息时分开显示，会很条理。

console.group("NO.1");
console.log("log");
console.info("info");
console.groupEnd("No.1");

console.group("group 2");
console.warn("warn");
console.error("error");
console.groupEnd("group 2");

chrome的分组

3、分组显示console.dir();console.dirxml();

console.dir()可以完全打印一个对象的所有属性和方法（和log其实差不多，用的也不大多）

var obj={
	name:"firebug",
	sex:"it",
	say:function(){alert('fire!')}
}
console.dir(obj);
console.log('--');
console.log(obj);

 

相比在chrome下打印一个对象，内容真是太丰富了,意外收获很多

对象不仅能打印，还能打印出元素的代码结构，那就是console.dirxml()

var test = document.getElementById('test');
console.dirxml(test);

<div id="test">
	<span>just do it</span>
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
</div>

chrome下

4、计算运行时间 console.time() console.timeEnd()

使用这个可比js的date函数方便多了，只需要在测试运行时间的代码两端添加即可.但是要注意：计时器的名字一定要前后一致。

console.time("time");
	for(var i=0;i<10000;i++){
		i+=i*i;
	}
	console.log(i);
console.timeEnd("time");

chrome貌似略显慢些啊

5、跟踪函数的运行轨迹 console.trace();

trace()就是用来跟踪函数的运行轨迹

 

window.onload = function(){
	function fn1(){return fn2();}
	function fn2(){return fn3();}
	function fn3(){
		console.trace();
		return "trace";
	}
	fn1();
}

chrome下基本一个样子

6、断言console.assert()

做单元测试时候会常常使用断言，但在js里我没怎么用过。。。。。。

只有在出错的时候才会有返回值，如果断言正确，那就忽略了。

var test = 0;
console.assert(test);
console.assert(test == 0);
console.assert(100 === '100');

chrome下略显寒碜了。。。。

6、测试性能 console.profile(); console.profileEnd();

这个测试性能类似于firebug自带的那个概况：

点一下概况，开始测试，再点一下，结束测试。可以查看在这段时间里的页面请求响应等等。

function fn1(){
	for(var i=0;i<1000;i++){
		fn2();
	}

	for(var i=0;i<100;i++){
		fn3();
	}
	function fn2(){var f2 = "f2";return f2+=f2;}
	function fn3(){var f3 = "f3";return f3+=f3;}

}
console.profile();
fn1();
console.profileEnd();

貌似chrome的控制台不怎么支持console.profile(),每次刷新只是在累加profile的次数

能用的比较多的控制台指令我也就知道这些，以后有常用的还会继续添加。

关于chrome的控制台使用可以参考Google的官方文档，像console.log()的格式化输出、带css输出，在控制台上调试、选取元素等等。