浏览器控制台console常用命令小结

chrome调试工具的Console对象相信很多人使用过，熟练的Web开发人员会经常使用 console.log() 在其代码中打印消息和调试问题，实际上还有很多很有用的功能和技巧，善用之可以极大提高Web开发，网站调优的效率！ 这里我们总结一下常用的console常用命令，供大家参考。

1.信息输出  

Console.log，不仅可以向控制台输出信息，而且能接受多个参数并支持按照指定格式输出内容。

var animal = "cat", count = 30;
// The mount of cat are 30
console.log("The mount of %s are %d", animal,count);
or
// The mount of cat are 30
console.info("The mount of %s are %d", animal,count);

也可混合字符替代和字符链接使用。

var name = "Terry", thing1 = "book", thing2 = "pen";
// I am Terry and I have book and pen
console.log("I am %s and I have",name,thing1,"and",thing2);
or  
// I am Terry and I have book and pen
console.info("I am %s and I have %s",name,thing1,"and",thing2);

关于占位符：JS中常用占位符使用方法详解_ |%s|%d|%f|%o|%O|%c| - 优快云博客 

如果输出内容为对象，在控制台中也查看对象的属性和方法等信息。目前输出内容支持以下几种格式：  

格式	说明
%s	字符串
%d, %i	整数(不支持指定位数)
%f	浮点数(不支持指定位数)
%O	Object对象
%o	Dom元素
%c	Css样式

注意：%o 和 %O的区别：

console.log("%o, %O",document.body, document.body); 

%o、%O都是用来输出Object对象的，对普通的Object对象，两者没区别，但是打印dom节点时就不一样了：前者log 出body节点内的html，后者log 出body对象的属性，方法。

使用%o输出和不使用格式化输出打印出来的结果一样，你可以查看这个dom节点的内容、子节点等；而使用%O，你看到的则是该dom节点各个对象属性。 

另：根据信息的不同性质，console对象还有另外4种显示信息的方法，分别是一般信息console.info()、调试信息console.debug()、警告提示console.warn()、错误提示console.error()，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。  

console.log ()、 console.info ()、 console.debug ()的作用都是在浏览器控制台打印信息的。

使用最多的是 console.log ()，console.info ()和 console.debug ()本质上与 console.log ()没有区别。是 console.log()方法的别名而已，用法完全一样，可以理解为它们三个其实就是同一个，只不过名字不一样。

注&