1.凡人视角
打印字符串
代码:
console.log("I am a 凡人");
事件流事件流事件流事件流事件流事件流事件流
打印提示消息
代码:
console.info("Yes, you arm a 凡人");
打印警告消息
代码:
console.warn("凡人你居然敢窥视我");
打印错误消息
代码:
console.error("天兵天将,把这个凡人给我打入地狱");
打印调试信息
console.debug("我就是传说中的debug");
2.上帝视角
查看所有方法
console 除了上面的几个方法还有什么方法呢?log 除了能打印字符串外,还能打印出对象,我们可以利用 console.log 打印自己。
代码:
console.log(console);
输出:
Object{
assert:...,
clear:...,
count:...,
debug:...,
dir:...,
dirxml:...,
error:...,
group:...,
groupCollapsed:...,
groupEnd:...,
info:...,
log:...,
markTimeline:...,
profile:...,
profileEnd:...,
table:...,
time:...,
timeEnd:...,
timeStamp:...,
timeline:...,
timelineEnd:...,
trace:...,
warn:...
}
啊咧咧?怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现,我这边使用的是 chrome浏览器 。所以说,这个特性是非标准的,请尽量不要在 生产环境 中使用它。
但是我们可以在 开发环境 中,合理的利用 这些方法来帮助我们开发。
清理控制台
如果我们在控制台调试的时候,难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数 console.clear() 。
console.clear()
当然我们也可以用 chrome 的 command line api 来清理控制台。
clear()
又或者可以使用按键Mac上 cmd + k ,Win ctrl + l(我用的是chrome浏览器)。
分组
当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现。
代码:
console.group('凡人');
console.log("手");
console.log("脚");
console.groupEnd();
console.group('神');
console.log("法力无边");
console.log("腾云架雾");
console.groupEnd();
输出:
如果想要输出为折叠,我们可以使用 console.groupCollapsed ,用法和 console.group 类似。
查看对象信息
有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。
代码:
varperson={
head:1,
hand:2,
leg:2
};
console.log(person);
呜呜,可是这个显示得好丑,我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息。
vardata=[
{
'姓名':'幼儿园',
'性别':'女'
},
{
'姓名':'李狗嗨',
'数量':1
}
];
console.table(data);
输出:
但是如果想要看详细的对象信息,我们可以使用 console.dir,将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。
console.dir(clear);
什么?你想看某个节点中的html代码?没事,我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。
html代码:
I am a 凡人
javascirpt代码:
varperson=document.getElementById('person');
console.dirxml(person);
性能测试
雷军粑粑老是喜欢说:“不服?跑个分。”有时候,我们也需要对代码跑个分。这个时候,我们可以使用console.time和console.timeEnd,他们可以记录代码运行所花费的时间。
console.time("神机妙算");
(function(){
for(vari=0;i<10;i++){
varsum=(function(){
varflog=0;
for(vari=0;i<10;i++){
flog+=i;
}
})();
}
})();
console.timeEnd("神机妙算");
啊咧咧?你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急,我们这还有一个叫做 console.profile 和 console.profileEnd 姐妹呢~~
console.profile("神机妙算");
(function(){
for(vari=0;i<10;i++){
varsum=(function(){
varflog=0;
for(vari=0;i<10;i++){
flog+=i;
}
})();
}
})();
console.profileEnd("神机妙算");
输出会显示在 profile
什么还是不够?你还想知道运行时的结果栈?可以可以,我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。
代码:
functionadd(num){
if(0
console.trace("现在num的值为",num);
returnnum+add(num-1);
}else{
return0;
}
}
vara=3;
add(3);
输出:
判断真假
平时我们在写代码是时候,经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用 console.assert 来判断,该方法会在条件为错误时,返回一个 console.error 的输出。
console.assert(1==1);
console.assert(1==0);
console.assert(!(1==0));
统计次数
有时候我们需要统计一个函数或者被调用了几次,我们通常会增加一个变量 count 来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用 console.count 函数来帮忙我们记录次数,并输出。
functionhi(name){
console.count(name);
return"hi "+name;
}
for(vari=0;i<10;i++){
if(i<4){
hi("person");
}else{
hi("god");
}
}
总结
console 中有很多对我们调试代码有帮助的函数,我们可以在开发环境中配合 console 来调试代码,使得我们测试更加便利。