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 对象超链接
%c CSS格式化样式

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

Paste_Image.png
console.assert()

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

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

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

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

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

function greet(user) { 
  console.count(user); 
  return "hi " + user;
}
greet('bob')
greet('alice')
greet('bob')
Paste_Image.png
console.clear()

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

console.dir()

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

var obj = {
    name: 'c',
    age: '20',
    type: '1'
  };
  console.dir(obj);

  var arr = [1,2,3]
  console.dir(arr)

  var s = 'sdfs'
  console.dir(s)

  var n = '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()方法可以将传入的对象或数组这些复合数据以表格形式输出。

  var arr= [ 
         { num: "1"},
         { num: "2"}, 
         { num: "3" }
    ];
  console.table(arr);

  var obj= {
       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 (var i = 0; i < 100; i++) {
        for (var j = 0; j < 100; j++) {}
   }
console.timeEnd('计时器1');
console.time('计时器2');
    for (var i = 0; i < 1000; i++) {
        for (var j = 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()方法就比较高大上点了,用来新建一个性能测试器,可以评估某段代码的性能,可以传一个参数,为生成的性能测试器的名字。

function profile() { 
    for (var i = 0; i < 10000; i++) { 
        i++;
    }
}
console.profile('性能分析');
    profile();
console.profileEnd();
Paste_Image.png

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

Paste_Image.png

console.trace()

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

function d(a) { 
    console.trace();
    return a;
}
function b(a) { 
    return c(a);
}
function c(a) { 
    return d(a);
 }
var a = b('123');
Paste_Image.png

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

Paste_Image.png

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

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

暂时告一段。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,924评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,902评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,716评论 0 239
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,783评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,166评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,510评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,784评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,476评论 0 196
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,196评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,459评论 2 243
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,978评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,321评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,964评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,046评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,803评论 0 193
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,530评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,420评论 2 265

推荐阅读更多精彩内容

  • 对于js的调试,一般我们经常用alert()或者console.log()进行调试。但是alert()会让程序中断...
    猪猪侠闯天下阅读 756评论 0 0
  • console对象在前端调试中必不可少,但是大多数人都只会用console对象的log()方法。但console对...
    zoomsk阅读 1,486评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,097评论 18 139
  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 2,249评论 0 0
  • 明代大儒戴良诞辰700周年祭 柳哲 今岁农历五月十三(公历6月7日)恰逢明代大儒戴良诞辰700周年纪念日。戴良乃元...
    柳志儒阅读 629评论 0 3