Console命令详解,让调试js代码变得更简单

最新推荐文章于 2022-04-20 17:43:11 发布

csdn265

最新推荐文章于 2022-04-20 17:43:11 发布

阅读量917

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

From: http://blog.csdn.net/cy88310/article/details/6908826

今天在看jq的代码时看到这样一个代码

console.warn( "nothing selected, can't validate, returning nothing" );

单独运行，居然在控制台打印出了nothing selected, can't validate, returning nothing，

豁然开朗，既然可以这样在控制台打印出消息，那以后就省得麻烦去用什么alert或是按F10去逐行调试了，肯定可以节省不少时间。

特意使用for(var i in console)查看了下各种浏览器控制台对console的支持，如下

IE控制台
log info warn error  assert dir clear profile profileEnd

Firebug控制台
log info warn error  debug exception assert dir dirxml trace group groupEnd groupCollapsed time timeEnd profile profileEnd count clear table notifyFirebug firebug

Chrom控制台
profiles memory debug error info log warn  dir dirxml trace assert count markTimeline profile profileEnd time timeEnd group groupCollapsed groupEnd

Opera控制台

time timeEnd trace profile profileEnd debug log info warn error assert dir dirxml group groupCollapsed groupEnd count table

可以看出，四种浏览器对log、info、warn、error四个基本方法都是支持的，除了IE，其他三种还支持个debug，所以使用debug要注意，当然咯，平时打印调试什么的，用log就行。还有个问题，IE6/7没有开发人员工具，也就没有控制台，而FF本身也是不带控制台的，需要加载Firebug插件并且启动它，才能console，否则就是js报错了。

所以为了使用起来无这种后顾之忧，还是建议自己封装一个打印类，如logger，在其中检测当然环境对console的支持，然后调用console的打印方法，不支持就用alert或其他方法咯，并且可以设置一个开关，标识是否需要打印以及打印级别，类似log4j，哈哈，这样使用起来就方便了。马上来写，写好了再分享下。

--------------------------------------------------------------------------------------割--------------------------------------------------------------------------------------------

From: http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html

Firebug是网页开发的利器，能够极大地提升工作效率。

但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。

===================================

Firebug控制台详解

作者：阮一峰
出处：http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

一、显示信息的命令

Firebug内置一个console对象，提供5种方法，用来显示信息。

最简单的方法是console.log()，可以用来取代alert()或document.write()。比如，在网页脚本中使用console.log("Hello World")，加载时控制台就会自动显示如下内容。

另外，根据信息的不同性质，console对象还有4种显示信息的方法，分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

比如，在网页脚本中插入下面四行：

　　console.info("这是info");

　　console.debug("这是debug");

　　console.warn("这是warn");

　　console.error("这是error");

加载时，控制台会显示如下内容。

可以看到，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。

二、占位符

console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

比如，

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圆周率是%f",3.1415926);

%o占位符，可以用来查看一个对象内部情况。比如，有这样一个对象：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黄色";

然后，对它使用o%占位符。

　　console.log("%o",dog);

三、分组显示

如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。

　　console.group("第一组信息");

　　　　console.log("第一组第一条");

　　　　console.log("第一组第二条");

　　console.groupEnd();

　　console.group("第二组信息");

　　　　console.log("第二组第一条");

　　　　console.log("第二组第二条");

　　console.groupEnd();

点击组标题，该组信息会折叠或展开。

四、console.dir()

console.dir()可以显示一个对象所有的属性和方法。

比如，现在为第二节的dog对象，添加一个bark()方法。

　　dog.bark = function(){alert("汪汪汪");};

然后，显示该对象的内容，

　　console.dir(dog);

五、console.dirxml()

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

比如，先获取一个表格节点，

　　var table = document.getElementById("table1");

然后，显示该节点包含的代码。

　　console.dirxml(table);

六、console.assert()

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

比如，下面两个判断的结果都为否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

七、console.trace()

console.trace()用来追踪函数的调用轨迹。

比如，有一个加法器函数。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道这个函数是如何被调用的，在其中加入console.trace()方法就可以了。

　　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);}

运行后，会显示add()的调用轨迹，从上到下依次为add()、add1()、add2()、add3()。

八、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

　　console.time("计时器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("计时器一");

九、性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}