JavaScript Console

A console is an object that operates a browser console (such as Chrome or Firefox), but the details of the console vary slightly by browser, but the general function is similar.

Many programmers like to use console.log() to debug JavaScript code, but don’t know that there are many more powerful methods of console, and today let’s learn about them.

  • console.log()Used for general information output
  • console.info() Used for information output
  • console.warn() Output Warning message
  • console.error() Output error message

Using methods other than console.log() to output information is much clearer and easier to find

Let’s look at the Console object

As you can see, there are many methods for console objects, but I’ll pick out some of the most common ones

console.clear()

Console.clear () clears all information for the console.

console.dir()

Console.dir () is similar to console.log() in that using console.dir() prints the object in a reduced form, does not expand the object, and prints the DOM object’s properties and methods when printing DOM elements, and does not support multi-parameter printing.

const arr = [1.2.3.4.5];
console.log(arr);
console.dir(arr);
console.log(document.head);
console.dir(document.head);

// Multi-parameter printing is not supported. The second parameter will not be printed
console.dir('hi', { name: 'Aufu Koos' }); 
Copy the code

console.table()

Console.table () outputs objects or data in a nice table format that makes it more intuitive.

const person = { name: 'Aufu Koos'.age: 22.likes: ['Play games'.'Listen to music']}console.table(person)
Copy the code

The console. Time (), the console timeLog () and the console. TimeEnd ()

Use console.time() to start the timer

Use console.timelog () to print the time from the start of the timer to the current log

Use console.timeend () to print the time when the timer starts until it ends

console.time()
setTimeout(console.timeLog, 1000)
setTimeout(console.timeLog, 2000)
setTimeout(console.timeEnd, 4000)
Copy the code

The console. Group () and the console. GroupEnd ()

Console. group Is used to group console information. The console information can be grouped into infinite groups.

console.log('Program running successfully')
console.group()
console.log('Go to home page')
console.log('Buy goods')
console.groupEnd()
console.group()
console.log('Go to home page')
console.log('Browse merchandise')
console.groupEnd()
Copy the code

Add CSS styles to console.log

In addition to console.log, console.info, console.warn, and console.error also support CSS styles. This is often used to add Easter eggs to the console.

Note: add %c before, otherwise CSS will not work

console.log(
        '% C I am Oufu Koos, welcome to follow '.'color:red; font-family:system-ui; font-size:4rem; -webkit-text-stroke: 1px black; font-weight:bold'
);
Copy the code

That’s all for today. The above is what I used. If you still use other methods, please let me know in the comments section and I will make up for them.

nagging

If this article is useful to you, your likes, comments and concerns are the biggest encouragement for me O(∩_∩)O👍👍👍