JS控制台日志输出，别再只会 console.log 了（一）

本文已参与「新人创作礼」活动，一起开启掘金创作之路

控制台日志输出，别再只会 console.log 了，其实Console 对象还提供了很多方法。比如console.info()、console.warn() 、console.error()等等，下面我们就来看看这些常用方法。

console.info()

console.log() 是我们再熟悉不过了，我们经常使用它在控制台输出信息进行代码调试，这里就不过多介绍了，首先我们来看看console.log()  的好兄弟，console.info();

console.info() 和 console.log() 类似，用于在控制台输出一条日志信息；

     console.info("我是console.info");
     console.log("我是console.log");

在Chrome浏览器下，控制台输出效果相同：

但在其他浏览器下，比如：IE浏览器下输出 console.info()前会有一个小图标：

console.warn()

console.warn() 方法用于在控制台输出警告信息；

当我们与他人协同开发过程中，别人调用我们的方法时，漏传或少传参数的时候可以使用console.warn() 给出警告；

	console.warn("我是一条警告信息");

console.error()

console.error() 方法用于在控制台输出错误信息；

我们可以将捕获到的错误信息通过console.error() 输出到控制台；

例如：捕捉输出因接口参数（或网络情况等）变化而导致错误的信息；

xxxx.post('请求路径'，{参数})
.then(res => {
    xxxxxx
})
.catch(error => { 
console.error(error);
})

 	console.error("我是一条错误信息");

ps: console.error()只是在控制台输出一条错误信息，并不会阻止程序的执行

console.clear()

console.clear() 方法用于清除控制台输出的信息；

当控制台输出日志信息过多时，清除控制台是必要的，以便我们快速找到需要查看的日志；

        console.clear();

console.time() 、timeLog()、timeEnd()

console.time() 、timeLog()、timeEnd() 联合使用，可以在控制台输出某段程序的运行时间；

• console.time()开始计时；
• console.timeLog()相当于console.Log()；
• console.timeEnd()结束计时；

我们可以使用这些方法用来测试某段程序的运行效率；

    console.time("ForLoop");  
    for (let i = 0; i < 3; i++) {
        console.timeLog('ForLoop'); 
    }
    console.timeEnd("ForLoop");

输出样式

Console 对象的这些方法可以使用%c指令添加样式，出现在%c后的字符串将使用参数中样式；

单次使用%c；

    console.log("%cMy message", "color: yellow; background-color: blue;padding: 2px");

多次使用%c；

    console.log("0 %c123 %c456", "color: red", "color: orange", "789");

代码示例

      console.info("我是%cconsole.info", "color: yellow; background-color: blue;padding: 2px");
      console.log("我是%cconsole.log", "color: yellow; background-color: blue;padding: 2px");
      console.warn("我是%c一条警告信息", "color: yellow; background-color: blue;padding: 2px");
      console.error("我是%c一条错误信息", "color: yellow; background-color: blue;padding: 2px");
      console.time("%cForLoop", "color: yellow; background-color: blue;padding: 2px");  
      for (let i = 0; i < 3; i++) {
          console.timeLog("%cForLoop", "color: yellow; background-color: blue;padding: 2px"); 
      }
      console.timeEnd("%cForLoop", "color: yellow; background-color: blue;padding: 2px");