Firebug:Javascript测试利器,Console面板函数详解
从开始做前端时,一直在用火狐浏览器,之前也有文章介绍了一些火狐插件。今天重点来说说Firebug插件中的Console面板的功能,它可以辅助地完成Javascript性能测试和代码执行记录。
Console面板中自身含有多个可供使用的函数,诸如:console.log(),console.time()等一些常用的方法,我的想法是将这些函数写入在jQuery插件中,这样在项目的前端开发和测试阶段使用起来非常地方便。
代码执行后的效果需要打开Console面板后才可以看到,若出现错误提示,不要惊慌,那是因为使用console.error()方法抛出错误所致,页面的代码并没有出错!
下面的代码是将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面板函数列表图片一张:
不错,技术文章。
不看技术文章
好专业的博客啊
不太明白,但还是要谢谢分享哦》www.wyfanli.com