Console 调试各种姿势指南

版权声明: https://blog.csdn.net/qq_39207948/article/details/85261675

推荐一个特别赞的微信公众号,3-6分钟的零碎时间可以积累前端知识点

1、console.log 的更多用法

参数支持类似 C 语言的字符串替换模式。

  • %s 字符串
  • %d 整数
  • %f 浮点值
  • %o Object
  • %c 设定输出的样式,第二个参数里的值对%c后面的参数进行设置之后在控制台显示出来。

示例如下:

2、清空 console 面板输出内容

要清空已经打印输出的内容,有两种方式,一种是 JavaScript 语句: console.clear()

另一个是快捷键 Ctrl + L

或者点击控制面板中的清空按钮

 3、不同样式的输出

除了常规的 log 之外,还有一些其他已设定好的样式,区别在于图标或者颜色不一样:

 4、打印DOM节点

  • .log 输出这个 DOM 的 HTML 标签。

  • .dir 则会输出这个 DOM 元素的属性列表。

 5、断言调试(console.assert();)

console.asset(arg1,arg2)方法接受一个表达式作为参数,如果参数返回值是false,则会输出第二个参数中的内容。

6、打印表格 (console.table(); )

console.table()方法,可以将数组、对象以表格的形式打印输出,如果只输出其中的某一列,可以加上第二个参数,如下所示:

7、分组打印(console.group() + console.groupEnd());
group()方法中传入的值将作为该分组的名称;

group()/groupCollapsed() 与 groupEnd() 之间的内容会自动分组,区别在于是否能自动折叠。

groupCollapsed():显示的分组默认是折叠状态

8、 console.count() 计数

通过console.count()可以对输出的对象进行计数。但需要注意的是这里的计数对象仅限于由 count() 输出的内容,并非所有 console 中的输出。

console.count() 在调用时会将数字(调用次数)写入到控制台。

console.count() 方法可以添加标签。如果标签一样,则对应的奇数数字会增加 1,如果不一样则重新开始计数。

示例:

9、打印时间(console.time() + console.timeEnd())

用 time("name") 和 timeEnd("name") 分别控制开始点和结束点,它们两的参数表示当前计时的名称,可以自定义但需要保持相同。所以如果想看异步获取数据花了多场时间,可以这样写:

如果 timeEnd 中的名称如果和上面不一样,得到的数据是系统当前时间换算后的毫秒值。​​​​​​​

猜你喜欢

转载自blog.csdn.net/qq_39207948/article/details/85261675
今日推荐