console.不止有log

251 阅读2分钟

从入门到发现新大陆

自学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 吗segmentfault.com/a/119000000…

MDN console文档