前言

•  Console 对象提供了访问浏览器调试模式的信息到控制台，Console.log 也是日常开发中控制台调试最常用的命令，这些年你是否还是一句log走天下？
• 其实 Console 对象提供了数十个API，学会了它们，不仅你的调试技术将突飞猛进，装杯水平也将得到进一步提升。

一、console.log( )

  console.log("扒皮猴");

• 作用： 控制台输出一条普通信息

• 效果：
  

二、console.info( )

  console.info("扒皮猴");

• 作用： 控制台输出一条普通信息（Chrome浏览器中与log相同，其他浏览器在信息前会出现感叹号！）

• 效果：
  

三、console.debug( )

  console.debug("扒皮猴");

• 作用： 控制台输出一条调试信息

• 注意： 浏览器默认会隐藏调试信息，需要手动开启，开启后效果与log相同。console.debug 属于Verbose类型信息，级别很低。

• 效果：
  

四、console.warn( )

  console.warn("扒皮猴");

• 作用： 输出警告信息，信息最前面加一个黄色三角，表示警告（常用于底层框架或插件中，在浏览器为开发者抛出警告信息）

• 效果：
  

五、console.error( )

  console.error("扒皮猴");

• 作用： 输出错误信息，信息最前面加一个红色，表示错误（常用于底层框架或插件中，在浏览器为开发者抛出错误信息）

• 效果：
  

六、console.clear( )

  console.log("扒皮猴");
  console.clear();

• 作用： 清除控制台上的信息（该方法在执行成功后，会在控制台输出: "Console was cleared"）

• 效果：
  

七、console.table( )

    const obj = [
        {
            name: "扒皮猴",
            address: "https://www.bapihou.com",
        },
        {
            name: "www.bapihou.com",
            address: "https://www.bapihou.com",
        },
  ];
  console.table(obj);

• 作用： 以表格形式显示数据（数组对象使用该方法打印更利于观察，表格列还支持排序）

• 效果：
  

八、console.group( )、console.groupEnd( )

  // 分组一
    console.group("分组一");
    console.log("扒皮猴");
     console.log("https://www.bapihou.com");
    console.groupEnd("分组一");
  // 分组二
    console.group("分组二");
    console.log("扒皮猴");
    console.log("优雅的资源分享社区");
    console.groupEnd("分组二");

• 作用： 在控制台创建一个信息分组。（默认展开）

• 注意： 一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束

• 效果：
  

九、console.groupCollapsed( )、console.groupEnd( )

    // 分组一
    console.groupCollapsed("分组一");
    console.log("扒皮猴");
    console.log("https://www.bapihou.com");
    console.groupEnd("分组一");
    // 分组二
    console.groupCollapsed("分组二");
    console.log("扒皮猴");
    console.log("优雅的资源分享社区");
    console.groupEnd("分组二");

• 作用： 在控制台创建一个信息分组。（默认折叠）

• 注意： 一个完整的信息分组以 console.groupCollapsed() 开始，console.groupEnd() 结束

• 效果：
  

十、console.dir( )

console.dir(document.body);

• 作用： 打印对象结构。（该方法对于输入 DOM 对象非常有用，会显示DOM对象所有属性）

• 效果：
  

十一、console.time( )、console.timeEnd( )

  console.time("操作时间是：");
  // 例如：为for循环计时
  for (let i = 0; i < 10; i++) {

  }
  console.timeEnd("操作时间是：");

• 作用： 计时器，time( ) 与 timeEnd( ) 联合使用，用于算出一个操作所花费的准确时间。

• 效果：
  

十二、console.count( )

  // 例如：观察for循环执行次数
  for (let i = 0; i < 3; i++) {
    console.count("计数是");
  }

• 作用： 计数器，记录 count( ) 调用次数，一般用于观察函数执行次数。

• 效果：
  

十三、console.trace( )

  function a() {
    // a函数调用此方法
    console.trace();
  }
  // b调用a函数
  function b() {
    a();
  }
  // 全局调用b函数
  b();

• 作用： 显示当前执行的代码在堆栈中的调用路径。（会展示此方法被调用的顺序）

• 效果：
  

十四、console.assert( )

  console.assert(1 == 2);

• 作用： 如果断言为 false，则在信息到控制台输出错误信息；如果断言为 true，不会输出任何信息。

• 效果：