最常见的控制台方法:

  1. console.log()– 打印内容的通用方法。
  2. console.info()– 打印资讯类说明信息。
  3. console.debug()– 在控制台打印一条 "debug" 级别的消息。
  4. console.warn()– 打印一个警告信息。
  5. console.error()– 打印一条错误信息。
  1. console.log("log")
  2. console.info("info")
  3. console.debug("debug")
  4. console.warn("warn")
  5. console.error("error")

image.png

console.log()写css

  1. console.log("%c helo word", "color: red")
  2. console.log('Default background color set to %cred', `color: red; font-size: 50px`)

image.png

console.log() 使用参数

e6a5d89f49dda704ce8ecb0ea79830d9.jpg

console.clear();

用于清除控制台信息。
image.png

console.count(label);

输出count()被调用的次数,可以使用一个参数label。演示如下:

  1. var user = "";
  2. function greet() {
  3. console.count(user);
  4. return "hi " + user;
  5. }
  6. user = "bob";
  7. greet();
  8. user = "alice";
  9. greet();
  10. greet();
  11. console.count("alice");
  12. // 输出
  13. bob: 1
  14. VM372:4 alice: 1
  15. VM372:4 alice: 2
  16. VM372:13 alice: 3
  17. undefined

console.dir()

  1. 使用console.dir()可以打印对象的属性,在控制台中逐级查看对象的详细信息。

console.memory

console.memory是一个属性,而不是方法,使用memory属性用来检查内存信息。
image.png

console.time() 和 console.timeEnd()

  • console.time()– 使用输入参数的名称启动计时器。在给定页面上最多可以同时运行 10,000 个计时器。
  • console.timeEnd()– 停止指定的计时器并记录自启动以来经过的时间(以毫秒为单位)。

image.png

console.assert()

如果断言为假,将错误信息写入控制台,如果为真,无显示。
image.png

console.trace();

console.trace()方法将堆栈跟踪输出到控制台。
image.png

console.table();

在console中还可以打印表格
image.png

打印Html元素

image.png

console.group() 和 console.groupEnd()

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