关于chrome控制台那些事

作为一名前端，除了编写完美代码之外（个人还不具备），当然也要会调试啦，对于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