console对象--详解

对于js的调试,一般我们经常用alert()或者console.log()进行调试。但是alert()会让程序中断,而console.log()则不会。虽然用的很多,但是我就只知道console.log()而已。今天专门去研究一下这个东西console

JS原生中默认是没有console对象,这是宿主对象(也就是游览器)提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。

比如:现在大部分的游览器都是带有调试功能的。而低版本的IE就没有,所以在低版本IE的window中,console对象并不存在。【所以还需要低版本支持的朋友要注意】。

打印window对象中的console:

Paste_Image.png

接下来打印一下console都有一些什么功能:

这是谷歌和火狐for(var i in console){console.log(i)}出来,对应游览器所支持的console方法:

Paste_Image.png

Paste_Image.png

console 的方法

console.log(),console.debug(),console.info()

console.log方法用于在控制台输出信息。它可以接受多个参数,逗号分隔。它会自动在每次输出的结尾,添加换行符。没有返回值回会返回undefined。【console.log大家用的很熟的】

Paste_Image.png

如果第一个参数是格式字符串(使用了格式占位符),console.log方法将依次用后面的参数替换占位符,然后再进行输出。

Paste_Image.png

占位符格式如下表:

模式类型

%s字符串

%d,%i整数

%f浮点数

%o对象超链接

%cCSS格式化样式

console.log方法和console.debug()与console.info(),几乎用法完全一样,唯一不同的就是现实时候的表现形式了。

注意一点的是:IE不支持debug()方法

Paste_Image.png

console.assert()

接收至少两个参数,第一个参数的值或返回值为false的时候,将会在控制台上抛出一个异常并将其余参数作为异常描述输出.

console.assert(false,123)//抛出错误,并且输出,返回undefinedconsole.assert(true,123)//没有错误,返回undefined

Paste_Image.png

console.count()

console.count()方法用于计数,输出它被调用了多少次。

(function() { for (vari =0; i < 5; i++) {console.count('count');}})();

Paste_Image.png

console.count()方法里面可以传入一个字符串作为参数,作为标签,对执行次数进行分类

functiongreet(user){console.count(user);return"hi "+ user;}greet('bob')greet('alice')greet('bob')

Paste_Image.png

console.clear()

console.clear()清空控制台内容。

console.dir()

console.dir()方法用来对一个对象进行检查,并以易于阅读和打印的格式显示。

varobj = {    name:'c',    age:'20',type:'1'};console.dir(obj);vararr = [1,2,3]console.dir(arr)vars ='sdfs'console.dir(s)varn ='123'console.dir(n)

Paste_Image.png

Paste_Image.png

console.error(),console.warn()

console.error(),console.warn()方法用于输出错误和警告信息,用法和常见的console.log方法一样,不同点在于输出时候的表现形式。一个是黄色的警告形式一个是红色的错误形式。而console.error()方法会标记为错误的地方。

Paste_Image.png

console.table()

console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出。

vararr= [          {num:"1"},        {num:"2"},          {num:"3"}    ];  console.table(arr);varobj= {      a:{num:"1"},      b:{num:"2"},      c:{num:"3"}  };  console.table(obj);

Paste_Image.png

Paste_Image.png

console.time(),console.timeEnd()

console.time(),console.timeEnd()方法计算一个操作的执行的时间console.time()是开始,console.timeEnd()是结束。可以传一个参数,参数为计时器的名称。

console.time('计时器1');for(vari =0; i <100; i++) {for(varj =0; j <100; j++) {}  }console.timeEnd('计时器1');console.time('计时器2');for(vari =0; i <1000; i++) {for(varj =0; j <1000; j++) {}  }console.timeEnd('计时器2');

Paste_Image.png

console.group(),console.groupCollapsed(),console.groupend()

console.group()和console.groupCollapsed()这两个方法用于将显示的信息分组,可以把信息进行折叠和展开。他们都可以传递一个参数,参数默认是分组名。

用法都是一样的。唯一区别就是console.group()是默认展开的,而console.groupCollapsed()默认是收起的。

console.group('第一层');console.group('第二层');console.log('error');console.error('error');console.warn('error');console.groupEnd();console.groupEnd();

Paste_Image.png

console.groupCollapsed('第一层');console.groupCollapsed('第二层');console.log('error');console.error('error');console.warn('error');console.groupEnd();console.groupEnd();

Paste_Image.png

console.profile(),console.profileEnd()

console.profile(),console.profileEnd()方法就比较高大上点了,用来新建一个性能测试器,可以评估某段代码的性能,可以传一个参数,为生成的性能测试器的名字。

functionprofile(){for(vari =0; i <10000; i++) {        i++;    }}console.profile('性能分析');    profile();console.profileEnd();

Paste_Image.png

profile在哪里呢。打开控制台。Profile就是了。也可手动添加

Paste_Image.png

console.trace()

console.trace()方法用来追踪函数的调用过程。在复杂的架构中可以查找到对应的调用路径。

functiond(a){console.trace();returna;}functionb(a){returnc(a);}functionc(a){returnd(a); }vara = b('123');

Paste_Image.png

PS:很多互联网公司都会在页面中写类似的推广呀,招聘呀。。。

Paste_Image.png

试着在你的网站写写类似的语句,说不定哪天,那个程序媛审查一下元素,就和你去拯救世界了呢。O(∩_∩)O~

varcons= console;if(cons) {cons.log('想和我共同保护世界,维护世界的和平吗?\n');cons.log("请在邮件中注明:%c来自:浩3108的简书","color:red;font-weight:bold;");}

暂时告一段。

推荐阅读更多精彩内容

  • 对于js的调试,一般我们经常用alert()或者console.log()进行调试。但是alert()会让程序中断...
    浩3108阅读 8,344评论 15 51
  • console对象在前端调试中必不可少,但是大多数人都只会用console对象的log()方法。但console对...
    zoomsk阅读 283评论 0 1
  • 个人学习批处理的初衷来源于实际工作;在某个迭代版本有个BS(安卓手游模拟器)大需求,从而在测试过程中就重复涉及到...
    Luckykailiu阅读 1,713评论 0 6
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 4,135评论 2 16
  • 问答题 函数声明和函数表达式有什么区别 (*)答://函数声明function hello(){ conso...
    饥人谷_桶饭阅读 24评论 0 0