如何最大化利用Javascript console
0 条参与说在前面
本文提取此文内容,以便于使用时查询,同时参考了Web API Console。
原文测试使用FireFox,本文使用Chrome测试,版本为58.0.3029.110 (64-bit)
4种打印字符串方式
4种语义、默认视觉效果不同的字符串打印方式
- log
- info
- warn
- error

格式符
一般用于固定的某类提示输出的格式,在框架中经常可见,例如React中:

| 格式符 | 含义 | 
|---|---|
| %s | 字符串 | 
| %d, %i | 整数 | 
| %f | 浮点数 | 
| %o, %O | 对象 | 
| %c | 为输出应用CSS样式 | 
%s字符串格式符

%d, %i整数格式符

%f浮点数格式符
Chrome中不支持设置精度。

%o, %O对象格式符

%c为输出应用CSS样式

其他有用功能
注意:方法可能并未统一标准,因此在不同浏览器中有不同的使用方式。
Assert
console.assert(arg1, arg2)。当arg1为false时,打印arg2。可以用于替换if条件语句。

Dir
console.dir(object)。以列表形式,打印传入对象的属性、方法。

Table
console.table([array|object])。以表格形式,展示数组或对象的键值对。
![console.table([array])](/2017/06/26/如何最大化利用Javascript-console/console.table.png)
![console.table([object])](/2017/06/26/如何最大化利用Javascript-console/console.table_obj.png)
Group
console.group结合console.groupEnd,为console分组,树形视觉效果。

Time
console.time结合console.timeEnd,可用于测量代码执行时间。
