A Short Guide to Console Messages

Curious to know how to log different types of messages in console? Okay Just follow up with me..

There are 6 types of messages that Chrome DevTools Console supports:

• Information
• Warning
• Error
• Table
• Group
• Custom Message

Information

It can be done via console.log(<value>) function

console.log("[INFO]: You've Inserted 1 row in the database!");

Warning

It can be done via console.warn(<value>) function

console.warn("[WARNING]: You're about to leave this page !");

You can check it's Stack Trace by pressing the left-most little cursor ▶️

Error

It can be done via console.error(<value>) function

console.error("[Error]: This kind of operations requires a Quantum Machine !");

Table

It can be done via console.table([<Array of Objects>]) function

Example

let _humankind = [
    {
        Id: '0',
        Type: 'homosapien',
        Name: 'Uncle Bob'
    },
    {
       Id: '1',
       Type: 'neanderthal',
    },
    {
       Id: '2',
       Type: 'denisovan',
       Name: 'Donald Trump'
    }
];
console.table(_humankind);

Group

console.group(<label>) console.groupEnd(<label>) both are used to achieve it!

let humanGroup= 'List of Human:';

// Begin the group
console.group(humanGroup);
console.info('homosapien');
console.info('neanderthal');
console.info('denisovan');
// Necessary to end the group

console.groupEnd(humanGroup);

[Optional Section] Further Explanation

1. Store a the string that represents the group title (label) into a variable to make it easy recalling it
   E.G.let label = 'List of Human:';

2. Start the group by Invoking console.group(label) or console.group('List of Human:')`

​ We don't need the second invocation because we already stored the title in the label variable !

1. Add elements to that group by passing it to the console.info(<content>).

2. Finally, Claim the end of the group using console.groupEnd(label) or console.groupEnd('List of Human:')`

That's exactly why we defined the label variable:

• it's easier to recall
• Avoid probable spelling mistakes !

Custom Message

Ever wondered How facebook style the stop console message whenever you try to inspect it?

Well, it's possible via console.log() but you have to:

1. Add a preceding %c to mark it as a custom Log.
2. Pass your css rules to style the content as a second argument.

So the final Invocation form is: console.log('%c<content>',styleRules);

const spacing = '0.5rem';
const style = `
        padding: ${spacing};
        background-color: yellow;
        color: blue;
        font-weight: Bold;
        border: ${spacing} solid red;
        border-radius: ${spacing};
        font-size: 2em;
`;
console.log('%cThis is a Custom Log !', style);