Firebug:Javascript测试利器,Console面板函数详解

分类:前端工程 发表时间:2010年06月30日 字体大小:12号14号

从开始做前端时,一直在用火狐浏览器,之前也有文章介绍了一些火狐插件。今天重点来说说Firebug插件中的Console面板的功能,它可以辅助地完成Javascript性能测试和代码执行记录。

Console面板中自身含有多个可供使用的函数,诸如:console.log(),console.time()等一些常用的方法,我的想法是将这些函数写入在jQuery插件中,这样在项目的前端开发和测试阶段使用起来非常地方便。

代码执行后的效果需要打开Console面板后才可以看到,若出现错误提示,不要惊慌,那是因为使用console.error()方法抛出错误所致,页面的代码并没有出错!

download demo

下面的代码是将Console面板中的大部分比较常用的函数扩展到jQuery的fn对象中,作为一个插件,它的实现原理和使用都很方便。

一、插件代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
	jQuery(function($) {
		$.fn.extend({
			log : function(typeIndex, msg) {
				switch(typeIndex) {
					case 0:
						console.log(msg);
						break;
					case 1:
						console.debug(msg);
						break;
					case 2:
						console.info(msg);
						break;
					case 3:
						console.warn(msg);
						break;
					case 4:
						console.error(msg);
						break;
				};
			}, 
 
			timer : function(type, mark) {
				if(type == 'start') {
					console.time(mark);
				} else if(type == 'end') {
					console.timeEnd(mark);
				};
			},
 
			trace : function() {
				console.trace();
			},
 
			group : function(type) {
				if(type == 'start') {
					console.group();
				} else if(type == 'end') {
					console.groupEnd();
				};
			},
 
			count : function(title) {
				console.count(title);
			},
 
			dir : function(object) {
				console.dir(object);
			},
 
			profile : function(type, title) {
				if(type == 'start') {
					console.profile(title);
				} else if(type == 'end') {
					console.profileEnd();
				};
			}
		});
	});

二、测试页的Html代码:

1
<div id="demo"></div>

三、测试页的调用代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
	jQuery(function($) {
		var $container = $('#demo');
 
		$container.profile('start', 'LoopAnchor');	//性能测试开始
		$container.timer('start', 'Loop');			//代码执行计时开始
 
		for(var i = 0; i< =1000; i++) {
			$container.html($container.html()+i+', ');
			$container.count('Loop count:');
			if(i%100 == 0) {
				$container.group('start');						//分组开始
				var index = Math.round(Math.random()*5);		//根据不同序号,给出不同的记录方式	
				$container.log(index, '<i%100==0>: i='+i);
				$container.trace();								//追踪执行过程
				$container.group('end');						//分组结束
			};
		};
 
		$container.timer('end', 'Loop');			//代码执行计时结束
		$container.profile('end');					//性能测试结束
 
		$container.log(0, '\n\rDir $.fn对象:');
		$container.dir($.fn);			//列出jquery中fn对象的所有方法和属性
	});

下载源压缩包的,记得引入jQuery库哦!

附上Console面板函数列表图片一张:

不错不错,已经有 个评论!
  1. 不错,技术文章。

  2. 不看技术文章

  3. 好专业的博客啊

  4. 不太明白,但还是要谢谢分享哦》www.wyfanli.com

我要评论

  • * *