干货：你真的会用console命令吗？
2016-09-21 本文已影响110人
柯琦
image.jpg
前言
个人而言，在前端开发中调试用的最多命令就是console了；哪里有问题了，我都会console.log下；相比debug调试来说，我还是喜欢这个！console.log()这个命令只要是前端coder都会知道，不过console命令只要这几个吗?你真的会用console.log()吗！
干货
下面就具体安利下console命令具体的命令：
1.console.log()
console.log('hello');
console.log('hello word!')
这个很常用，日志查看，这个不多说了
2 .占位符
console.log("%d+%d=%d",1,2,1+2)
console.log("%s+%s=%d",'a','b','a+b')
结果：
图片1.png
这个很好理解，就想c语言入门的时候，print打印一样。%d占位符表示number类型，%s占位符表示字符串类型；前端这里也这两种占位符用的多
3.分组-console.group()
console.group('第一组');
console.log('姓名：张飞');
console.log('性别：女');
console.groupEnd();
console.group('第二组');
console.log('姓名：Joy');
console.log('性别：男');
console.groupEnd();
结果：
图片2.png
4.查看对象信息-console.dir(obj)
var obj={
name:'Marry',
sex:'man',
age:24,
fun:function(){
console.log(123);
}
console.dir(obj);
结果：
图片3.png
和console.log(obj)打印对象一样
5.性能分析-console.profile()
function doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
doSubTaskB(10000);
doSubTaskC(1000,10000);
}
function doSubTaskA(count){
for(var i=0;i<count;i++){}
}
function doSubTaskB(count){
for(var i=0;i<count;i++){}
}
function doSubTaskC(countX,countY){
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
}
console.profile('性能分析开始');
doTask();
console.profileEnd();
结果：
图片4.png
这里说明的是，有些文章查看方式是在console下显示的，而这里是在图片红箭头出查看，我看了下应该是浏览器做出的调整，这里放得是chrome浏览器查看方式，其余浏览器读者可自行查看下profile栏目
6.计时功能-console.time()
console.time("控制台计时器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");
结果：
图片5.png
7.其他
除这些外还有其他的命令，输入下面代码可以查看，读者自己可以尝试尝试！
for(var i in console){
console.log(i)
}
图片6.png
