console.不止有log

[liujiusheng]

从入门到发现新大陆

自学js的问题就是只会用alert()调试。

在那个前后端混合，前端还在JQuery时代的时候，用alert并不会感觉有什么不妥。

但是到了SPA型应用，尤其是有大量object类型需要查看时问题就来了。

后来发现了console.log(),一直用了两年也没有再去探索过。

后来无意间又研究了一下console，除了console.log外，还发现了许多其它好用的命令。

console是一个浏览器实现的API，不是js提供的功能，所以不同的浏览器所带的功能可能有细微差异。

几个最常用的方法：

• console.table()可以将数据以表格的形式直观的打印出来
• console.profile()可以分析性能
• console.time(name)、console.timeEnd()可记录中间这段代码的运行时间
• console.trace()可以追踪函数的调用和执行过程
• console.warn(object[, object...])可输出警告信息(黄颜色）
• console.error()输出一条错误信息，就像控制台报错那种效果（红颜色）

Chrome71下console的所有方法

编号	名称	说明
1	log	以原对象的形式打印出数据
2	error	以红色文字输出数据
3	warn	以黄色文字输出数据
4	info	与log类似，以黑白色输出数据
5	table	以表格形式输出数组对象
6	assert	接收两个参数，若第一个参数返回为false时则输出第二个参数
7	clear	清空控制台的输出
8	context	-
9	count	通常放在某个函数中，用于记录该函数被调用了多少次
10	countReset	重置某个计数器或全部计数器为0，若传入参数则重置这个计数器
11	debug	与log类似
12	dir	可以显示一个对象的所有属性和方法，在打印dom对象的时候替代log效果较好。
13	dirxml	显示xml或html的所有后代树结构
14	group	与groupCollapsed/groupEnd一起将大量输出信息进行分组
15	groupCollapsed	分组显示信息
16	groupEnd	结束分组显示信息
17	memory	是一个属性，不是方法。可以查看js引擎的内存使用情况
18	profile	与profileEnd结合进行性能分析，具体怎么用我也还没试过
19	profileEnd	结束性能分析
20	time	与timeEnd组合用于记录time到timeEnd之间所花费的时间
21	timeEnd	结束计时
22	timeLog	用于在time与timeEnd之间输出值
23	timeStamp	-
24	trace	显示当前执行的代码在堆栈中的调用路径

参考：

你真的了解 console 吗https://segmentfault.com/a/1190000000481884

MDN console文档

http://wangdoc.com/javascript/features/console.html#consolelog%EF%BC%8Cconsoleinfo%EF%BC%8Cconsoledebug