console对象的方法log、info、warn、error的区别及几个实用的方法

console对象的方法log()、info()、warn()、error()区别及几个实用的方法

先说一下console，JavaScript 原生中默认是没有 Console 对象，这是某些浏览器提供的内置对象。
在不同的浏览器里显示可能不同

下面的运行截图中，图中的灰色是运行的这句，灰色下面是此句运行的结果

---

log()、info()、warn()、error()区别

1、 log()和info()

• 这两个没区别，看别人有说info()前有个蓝色的图标，不过我使用的这个版本谷歌浏览器运行时没有
  
  因为没有运行出来，下面这张图是在网上偷的，地址：https://zhuanlan.zhihu.com/p/23080626。
  下面会有堆栈内依次调用运行的方法名及其他等信息，有的浏览器是没有的
  

2、warn()和error()

• warn()输出的log前有个黄色的图标
• error()输出的log前有个红色的图标
• 这两个展开下面，会有堆栈内依次调用运行的方法名及其他等信息，除了颜色信息都是一样的
  

---

log的其他用法，一般人我不告诉他

参数	含义	备注
%s	占位符	替任何字符占位，不管你是数字还是什么字符串，不包括对象哟，会显示为object
%d	占位符	整数
%i	占位符	整数
%f	占位符	浮点数
%o	占位符	对象 ，与下面的还是有区别的
%O	占位符	对象
%c	css样式	%c后的内容都给你样式咯，前面的内容还是保持原样，超链接比较特殊，不会屈服于样式，看栗子就完事（还可以输出图片哟）

//只看上面你是蒙的，用法举栗子：
console.log("%s","昂");
console.log("%s", 1);
console.log("%s", 1.1);
	
console.log("%d", 2);
console.log("%d", 2.1);
console.log("%i", 2);

console.log("%f", 3.1);

console.log("%o",{a:"昂"});
console.log("%O",{a:"昂"});


console.log("%c 做了个聚合工具，请在微信中搜索“维尼聚合计算”，www.baidu.com","color:#ff0000");

//如果%c放在‘请在微信’前，那前面的样式就会保持原样，还是默认的黑色，这是新补充的，暂不改图了
console.log("做了个聚合工具，%c 请在微信中%c搜索“维尼聚合计算”，www.baidu.com","color:#ff0000","color:#0000ff");

运行如下：

---

几个实用的方法

1、trace()

• 调试JavaScript程序时，使用console.trace()，不仅会打印函数调用栈信息，同时也会显示函数调用中各参数的值。

2、count()

• 可以把console.count()放在一个方法内，每次调用都会加1，更好显示方法被调用了多少次。

3、time()和timeEnd()

• 以ms为单位的时间，这两个要同时用，可以不写参数，输出的是，default：** ms
• 如果加了参数，参数要一致console.time(“count”);否则会报错，输出的是，count：** ms
  

4、assert()

• 一般两个参数，前面的是表达式，后面是要输出的内容，如果表达式为false，则输出
  

5、clear()

• 清空console的输出信息。

6、dir()

• 使输出内容格式化更易读，而且也会输出一个对象的全部属性和方法。

7、table()

• 数组格式

//var table = [
//     {"name": "小猪佩奇", "sex": "F"},
//     {"name": "小狗丹尼", "sex": "M"},
//     {"name": "小猫坎迪", "sex": "F"},
//     {"name": "小羊苏西", "sex": "F"},
//];
//这个键不一定是字符串类型的
var table = [
      {name: "小猪佩奇", sex: "F"},
      {name: "小狗丹尼", sex: "M"},
      {name: "小猫坎迪", sex: "F"},
      {name: "小羊苏西", sex: "F"}
];
console.table(table);

下面的图输出的是没有引号的，我只是表现上加了console.table("table");

• 对象格式

var table = {
     "一": {"name": "小猪佩奇", "sex": "F"},
     "二": {"name": "小狗丹尼", "sex": "M"},
     "三": {"name": "小猫坎迪", "sex": "F"},
     "四": {"name": "小羊苏西", "sex": "F"}
};
console.table(table);

---

其他还有几个，用的不多，不，因为我不用，所以我就不写，任性。

---

兄弟们，我自己做的微信小程序工具 —维尼聚合工具（ 查地铁、线路规划、二维码生成、计算器、指南针、证件识别等等），需要的可以用

---