[FE] console对象

1. 实例方法

Console规范中,console总共有17个方法,
以下是console对象的IDL

[Exposed=(Window,Worker,Worklet)]
namespace console { // but see namespace object requirements below
    // Logging
    void assert(optional boolean condition = false, any... data);
    void clear();
    void count(optional DOMString label = "default");
    void debug(any... data);
    void error(any... data);
    void info(any... data);
    void log(any... data);
    void table(any tabularData, optional sequence<DOMString> properties);
    void trace(any... data);
    void warn(any... data);
    void dir(any item, optional object? options);
    void dirxml(any... data);

    // Grouping
    void group(any... data);
    void groupCollapsed(any... data);
    void groupEnd();

    // Timing
    void time(optional DOMString label = "default");
    void timeEnd(optional DOMString label = "default");
};

在Chrome 59.0.3071.115 中,console总共有17+7个方法,

assert clear count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline memory profile profileEnd table time timeEnd timeStamp timeline timelineEnd trace warn

在Safari 10.1.1 (12603.2.4) 中,有17+4个,

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

在Firefox 55.0.1 中,有17+4个,

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

2. Logging

2.1 assert

功能:
如果断言失败,就在控制台上打印消息,否则就略过。

语法:

console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting

参数解释:
(1)assertion,是任意的布尔值表达式,如果是一个假值,就在控制台上显示消息。
(2)obj1 ... objN,控制台上可以输出一系列对象。
(3)msg,一个模板字符串,其中可以包含一些表示格式的字符。
(4)subst1 ... substN,一些用于替换msg中格式字符的对象。

注:
(1)console.assert可用于Web Workers中。
(2)console.assert在node中的实现与浏览器不同,
在浏览器中,调用console.assert(false)会在控制台上打印一条出错消息,但是不会影响后续代码执行
在node中,调用console.assert(false)会抛出AssertionError异常
(3)msg是一个模板字符串,其中可以包含如下格式字符,
%s,它的替换者将被转换为字符串,调用ToString(element)
%d%i,它的替换者将被转换为整数,调用parseInt(element, 10)
%f,它的替换者将被转换为浮点数,调用parseFloat(element)
%c,它的替换者将被添加样式,例如,

console.log('%c error %c message ',
'color:#fff;background:red;',
'color:white;background:#ccc;')

此外,还有%o表示optimally useful formatting
%O表示generic JavaScript object formatting
可参考Common object formats

2.2 clear

功能:
清空控制台。

语法:

console.clear();

2.3 count

功能:
打印调用次数。

语法:

console.count([label]);

参数解释:
label,是一个可选的字符串,
如果没有提供,就打印当前行的调用次数,否则就打印指定label的调用次数。

2.4 debug

console.log

2.5 error

功能:
在控制台上打印一条错误消息。

语法:

console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);

参数解释:
console.assert

注:
console.error可用于Web Workers中。

2.6 info

功能:
在控制台上打印一条information消息。

语法:

console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);

参数解释:
console.assert

注:
(1)console.info可用于Web Workers中。

2.7 log

功能:
在控制台上打印一条日志。

语法:

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

参数解释:
console.assert

注:
console.log可用于Web Workers中。

2.8 table

功能:

语法:

console.table(data [, columns]);

参数解释:
(1)data,必须是一个数组或者对象
(2)columns,可选,一个数组,用于表示列名。

注:
(1)console.table可用于Web Workers中。
(2)如果data是一个数组,则第一列的内容是索引,第二列的内容是相应的值,
如果data是一个对象,则第一列的内容是属性名,第二列的内容是相应的属性值。
(3)data还可以是一个复合对象,即,二维数组,对象数组,值为数组的对象,值为对象的对象,
此时,table会变成多列(>2),
对于二维数组,对象数组,第一列的内容为索引,
后面各列的名字为索引(二维数组)或属性名(对象数组),其内容为相应的值。
对于值为数组的对象,值为对象的对象,第一列的内容为属性名,
后面各列的名字为索引(值为数组的对象)或属性名(值为对象的对象),其内容为相应的值。

2.9 trace

功能:
在控制台上打印调用栈。

语法:

console.trace();

2.10 warn

功能:
在控制台上打印一条警告。

语法:

console.warn(obj1 [, obj2, ..., objN]);
console.warn(msg [, subst1, ..., substN]);

参数解释:
console.assert

注:
console.warn可用于Web Workers中。

2.11 dir

功能:
在控制台上以交互式的方式,打印指定对象的属性。

语法:

console.dir(object);

参数解释:
object,一个js对象。

注:
console.dir可用于Web Workers中。

2.11 dirxml

功能:
在控制台上以交互式的方式,打印指定xml/html元素的树型结构。

语法:

console.dirxml(object);

参数解释:
object,一个js对象。

3. Grouping

3.1 group

功能:
在控制台上增加一个缩进层次,打印一条消息,
后续所有消息,都在这个新缩进层次中输出。

语法:

console.group([label]);

参数解释:
label,可选,缩进层的名字。

注:
console.group可用于Web Workers中。

3.2 groupCollapsed

功能:
console.group
不同的是,缩进层默认折叠,用户需要手动展开。

语法:

console.groupCollapsed([label]);

参数解释:
label,缩进层的名字。

注:
console.groupCollapsed可用于Web Workers中。

3.3 groupEnd

功能:
退出当前的缩进层次,回到上一层。

语法:

console.groupEnd();

注:
console.groupEnd可用于Web Workers中。

4. Timing

4.1 time

功能:
启动一个计时器,可以用来跟踪某个任务。
每个计时器可以给定一个名字,每个页面可以至少包含10000个计时器,
使用指定的计时器名调用console.timeEnd,会在控制台输出该计时器中记录的时间,单位是毫秒。

语法:

console.time(label);

参数解释:
label,计时器的名字,用于唯一标识该计时器。

注:
console.time可用于Web Workers中。

4.2 timeEnd

功能:
停止指定的计时器,并在控制台上输出该计时器中记录的时间,单位是毫秒。

语法:

console.timeEnd(label);

参数解释:
label,指定计时器的名字。

注:
console.timeEnd可用于Web Workers中。


参考

MDN - Console
Console - Living Standard

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

推荐阅读更多精彩内容

  • https://nodejs.org/api/documentation.html 工具模块 Assert 测试 ...
    KeKeMars阅读 6,313评论 0 6
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,602评论 18 399
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139
  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 2,316评论 0 0
  • 第一部分 准入训练 第1章 进入忍者世界 js开发人员通常使用js库来实现通用和可重用的功能。这些库需要简单易用,...
    如201608阅读 1,345评论 1 2