你所不知道的 Console

你所不知道的 Console

2016年10月21日
/ 267次浏览

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

来进行简单的输出。 代码：

var person = {
head: 1,
hand: 2,
leg: 2
};
console.log(person);

呜呜，可是这个显示得好丑，我们这个时候就可以使用传说中的神器

console.table

来帮助我们清楚的显示

关联数组信息

。

var data = [
{
'姓名': '幼儿园',
'性别': '女'
},
{
'姓名': '李狗嗨',
'数量': 1
}
];
console.table(data);

输出：


但是如果想要看详细的对象信息，我们可以使用

console.dir

，将一个

JavaScript

对象的所有属性和属性值显示成一个可交互的列表，它还能打印出函数等。

console.dir(clear);

什么？你想看某个节点中的html代码？没事，我们可以用

console.dirxml

来查看页面中对应元素的

html/xml

内容。 html代码：

<div id='person'>
<p>I am a 凡人</p>
</div>

javascirpt代码：

var person = document.getElementById('person');
console.dirxml(person)；

性能测试

雷军粑粑老是喜欢说：“不服？跑个分。”有时候，我们也需要对代码跑个分。这个时候，我们可以使用

console.time

和

console.timeEnd

，他们可以记录代码运行所花费的时间。

console.time("神机妙算");
(function () {
for(var i = 0; i < 10; i++) {
var sum = (function () {
var flog = 0;
for(var i = 0; i < 10; i++) {
flog+=i;
}
})();
}
})();
console.timeEnd("神机妙算");

啊咧咧？你这个顶多就是

计时器

怎么能说是

性能测试

。客官别急，我们这还有一个叫做

console.profile

和

console.profileEnd

姐妹呢~~

console.profile("神机妙算");
(function () {
for(var i = 0; i < 10; i++) {
var sum = (function () {
var flog = 0;
for(var i = 0; i < 10; i++) {
flog+=i;
}
})();
}
})();
console.profileEnd("神机妙算");

输出会显示在

profile

什么还是不够？你还想知道运行时的结果栈？可以可以，我们这还有一位

console.trace

哦。他可以看透大爷你的一局一动哦。 代码：

function add(num) {
if (0 < num) {
console.trace("现在num的值为", num);
return num + add(num - 1);
} else {
return 0;
}
}

var a =3;
add(3);

输出：

判断真假

平时我们在写代码是时候，经常需要判断一下当前值的真假情况，使用if或者三元表达式来达到目的。我们现在也可以使用

console.assert

来判断，该方法会在条件为错误时，返回一个

console.error

的输出。

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

统计次数

有时候我们需要统计一个函数或者被调用了几次，我们通常会增加一个变量

count

来记录，然后在控制台中查看。这样相当的麻烦，我们可以使用

console.count

函数来帮忙我们记录次数，并输出。

function hi(name) {
console.count(name);
return "hi " + name;
}

for(var i = 0; i < 10; i++) {
if(i < 4) {
hi("person");
} else {
hi("god");
}
}

总结

console

中有很多对我们调试代码有帮助的函数，我们可以在开发环境中配合

console

来调试代码，使得我们测试更加便利。

分享

文章最后编辑时间为: 2016/10/21 23:10 本文由
淮城一只猫 创作，采用
知识共享署名 4.0国际许可协议进行许可 可自由转载、引用，但需署名作者且注明文章出处