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