浏览器上有趣的Console命令都了解吗？

文章目录

• 序
• • 上手操作
• 常用console命令
• • 打印信息命令
  • count打印调用的次数
  • time代码性能检测
  • clear控制台清理
  • group输出信息分组
  • table将数据以表格的形式显示
  • trace输出一个堆栈跟踪
• console输出一些有趣的
• • 学习资料

序

作为用过JavaScript的各位来说，一定都知道使用console.log输出信息吧 （不知道也没关系 ）

不过对于console，各位都了解全了吗？

---

上手操作

按下F12键，就会出现浏览器上控制台了，如下图
这里我使用的是Chrome浏览器，不同浏览器控制台可能会有所不同

接下来让我们使用一下console.log打印一下信息，看看效果

111被直接打印了出来，arr因为未定义，所以报错了

---

常用console命令

console的命令有很多，并不局限于我们常用的log日志命令

MDN参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Console

console的命令很多，本次也只会挑几个有意思的来说一下

打印信息命令

接下来先说说console.log的几个兄弟 info() 、debug()、warn()、error()

命令

功能

info

console.logの别名，输出信息，不过在一些浏览器中会有前面会有感叹号小标识，如下chrome无区别，火狐有区别
测试命令： console.log('console log') console.info('console info')