DEV Community

Cover image for A Short Guide to Console Messages
Mohamed Halawa
Mohamed Halawa

Posted on

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

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

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

info


Warning

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

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

warning

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

warning-expanded


Error

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

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

error


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);
Enter fullscreen mode Exit fullscreen mode

table


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);
Enter fullscreen mode Exit fullscreen mode

group

[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?
facebook

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);
Enter fullscreen mode Exit fullscreen mode

custom

Discussion (0)