前言

  •  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,不会输出任何信息。

  • 效果:

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。