作为一名前端，除了编写完美代码之外（个人还不具备），当然也要会调试啦，对于firebug比较而言，我还是更喜欢chrome控制台比较多（可能使用较多，更顺手的原因吧）。所以来总结下，关于chrome控制台的一些方法（真的好强大！），若有错误的地方，请指出哈~
输出信息到控制台
对于输出信息到控制台，大部分人最常使用的就是console.log了，下面列出了与console.log类似的输出方法：
- console.log(); 普通输出
- console.info(); 提示类输出
- console.error(); 错误输出
- console.warn(); 警示输出
使用不同的输出方式，可以方便我们对于输出信息进行分类，或者让它们更语义化。
eg:
对于控制台输出的信息，看着只有红黑两种颜色一种字体，是不是觉得很枯燥，尤其还是在调bug的时候，但在Chrome提供了这么一个API：第一个参数可以包含一些格式化的指令比如%c之后，console.log也可以玩出花样，带来色彩啦~
console.log
话不多说，先上代码
- 代码：
console.log(" %chello world","font:20px/24px '微软雅黑';color:pink;");
运行效果：
不仅仅只能有这种效果哦，更nice的效果等着你，只要按照css的写法，就有更多你喜欢的样式啦。
- 代码：
console.log( ' %chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
运行效果：
将其中第一个参数作为你想要输出的文字，第二个参数使用css来编写样式。
注意：想要自己定义样式，需要在第一个参数你想要输出文字前 添加%c的一个转义指令，%c代表输出带样式的文字。还有很多转义指令，大家可以自行查阅官网的API里的表格。
不仅可以输出文字，同样可以输出图片~
- 代码：(自己写的图片一直没有加载，在考虑是不是浏览器版本的问题，以下是参考别人的来的）
console.log(" %c","padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");
运行效果：
同时，console.log（）接受不定参数，中间用 "," 隔开，最终会以空白格输出隔开显示。
- 代码：
console.log(" %c hi","font:bold 20px/25px '微软雅黑';color:blue;","world!");
运行效果：
还有更多的等着你来发现哦。
console.table
以表格形式输出信息，可观性真的不要太好，很方便；
- 代码：
var data = [ { 'name' : 'Red Joy', 'age' : 'secret' } , { 'name': 'TuanTuan' , 'age': 'unkown'}];
console.table(data);
运行效果：
使用console.table来显示结果对比效果不要太好。
console.assert
当你想要在不满足给出条件时进行输出显示，就可以使用console.assert来免去那些繁琐的 if 语句，它会对于你传入的表达式进行判断，当结果为false的时候，进行输出到控制台。
- 代码：
var Debuger = false;
console.assert(Debuger,"当给出表达时返回结果为false时才输出");
运行效果：
温馨提示：按住 Shift + Enter 键就可以在控制台进行多行编码啦。
console.count
使用count方法就可以直接对于某段代码使用的次数进行统计。
用例子说话最好：
- 代码：
function hi(){
console.count("hi 函数使用的次数");
}
hi();
hi();
hi();
hi();
运行效果：
console.dir
使用console.dif 来对于DOM节点以 JavaScript对象的形式输出到控制台。
与console.log显示不同，log 是通过DOM树的方式来进行显示的，所以大家按照各自要使用的情况来进行使用是最好的选择。
- 代码：
console.dir(document.body);
console.log(document.body);
运行效果：
可以亲自试一试，比较一下差距。
chrome控制台的功能真的是强大到不行，没事打个小例子就可以直接通过它。棒棒哒！
参考地址：http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html