关于console,你了解多少？？

.凡人视角

打印字符串

代码：

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);

输出：

1. Object {

2. assert: ...,

3. clear: ...,

4. count: ...,

5. debug: ...,

6. dir: ...,

7. dirxml: ...,

8. error: ...,

9. group: ...,

10. groupCollapsed: ...,

11. groupEnd: ...,

12. info: ...,

13. log: ...,

14. markTimeline: ...,

15. profile: ...,

16. profileEnd: ...,

17. table: ...,

18. time: ...,

19. timeEnd: ...,

20. timeStamp: ...,

21. timeline: ...,

22. timelineEnd: ...,

23. trace: ...,

24. warn: ...

25. }

啊咧咧？怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现，我这边使用的是 chrome浏览器 。所以说，这个特性是非标准的，请尽量不要在 生产环境 中使用它。

但是我们可以在 开发环境 中，合理的利用 这些方法来帮助我们开发。

清理控制台

如果我们在控制台调试的时候，难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数console.clear() 。

console.clear()

当然我们也可以用 chrome 的 command line api 来清理控制台。

clear()

又或者可以使用按键Mac上 cmd + k ，Win ctrl + l（我用的是chrome浏览器）。

分组

当代码非常长，或者我们需要把一个函数，或者一个文件中的函数等区分出来。我们可以使用分组来实现。

代码：

1. console.group('凡人');

2. console.log("手");

3. console.log("脚");

4. console.groupEnd();

5.  

6. console.group('神');

7. console.log("法力无边");

8. console.log("腾云架雾");

9. console.groupEnd();

输出：

如果想要输出为折叠，我们可以使用 console.groupCollapsed ，用法和 console.group 类似。

查看对象信息

有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。

代码：

1. var person = {

2. head: 1,

3. hand: 2,

4. leg: 2

5. };

6. console.log(person);

呜呜，可是这个显示得好丑，我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息。

1. var data = [

2. {

3. '姓名': '幼儿园',

4. '性别': '女'

5. },

6. {

7. '姓名': '李狗嗨',

8. '数量': 1

9. }

10. ];

11. console.table(data);

输出：

但是如果想要看详细的对象信息，我们可以使用 console.dir，将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表，它还能打印出函数等。

console.dir(clear);

什么？你想看某个节点中的html代码？没事，我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。

html代码：

1. <div id='person'>

2. <p>I am a 凡人</p>

3. </div>

javascirpt代码：

1. var person = document.getElementById('person');

2. console.dirxml(person)；

性能测试

雷军粑粑老是喜欢说：“不服？跑个分。”有时候，我们也需要对代码跑个分。这个时候，我们可以使用console.time和console.timeEnd，他们可以记录代码运行所花费的时间。

1. console.time("神机妙算");

2. (function () {

3. for(var i = 0; i < 10; i++) {

4. var sum = (function () {

5. var flog = 0;

6. for(var i = 0; i < 10; i++) {

7. flog+=i;

8. }

9. })();

10. }

11. })();

12. console.timeEnd("神机妙算");

啊咧咧？你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急，我们这还有一个叫做 console.profile 和console.profileEnd 姐妹呢~~

1. console.profile("神机妙算");

2. (function () {

3. for(var i = 0; i < 10; i++) {

4. var sum = (function () {

5. var flog = 0;

6. for(var i = 0; i < 10; i++) {

7. flog+=i;

8. }

9. })();

10. }

11. })();

12. console.profileEnd("神机妙算");

输出会显示在 profile

什么还是不够？你还想知道运行时的结果栈？可以可以，我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。
代码：

1. function add(num) {

2. if (0 < num) {

3. console.trace("现在num的值为", num);

4. return num + add(num - 1);

5. } else {

6. return 0;

7. }

8. }

9.  

10. var a =3;

11. add(3);

输出：

判断真假

平时我们在写代码是时候，经常需要判断一下当前值的真假情况，使用if或者三元表达式来达到目的。我们现在也可以使用console.assert 来判断，该方法会在条件为错误时，返回一个 console.error 的输出。

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

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

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

统计次数

有时候我们需要统计一个函数或者被调用了几次，我们通常会增加一个变量 count 来记录，然后在控制台中查看。这样相当的麻烦，我们可以使用 console.count 函数来帮忙我们记录次数，并输出。

1. function hi(name) {

2. console.count(name);

3. return "hi " + name;

4. }

5.  

6. for(var i = 0; i < 10; i++) {

7. if(i < 4) {

8. hi("person");

9. } else {

10. hi("god");

11. }

12. }

总结

console 中有很多对我们调试代码有帮助的函数，我们可以在开发环境中配合 console 来调试代码，使得我们测试更加便利。