前端开发调试:浏览器console方法总结

今天突发奇想,准备总结下console的各个函数。以前都是只用一个console.log(),查了一下发现有好多,就记下来,方便以后查阅。

前端开发调试:浏览器console方法总结

速记console

Console对象提供浏览器控制台的接入,不同浏览器是不一样的,这里介绍普遍存在的

Console.assert()

判断第一个参数是否为真,false的话抛出异常并且在控制台输出相应信息

前端开发调试:浏览器console方法总结

Console.clear()

清空控制台

Console.count()

以参数为标记记录调用的次数,调用时在控制台打印标识以及调用次数

前端开发调试:浏览器console方法总结

可以带一个参数

前端开发调试:浏览器console方法总结

Console.countReset()

重置指定标签的计数器,若没有参数,就重置defaul

这里是接着上面的

前端开发调试:浏览器console方法总结

Console.debug()

控制台打印“debug”级别的日志消息 注:chrome58之后,只有打开了Verbose才看得到

前端开发调试:浏览器console方法总结

Console.dir()

在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示。

前端开发调试:浏览器console方法总结

Console.dirxml()

显示一个明确的XML/HTML元素的包括所有后代元素的交互树.如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代

前端开发调试:浏览器console方法总结

打印信息

  1. console.log() 向控制台输出一条信息
  2. console.info() 向web控制台输出一个通知信息
  3. console.error() 向控制台输出一条错误信息
  4. console.warn() 向控制台输出一条警告信息
前端开发调试:浏览器console方法总结

这4种用法都是一样的打印多个对象 console.log({first:"Bob"},{last:"Tony"})

前端开发调试:浏览器console方法总结

使用字符串替换(有点像c语言一样)

%o 或 %O 打印js对象 %d 或 %i 打印整数 %s 打印字符串 %f 打印浮点数 Chrome不支持精确格式化

前端开发调试:浏览器console方法总结

%c 定义打印样式 这里的样式应该是按照,css来写的

前端开发调试:浏览器console方法总结

打印树状结构

  • Console.group()
  • 打印树状结构,配合groupCollapsed以及groupEnd方法;
  • Console.groupCollapsed()
  • 同Console.group(),但是默认是折叠的
  • Console.groupEnd()
  • 结束当前Tree
前端开发调试:浏览器console方法总结

Console.table()

将数据以表格形式显示,数组,对象,类数组对象都可以打印; console.table(data[,columns]);

前端开发调试:浏览器console方法总结

前端开发调试:浏览器console方法总结

定时器

console.time("name"),带参就是定时器的名字,开始计时,不带参就是默认的defaul console.timeEnd("name"),结束“name”计时器

前端开发调试:浏览器console方法总结

注:该方法在使用时不会将输出的时间返回到js,它只能用于控制台调试.请勿将该方法作为普通计时器或性能数据收集器的一部分.

Console.trace()

向控制台输出堆栈跟踪

前端开发调试:浏览器console方法总结


分享到:


相關文章: