idea log 不输出error_关于console不能只知道一个console.log();

console.log() 可能是是前端调试中最常用的一种调试方法了

但是除了log(),方法之外,console还有很多其他强大有用的功能

assert();

console.assert(f, msg);// assert,断言,接收两个参数, f是一个断言表达式,返回boolean类型,当且仅当f返回false,才会输出第二个参数, 否则第二个参数不会被输出。常用调试数据是否与预期一致。

b62bd774b2dc1382e01ab79649e97cec.png

clear();

console.clear();// 用于清除控制台输出,但是这个基本没用

count();

console.count();//用于记录被调用的次数

7da51dbc30d6fa1784f4d7972da1b58f.png

error();

console.error();// 这个没的说,主要是用于输出错误,一方面更醒目,另一方面会显示错误堆栈

5ff8012485d5dab2f7521d27e7cfeda1.png

group(); groupEnd();

console.group();// 顾名思义,用于将输出的信息分组;与console.groupEnd();成对使用console.group('outer');  console.group('inner');    console.log('inner infos');  console.groupEnd();console.groupEnd();

0bfa8493590f1688763ed3836056fca3.png

groupCollapsed();

console.groupCollapsed();//从方法名上可以看出该方法的含义是:分组折叠console.groupCollapsed('outer');  console.groupCollapsed('inner');    console.log('inner infos');  console.groupEnd();console.groupEnd();

38379176b4e5ceb2ffd8491ffb8e2534.png

info();

console.info(); // 等同于console.log();

table();

console.table();// 输出复合型数据,展示样式类似md风格tableconst data = [  {name: 'tom', age: 18},   {name: 'jerry', age: 18},  {name: 'li lei', age: 18},  {name: 'han meimei', age: 18}]console.table(data)

1a526df071fdf4a4defa0a8298171c7e.png

time(); timeEnd();

console.time(); // 与console.timeEnd();成对出现,中间为要执行的代码,输出中间代码块的执行时间console.time();const list = [];for (let i in 1000) {  list.push(i)};console.timeEnd();

d3b27ac6249cd56e99e6b317218a2f7a.png

trace();

console.trace(); // 查看函数调用栈function a(param) {  return b(param)}function b(param) {  return c(param)}function c(param) {  console.trace();  return param;}a(123)

2b4029954dc1c4b364b9109b1e68a356.png

warn();

console.warn(); // 顾名思义,输出警告信息 如:console.warn('这是个警告信息')

除了上边的方法,console对象还支持printf占位符

占位符用途
%s(string) 指代字符串
%d / %i整数
%f浮点数
%o可展开的DOM
%O列出DOM属性
%c应用css样式输出console

这里简单给大家做个有意思的示例(%c)

dc245c844ca2336a6d01da86def0a651.png

当然,console还有一些其他的方法,这里就不一一介绍了,有兴趣可以专门了解一下。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值