如今Chrome浏览器无疑是最受前端青睐的工具,chrome的开发者工具为开发者提供了大量的便捷功能,方便我们调试代码。除了最基本的Elements功能模块调试页面的最终渲染情况,另一个最重要的就是console控制台模块调试,让bug无处遁形!


1.console基本输出


一般最常用的都是console.log在控制台打印些东西,以便随时查看节点输出参数或对象,但是console支持的打印信息不止这一种:

console.log("打印字符串");//在控制台打印自定义字符串
console.error("我是个错误");//在控制台打印自定义错误信息
console.info("我是个信息");//在控制台打印自定义信息
console.warn("我是个警告");//在控制台打印自定义警告信息
console.debug("我是个调试");//在控制台打印自定义调试信息
cosole.clear();//清空控制台

控制台输出效果:

他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更语义化。当合理使用上述log方法后,可以很方便地在控制台选择查看特定类型的信息。


2.格式化输出


console还支持自定义样式和类似C语言的printf格式形式:

console.log("%s年",2016);//%s表示字符串
console.log("%d年%d月",2016,11);//%d表示整数
console.log("%f",3.1415926);//%f小数
console.log("%o",object);//%o表示对象

console.log("%c自定义样式","font-size:30px;color:#00f");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

控制台输出效果:

看着上面密集的代码不用惊慌,上面自定义样式里面console.log()第二个参数全是纯CSS用来控制样式的,你不会陌生。而第一个参数里可以带用百分号开头的转义指令,如上面输出带样式的文字时使用的%c指令。


3.对象输出


console.dir(obj):用于打印输出展示对象的自有属性和方法。

var o = {
 name:"Lily",
 age: 18
};
console.dir(o);
console.log(o);

控制台输出效果:


对于多个对象的集合,可采用console.table()输出表格形式的对象:

var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);

控制台输出效果:


4.成组输出

< 点击此处返回文章列表页