js日志输出还是只会console.log么，那你就out了

谁借莪１个温暖的怀抱￠ 2022-11-21 04:16 150阅读 0赞

![图片描述][f6f029def6512737ddfd3ae4687db45c.png]

几乎所有的javascript开发者最常使用的日志打印调试api都是`console.log()`,其实还有很多的选项供我们选择，笔者下面就为大家一一介绍.

## 一、console.table() ##

`console.table()`是我非常建议大家去使用的方法，它可以接受JSON或数组并以表格格式打印，在对json对象和数组进行可视化打印的时候简单易用，结果直观。

比如下面的json数据对象使用`console.table()`打印

console.table({
        "id":"1",
        "key":"value",
        "count":2
        });

控制台的输出结果如下：

![图片描述][e04d3a71b494edc0d83da2c87063f573.png]

又比如对下面代码中的数组进行打印：

console.table([
        {
            id: "1",
            key: "value",
            count: 2,
            },
         {
             id: "2",
             key: "value2",
                 count: 22,
           },
           {
                id: "3",
                key: "value3",
                    count: 5,
                   },
         ]);

控制台的输出结果如下：

![图片描述][47c17d69df78b5587e482bddf6b9ed66.png]

## 二、console.error() ##

`console.error()`相对于`console.log()`更有助于在调试时从输出日志中区分错误信息

![图片描述][58566b8b4b97b018c711d69670c62eb2.png]

从上图中可以看到，它的输出打印结果是红色的。

## 三、Time(time,timeLog,timeEnd) ##

console.time()、console.timeLog()、console.timeEnd() 这三个方法当我们对程序运行时间进行计时的时候特别有用。

参考下图理解这三个方法

![图片描述][356da00f54d7f28b08159eeef003a954.png]

*  console.time()相当于秒表中的开始按钮
 *  console.timeLog()相当于秒表中的按圈计时/按点计时
 *  console.timeEnd()相当于计时结束

console.time("ForLoop");  
     // "ForLoop" is label here
    for (let i = 0; i < 5; i++) {
        console.timeLog('ForLoop'); 
    }
    console.timeEnd("ForLoop");

控制台打印输出结果

![图片描述][1678af5e468284cdc3e048d5885db965.png]

## 四、`console.warn()` ##

用黄色字体输出日志，更直观的方便的查看警告类日志信息。

![图片描述][f4821f5fec597a5cd2e021d5c13f6eee.png]

## 五、console.assert() ##

`console.assert(assert_statement,message)`用来设定断言，如果为**false**则显示message消息

if(3!=2){
        console.error({ msg1: "msg1", msg2: "msg2" });
    }
    //上面的日志判断语句，可以简写为下面的断言
    console.assert(3 === 2, { msg1: "msg1", msg2: "msg2" });

![图片描述][c30a981e45d67c78d21fe63f4261bb41.png]

**另一种可以用来格式化输出的断言方式**`console.assert(assert_statement,message,args)`

console.assert(false, "%d nd type for  %s ",2,"console.assert() method");

![图片描述][ae4e3f863fe28cb7dc5223151462950d.png]

## 六、console.count() ##

`console.count()`特别适合用来计数，可以传递参数，可以根据根据参数标签统计次数。代码如下：

for (let i = 0; i < 3; i++) {
       console.count("label");
       console.count();
       console.count(i);
     }

控制台打印输出的结果，类似于下面这样

console.count()  console.count("label")   console.count(i)
     default: 1                label: 1                0: 1
     default: 2                label: 2                1: 1
     default: 3                label: 3                2: 1

*  `console.count()`如果不传递参数，则使用默认的default标签。
 *  `console.countReset(标签参数)`可以将指定标签的计数重置为**0**

# #

[f6f029def6512737ddfd3ae4687db45c.png]: /images/20221120/71728699b7b341ecad4bac092ca91f87.png
[e04d3a71b494edc0d83da2c87063f573.png]: /images/20221120/f81cbf6c3ac24bbcbfe67979ee3de545.png
[47c17d69df78b5587e482bddf6b9ed66.png]: /images/20221120/2d3bc999f4574dc195024067f77af1be.png
[58566b8b4b97b018c711d69670c62eb2.png]: /images/20221120/0e1f2f90dc054fd4a0ff942365c79764.png
[356da00f54d7f28b08159eeef003a954.png]: /images/20221120/8ece6856ab3f43d3b66b51a95a3d4af4.png
[1678af5e468284cdc3e048d5885db965.png]: /images/20221120/acf08a952da4495cae5d784c5218bcbc.png
[f4821f5fec597a5cd2e021d5c13f6eee.png]: /images/20221120/8fc5735bea7b45b5bd87d2bf52bc626b.png
[c30a981e45d67c78d21fe63f4261bb41.png]: /images/20221120/7559a63299854ac4ae45dcfcbe375cd1.png
[ae4e3f863fe28cb7dc5223151462950d.png]: /images/20221120/148865bfeef948ce9c15fc5a73040af7.png