1、console.assert()

在浏览器中当console.assert()方法接受一个值为假断言时,会向控制台输出传入的内容,但并不会中断代码的执行

const errorMsg = 'the # is not even';
for (let number = 2; number <= 5; number += 1) {
    console.log('the # is' + number);
    console.assert(number % 2 === 0, {
        number: number,
        errorMsg: errorMsg
    });
}

2、console.clear()

清空控制台输出信息

3、console.count()

输出 console.count()被调用的次数

  var user = "";
  function greet() {
    // 全局执行次数 默认名为default
    console.count()
    // 全局获取名为 bob/alice 的执行次数
    console.count(user);
    return "hi " + user;
  }
  user = "bob";
  greet(); // bob: 1
  user = "alice";
  greet(); // alice:1
  greet(); // alice:2
  console.count("bob"); // bob:2

注:该特性是非标准的,请尽量不要在生产环境中使用它!

4、console.countReset()

重置计数器

5、console.profile()

性能分析器

  function All() {
    // alert(11);
    for (var i = 0; i < 10; i++) {
      funcA(1000);
    }
    funcB(10000);
  }
  function funcA(count) {
    for (var i = 0; i < count; i++) { }
  }

  function funcB(count) {
    for (var i = 0; i < count; i++) { }
  }

  console.profile('性能分析器');
  All();
  console.profileEnd();

6、console.dir()

在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示

该特性是非标准的,请尽量不要在生产环境中使用它!

  console.dir(Object);
ƒ Object()
  arguments: (…)
  assign: ƒ assign()
  caller: (…)
  create: ƒ create()
  defineProperties: ƒ defineProperties()
  defineProperty: ƒ defineProperty()
  entries: ƒ entries()
  freeze: ƒ freeze()
  fromEntries: ƒ fromEntries()
  getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()
  getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()
  getOwnPropertyNames: ƒ getOwnPropertyNames()
  getOwnPropertySymbols: ƒ getOwnPropertySymbols()
  getPrototypeOf: ƒ getPrototypeOf()
  hasOwn: ƒ hasOwn()
  is: ƒ is()
  isExtensible: ƒ isExtensible()
  isFrozen: ƒ isFrozen()
  isSealed: ƒ isSealed()
  keys: ƒ keys()
  length: 1
  name: "Object"
  preventExtensions: ƒ preventExtensions()
  prototype: { constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, … }
  seal: ƒ seal()
  setPrototypeOf: ƒ setPrototypeOf()
  values: ƒ values()
  [[Prototype]]: ƒ()
  [[Scopes]]: Scopes[0]

7、console.dirxml()

显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代

console.dirxml(document);

该特性是非标准的,请尽量不要在生产环境中使用它!

8、console.log()

向 web控制台 输出一条消息

9、console.error()

向 web控制台 输出一条错误信息

10、console.info()

向 web控制台 输出一个通知信息。仅在Firefox,web控制台的日志中的项目旁边会显示一个小的‘I‘图标

11、console.warn()

向 web 输出一个警告信息

12、console.group()

在 web控制台 上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组结束

  console.group("第一组");
  console.log("第一组第一个");
  console.log("第一组第二个");
  console.groupEnd();

在这里插入图片描述

13、console.groupCollapsed()

console.group的用法一致,唯一不同的地方是:console.groupCollapsed()是被折叠的,console.group是打开的

  console.groupCollapsed("第一组");
  console.log("第一组第一个");
  console.log("第一组第二个");
  console.groupEnd();

在这里插入图片描述

14、console.time()

计算一段特定操作的周期

  console.time();
  $.get({
      url: "http://39.104.61.32:3000/top/album",
      data: {
          offset: 2,
          limit: 20,
          area: "ZH"
      },
      success: function(res) {
          console.log(res);
          console.timeEnd();
      }
  })

15、console.trace()

显示当前执行的代码在堆栈中的调用路径。

  function foo() {
    function bar() {
      console.trace();
    }
    bar();
  }
  foo()

16、console.table()

将数据以表格的形式显示

打印单一参数类型(数组)

  console.table(["apples", "oranges", "bananas"]);
  console.table([["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]);
  console.table([["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]], ['0']);

打印单一参数类型(对象)

  var site1 = { name : "Runoob", site : "www.runoob.com" }
  var site2 = { name : "Google", site : "www.google.com" }
  var site3 = { name : "Taobao", site : "www.taobao.com" }
  console.table(site1);
  console.table([site1, site2, site3]);
  console.table([site1, site2, site3], ["site"]);

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。