JS中只会使用console.log( )?

e286fec94aad44969fdec9395761b08a-2-2-2-1-2

除了最常用的console.log()消息在浏览器中显示消息外,还有许多其他方法可以使调试过程变得更加容易。让我们通过示例逐一查看它们。

基本打印信息console.log()| info()| debug()| warn()| error()

47edb6dba7724df19683d43faf51659c-2-2-2-1-2

控制台日志/信息/调试/警告/错误.

将CSS添加到控制台消息

您的所有控制台消息看起来都一样吗?好吧,从现在开始,情况会有所不同,让您的日志看起来更吸引人,因为这对您而言最重要。

话不多说,上代码与示例!

// 通过在文字前加上 ‘%c’, 然后在后方写入css设置即可将console。log加上CSS样式
console.log('%c这是示例的文字-Tz','color:pink;font-size:50px;font-weight: 500')
console.log('%c这是示例的文字-Tz','color:red;font-size:20px;font-weight: 600')
console.log('%c这是示例的文字-Tz','color:blue;font-size:12px;font-weight: 700')
3cbe306c887d4ef3bda073e3dc1a7478-2-2-2-1-2

如何为日志消息中的特定单词涂上颜色?

// 通过在文字前加上 ‘%c’, 然后在后方写入css设置即可将console。log加上CSS样式
console.log('哪有人就哪有江湖 相持相扶%c--Tz张无忌',
'background-color:#222;font-size:24px;font-weight: 500;color:#bada55')
456f8336ecfe4c2bb1019f88a770e8e6-2-2-2-1-2

console.dir()

打印指定对象的JSON表示形式。

    const zhangwuji = {
      name: '张无忌',
      age: 3,
      tel: 'https://www.qmblog.cn/zhaohongcheng/'
    }

   console.log(zhangwuji)
88608f3ae4c04ab69ad9ead60a8122e6-2-2-2-1-2
15df34e2f71f4aa68052f66f4ab69281-2-2-2-1-2

控制台中的HTML元素

就像检查元素一样,在控制台中获取HTML元素。

  let zhangwuji = document.getElementsByTagName('body')[0]

  console.log(zhangwuji)
9b0ac0bd786f43e3ac20b1caff75044e-2-2-2-1-2

console.table()

是否想以正确且易于理解的方式查看JSON?

    const bolg =[
      {
      name: '张无忌',
      age: 3,
      tel: 'https://www.qmblog.cn/zhaohongcheng/'
      },
      {
        name: '令狐冲',
        age: 12,
        tel: 'https://www.qmblog.com'
      },
      {
        name: '扫地僧',
        age: 22,
        tel: 'https://www.didi.com'
      }
    ]

  console.table(bolg)

627a1b9716ca413e8513d2b434ff4d6c-2-2-2-1-2

console.group()和console.groupEnd()

很有可能用控制台将消息分组

// 利用console.group()和console.groupEnd()将console.log分成一组一组
  console.group();
        console.log('Dream')
    console.groupEnd()
    console.group();
        console.log('5')
        console.log('2')
        console.log('1')
    console.groupEnd()
    console.group();
        console.log('1')
        console.log('3')
        console.log('1')
        console.log('4')
    console.groupEnd()

554b387c653b4b9695f621add3fb231d-2-2-2-1-2

console.count()

此函数记录此特定调用count()已被调用的次数。该函数带有一个可选参数label。

如果label提供了该函数,则该函数记录该count()特定调用的次数label。

如果label省略,则函数记录在此特定行count()上被调用的次数。

  for (let i = 0; i < 11; i++) {
    console.count();
  }
372a837a3e2c40fba80e0cecdd80ed01-2-2-2-1-2

console.assert()

当您只想打印一些选定的日志时,这非常方便,例如,它将仅打印false参数。如果第一个参数为true,则完全不执行任何操作。

  const errorMsg = '不符合';
  for (let number = 2; number <= 5; number += 1) {
    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
  }
814681fe2f604c078b99c885226be480-2-2-2-1-2

console.time()

console.time()是一个专用于跟踪操作所花费时间的函数,它是跟踪JavaScript执行所花费的微时间的更好方法。

 console.time("This");
  let total = 0;
  for (let j = 0; j < 10000; j++) {
    total += j
  }
  console.log("Result", total);
  console.timeEnd("This");
b91b8f3f9b8b4de09347254df12d8e6c-2-2-2-1-2
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » JS中只会使用console.log( )?

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活