console 对象提供了浏览器控制台调试的接口

表格

table

输出的数据将以表格的形式显示

普通

console.table(['apples', 'oranges', 'bananas'])

截屏2022-11-09下午3.53.58.png

对象

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName
}

var me = new Person('John', 'Smith')

console.table(me)

截屏2022-11-09下午3.57.08.png

二元数组

// 二元数组的打印

var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

截屏2022-11-09下午4.00.52.png

对象数组

function Person(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
}

var john = new Person('John', 'Smith')
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

截屏2022-11-09下午4.01.28.png

// 打印属性名是对象的对象

var family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);

截屏2022-11-09下午4.05.05.png

隐藏列

// 一个对象数组，只打印 firstName

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);

截屏2022-11-09下午4.06.06.png

计数器

count

输出count()被调用的次数

var user = ''

function greet () {
    console.count()
    return "hi " + user
}

user = 'a'
greet()

user = 'b'
greet()
greet()

console.count()

截屏2022-11-09下午2.36.37.png

参数

var user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");

截屏2022-11-09下午2.39.24.png

countReset

重置计数器

var user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
console.count();

截屏2022-11-09下午2.46.16.png

计时器

time

开始计时

console.time()

结束计时

console.timeEnd()

截屏2022-11-09下午4.12.24.png

assert

一个布尔表达式，如果assertion为假，消息将会被输出到控制台职中。

const errorMsg = '不是偶数'

for (let number = 2; number <= 5; number += 1) {
    console.log('数字 ' + number)
    console.assert(number % 2 === 0, { number, errorMsg })
}

截屏2022-11-08下午6.33.02.png

clear

清空控制台

console.clear()

截屏2022-11-09下午2.28.04.png

log debug info warn error

log debug info 三者一样：打印信息

warn 黄色 error 红色

const playerOne = 120;
const playerTwo = 130;
const playerThree = 140;
const playerFour = 150;
const playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

截屏2022-11-09下午3.48.20.png

前端浏览器控制台调试 console 的 常用实例方法

表格