专栏首页Tz一号还是只使用console.log()进行调试?好吧,其实还有更多。

还是只使用console.log()进行调试?好吧,其实还有更多。

在浏览器控制台中打印消息无疑可以拯救所有开发人员。 console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题。

那里的大多数开发人员都喜欢— 让我们在浏览器中打印消息以了解有关此问题的更多信息。我敢肯定我不是唯一一个这样做的人。?

调试就像是犯罪电影中的侦探一样,在开发中您也是福尔摩斯~

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

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

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

将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')

如何为日志消息中的特定单词涂上颜色?就看这里~

  // 通过在文字前加上 ‘%c’, 然后在后方写入css设置即可将console。log加上CSS样式


  console.log('哪有人就哪有江湖 相持相扶%c--Tz张无忌',
        'background-color:#222;font-size:24px;font-weight: 500;color:#bada55')

console.dir()

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

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

   console.log(zhangwuji)

控制台中的HTML元素

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

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

  console.log(zhangwuji)

console.table()

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

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

  console.table(bolg)

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()

console.count()

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

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

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

  for (let i = 0; i < 11; i++) {
    console.count();
  }

console.assert()

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

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

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");

如果大家有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家!

 本文为Tz张无忌原创文章,读后有收获可以右侧边栏请作者喝咖啡,转载请文章注明出处:https://www.cnblogs.com/zhaohongcheng/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 新手怎么学JS?JavaScript基础入门

    在正式的学习JavaScript之前,我们先来学习一些小工具,帮助我们更好的学习和理解后面的内容。

    Tz一号
  • 常见的面试问题总结

    ​ 执行环境是JavaScript中最为重要的一个概念。执行函数定义了变量或函数有权访问的其它数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象...

    Tz一号
  • 只会Vue怎么开发小程序?Vue和微信小程序的到底有哪些区别?

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。

    Tz一号
  • console 让 js 调试更简单

    Web开发最常用的就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之...

    grain先森
  • 10 个技巧,让你更专业地使用 console 进行 JS 调试

    首先,我必须承认这一点,我将利用这个平台从我的开发环境中清理出骨架(轮廓)。有时候,我所做的“魔法”(有些人称之为“编码”),并不像我的同事在为他们展示这些宏伟...

    IT派
  • 聊聊调试的那些事,超实用!!!

    今天给大家分享的是开发中调试的那些事,在开发中我们最害怕也是最常见的就是出现bug,然后去修改bug,那么怎么去快速定位bug的位置和原因呢?这个时候调试显得尤...

    小丑同学
  • 【译】超越console.log() —当debug时你需要使用的8个console方法

    你debug时或许没有使用过的超越console.log()的console方法!

    腾讯IVWEB团队
  • JavaScript Console的常见用法

    行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优...

    Nian糕
  • 10个用Console来Debug的高级技巧

    译者按: 我们往往会局限在自己熟悉的知识圈,但也应担偶尔拓展一下,使用一些不常见而又有用的技巧,扩大自己的舒适圈。

    Fundebug
  • 被忽略的console.log

    除了console.log之外,还有更多方式调试JavaScript来输出值。 看起来很明显我们没有。

    frontoldman

扫码关注云+社区

领取腾讯云代金券