This is the 10th day of my participation in the genwen Challenge

The console that comes with Chrome is one of the most popular commands for front-end developers.

The following debugging uses Chrome 91.0.4472.114 (official version) (64-bit)

Output styles in the console

In addition to directly displaying the console output, we can also customize the display style, such as enlarging the font and changing it to red

console.log('%cThis is large red text', 'color: red; font-size: 30px; ');Copy the code

The key point is %c

Essentially what happens is that % C reads the string in the parameter to determine the style to apply.

So, assuming a second style is passed, %c moves to the next argument, just like string substitution.

The empty string in the parameter list resets the style to the default value.

console.log('This is %cred text %cand this is %cgreen text.', 'color: red; ', '', 'color: green; ');Copy the code

Richer styles

const style=` background: white; border: 3px solid red; color: red; font-size: 50px; margin: 40px; padding: 20px; ` console.log('%cHello there! ',style );Copy the code

A more complex example

const clearStyles = ''; const largeText = 'font-size: 20px; '; const blueText = 'color: blue; '; const largeRedText = 'font-size: 20px; color: red; '; const largeGreenText = 'font-size: 20px; color: green; '; console.log(`This is %clarge red text. %cThis is %clarge green text. %cThis is %clarge blue text.`, largeRedText, clearStyles, largeGreenText, clearStyles, largeText + blueText );Copy the code

Statistics from group(), groupCollapsed() and groupEnd()

If group collapsed is replaced by group collapsed, it collapses by default.

Console. group prints itself if it does not write;

    console.group();
    console.log('one');
    console.log('two');
    console.log('three');
    console.groupEnd();

    console.group('this is a label');
    console.log('one');
    console.log('two');
    console.log('three');
    console.groupEnd();
    
    console.groupCollapsed();
    console.log('one');
    console.log('two');
    console.log('three');
    console.groupEnd();
Copy the code

Grouping can also be used in combination with the previous styles

console.group('%cstyled group', 'font-size: 20px; color: red; '); console.log('one'); console.log('two'); console.log('three'); console.groupEnd();Copy the code

Structuring display: table()

Table allows you to display your data in a more structured way, and you can use it when printing arrays or objects

 let basicArray = [
      'one',
      'two',
      'three'
    ];
    console.table(basicArray);
Copy the code

Timing: time() and timeEnd()

You can use these methods to keep track of how long it takes to get something done

// Start the timer console.time('testForEach'); For (let I =0; i<5; I ++){console.log(I)} // Stop timing, output time console.timeEnd('testForEach');Copy the code

Copy the object printed by console.log

The most commonly used command, console.log, is already familiar and does not need to be introduced;

One of the things I want to extend here is how to copy console.log printed objects;

We now output an object in the console

Direct CTRL +C copy and paste to Notepad like this

Obviously it’s not in the format we want, so we can do this;

Move the mouse to the position of the red box circle, click Copy Object, and then open Notepad paste

Note: the content displayed varies depending on where you click

Debug (), error(), Info (), log(), warn()

These commands are the five brothers of console printing, they can all output information on the console, but the display will be a little different;

As you can see from the following figure: Error represents an error, is shown in red, and can be extended to display additional information about the output; Warn stands for warnings, also displays different colors, and outputs additional information;Copy the code

Tip 1: Click on All Levels to select the type of print you want to display

Tip 2: When a statement outputs multiple data at the same time, the console displays it inline, which is handy if you want to compare data

console.log({year: '2020',month:'01',date:'01'}, {year: '2021',month:'02',date:'01'});
Copy the code

Clear: clear ()

The command to clear the console

console.clear(); Or directly to the clear ();Copy the code

Sometimes, when we open the console, we will see a lot of warning messages, which will not allow us to see the information we want to see, this time we need to clear the console.

A Guide to Console Commands

Xiao Ke love to finish click a “like” and then go! 🤞 🤞 🤞