You may not know console

Break points and console.log are some of the most frequently used in our front-end debugging. But the console API does more than just check to see if a value or a variable exists.

An overview of the

The console object provides access to the browser console. It works differently on different browsers. Second, it’s a global object, so let’s print the Console out on the console and see what’s in it, and then we’ll talk about it.

Method

log

Console. log simply outputs a message to the Web console. Arguments can be variables, numbers, strings, etc.

Var name = 'Jack' console.log('Hello') // Hello console.log('Hello, ') // Jack console.log('Hello, ') ${name}`) // Hello, JackCopy the code

In addition, formatted output is supported.

var name = 'Jack' console.log('Hi, %s. what are you doing', name) // Hi, Jack. what are you doing console.log('%c I am some great text', 'font-size: 50px; ') // Pretend 50px: Hi, Jack. what are you doingCopy the code

The following are the parameters it supports. If you are learning C, you will feel familiar with it

Even big companies like Zhihu and Baidu use console to advertise jobs or do interesting things

Bilibili home page

zhihu

info, warn, error

Info console. Info ('Hi, This is message') // Warning console.warn('On, Your operation may cause a security breach! ') // Error console. Error ('Shit! Variable does not exist! ')Copy the code

table

Console. table accepts only an array or object and can accept an extra parameter to describe the number of columns in the table. It prints the data in tabular form so that we can look at the data visually:

var array = [
  { name: 'Jack', age: 12 },
  { name: 'Tome', age: 18 },
  { name: 'baka', age: 15 }
]
console.table(array)Copy the code

group

var boys = [
  { name: 'Jack', age: 12 },
  { name: 'Tome', age: 18 },
  { name: 'baka', age: 15 }
]
boys.forEach(item => {
  console.group(`${item.name}`)
  console.log(`This is ${item.name}`);
  console.log(`${item.name} is ${item.age} years old`);
  console.log(`${item.name} is ${item.age * 7} years old`);
  console.groupEnd(`${item.name}`)
})Copy the code

dir

Console. dir — Displays the properties of the specified JavaScript object in the console through an interactive list of file treelike properties

We know that console.log can actually and can output DOM nodes, but if we want to know DOM properties, we can use dir here.

var head = document.getElementById('head')
console.log(head)
console.dir(head)Copy the code

It is worth noting that MDN reminds us that this feature is non-standard and should not be used in production mode.

count

console.count('Steve')
console.count('Steve')
console.count('zeo')
console.count('Steve')
console.count('zeo')
console.count('Steve')
console.count('zeo')
console.count('Steve')Copy the code

clear

Clear, clear, clear When you see someone else’s messy debug log or INFO, you just want to keep your debug information. Console.clear () will “clear” all the information on the previous console with one click and start again (fog)

// something info
console.clear()Copy the code

time

console.time('fetching data')
fetch('https://api.github.com/users/anran758')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data')
    console.log(data)
  })Copy the code

assert

Console.assert () is interesting. Its first argument takes an assertion (declaration) and its second argument is a message. If the assertion is false, an error message is written to the console. If the assertion is true, assume it did not happen. The syntax is as follows:

console.assert(assertion, message [, subst1, ..., substN]);Copy the code

The assertion here does not have to be false to trigger an error. I went out of my way to test it, and the rules that trigger it are the opposite of the logic in the if judgment. An error is enabled whenever the assertion is 0, NaN, undefined, false, null, empty string ”.

// Assertion failed: Here is the "name" can not be empty var str = ''; console.assert(str, 'Here is the "str" can not be empty') // Assertion failed: 0 is not allowed! var num = 0 console.assert(0, '0 is not allowed! ') // Assertion failed: That is wrong! console.assert(1 === 2, 'That is wrong! ') // Nothing happens console.assert(1 === 1, 'That is wrong! ')Copy the code

conclusion