不只console.log, 还能这样用（1）

前端开发者应该都知道console.log， 其实console对象还有很多其他的用法， 下面我就介绍一下console对象的其他用法。

下文中的例子可直接复制到控制台中运行， 例子中给出的输出参考结果是在Google Chrome浏览器中运行的结果

断言 console.assert()

判断第一个参数（表达式）是否为真，false的话抛出异常并且在控制台输出后面的参数。

用法

//参数可以是字符串，对象，数字，数组等一切js类型
console.assert(表达式, [参数1, 参数2, ..., 参数N]);

例子

console.assert(1 == '1','断言成功，不会打印任何参数');
var str1 = '使用3个等号时会进行类型对比';
var str2 = '数字和字符串类型不一样会导致断言失败';
var str2 = '并把后面的这3个字符串参数打印到控制台';
console.assert(1 === '1', str1, str2, str3);

清空控制台输出 console.clear()

把控制台中之前输出过的内容清空

例子

//不用传任何参数，直接调用即可
console.clear();

输出本身被调用的次数 console.count()

console.count()方法可以输出该方法本身被调用的次数

用法

//参数 标记 为字符串，可以不传
//若不传标记，输出不带标记调用该方法的次数
//若传标记，则输出使用对应标记调用该方法的次数
console.count([标记]);

例子

console.count(); //输出：default: 1
console.count('a');//输出：a: 1
console.count(); //输出：default: 2
console.count('b');//输出：b: 1
console.count(); //输出：default: 3
console.count('b');//输出：b: 2
console.count('a');//输出：a: 2
console.count(); //输出：default: 4

重置console.count计数 console.countReset()

调用该方法可以重置console.count()方法的计数

用法

//参数 标记 为字符串，可以不传
//若不传标记，重置不带标记调用该方法的次数
//若传标记，则重置对应标记调用该方法的次数
console.countReset([标记]);

例子

console.count();//输出调用过的次数
console.countReset();
console.count();//输出 default: 1
console.count('a');//输出调用过的次数
console.countReset('a');
console.count('a');//输出 a: 1
console.count('b');//输出调用过的次数
console.countReset('b');
console.count('b');//输出 default: 1

输出消息 console.log()

往控制台输出消息

该方法大概是使用最多的方法了，一般开发者平时使用可能也就是console.log('xxxxxxxxxxxxx')。 然后控制台中会打印xxxxxxxxxxxxx，其实这个方法是支持参数的。 比如可以像C语言格式化字符串一样格式化输出，也可以给输出的内容添加CSS，让输出内容可以改变颜色，字号等。

用法

//按序输出对象
console.log(参数[, 参数2, ..., 参数N]);
console.log(消息[, 格式]);

格式

%d：输出整数

%i：和%d一样

%f：输出浮点数

%o：输出对象

%c：设置%c后面的css样式

例子

//直接打印‘何方博客’
console.log('何方博客');
var obj = {name:'何方',blog:'https://hefang.link'};
//打印对象
console.log(obj);
var arr = [1,2,3,4];
//打印多个对象
console.log("何方博客", obj, arr);
//格式化输出：格式化‘字符串’,整数：1，保留两位小数：2.2, 对象：{name: "何方", blog: "https://hefang.link"}
console.log("格式化‘%s’,整数：%d，保留两位小数：%f, 对象：%o", "字符串", 1, 2.2, obj); 

//带CSS样式
//颜色
console.log("%c红色%c蓝色%c绿色", "color:red", "color:blue", "color:green");
//字号
console.log("%c12px%c24px%c48px%c64px", "font-size:12px", "font-size:24px", "font-size:48px", "font-size:64px");
//字体样式
console.log("%c下划线%c粗体%c斜体", "text-decoration: underline;", "font-weight: bolder", "font-style: italic");
//可以同时应用多个css样式，比如64px红色粗体斜体带下划线
var css = "font-size:64px;color:red;font-weight:bolder;font-style:italic;text-decoration:underline";
console.log("%c何方博客", css);

输出调试信息 console.debug()

使用方法和console.log()一样，同样也支持格式化字符串，不过该方法输出的内容不会直接显示，， 要展开消息列表才会显示。

输出对象属性 console.dir()

在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。

比如输出dom对象的时候，使用console.log(dom)输出的是dom本身， 而使用console.dir(dom)输出的是dom对应的对象

console.dirxml()

console.dirxml()在MDN中的描述是以xml形式输出对象属性， 不过经过我测试和console.log()完全一样

更多console对象的用法请查看Javascript中你不知道的console用法(2)