不要再用简单的concole.log()打印输出了！

最新推荐文章于 2024-09-05 17:49:01 发布

samlyx

最新推荐文章于 2024-09-05 17:49:01 发布

阅读量481

点赞数 4

分类专栏：前端类文章标签： javascript chrome

本文链接：https://blog.csdn.net/m0_73593563/article/details/136182092

版权

10 篇文章 0 订阅

订阅专栏

问题回溯

大多数情况下，我们在项目过程中会使用console.log()来控制台打印调试，这种方式固然简单，但如果需要打印调试的数据过多，你的控制台看起来将会乱糟糟的一片。对此，我们有了更好的一种选择，可以调用console对象封装的API，对控制台信息进行有效的合理化管理。

当我们需要区分一些异常错误类和较为重要的打印信息时，可以使用warn进行进行重要提醒，error进行错误提示。
在这里插入图片描述

当我们想要得知一段代码的运行时间，可以使用time配合timeEnd。这对于需要一些时间的CPU密集型应用程序非常有用，例如神经网络或 HTML Canvas读取。

console.time("Loop timer")
for(let i = 0; i < 10000; i++){
    // your code
}
console.timeEnd("Loop timer")

在这里插入图片描述

当我们想要知道一些函数的调用顺序，可以使用该API进行回溯检查。

function Mytrace(){
    console.trace()
  }
  function MyFunction(){
      Mytrace();
  }
  MyFunction()

MyFunction 调用Mytrace，然后又调用console.trace。

因此，当您调用 MyFunction 时，您将得到类似的输出
在这里插入图片描述

当我们需要将打印信息进行分组管理时

console.group("Message group");

console.log("Test1!");
console.log("Test1!");
console.log("Test1!");

console.groupEnd()

在这里插入图片描述

我们可以将需要打印的信息以表格的形式展示。
这是往常我们使用的log打印，可见这样的数据看起来还算清晰，但当数据多起来了，就会显得比较混乱。
在这里插入图片描述
那如果我们使用表格转述。

在这里插入图片描述

这样控制台看起来如此干净情绪！！！

当然我们的控制台打印同样也可以使用自定义样式，只需要借助%c这个占位符即可，这个占位符是用于指定样式输出或者将CSS样式指定外挂到输出文本之中。
但是这个占位符只在特定的一些浏览器才可以兼容（Chrome、Firefox等等）

<script>
        console.log("%c Hello, World!",
            "color: red; font-weight: bold;border: 2px solid yellow;");
</script>

在这里插入图片描述

作为一名前端开发人员，在调试中使用最多的就是console命令，通过console命令可以在控制台打印一些信息，这些信息便于我们进行开发调试。这在调试和日志记录过程中非常有用，特别是当需要突出显示特定类型的信息或错误时。

关注

专栏目录