A Short Guide to Console Messages
Tags: javascript, todayilearned, console, beginners
Published: 2021-02-19 13:18:50


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](#information)
- [Warning](#warning)
- [Error](#error)
- [Table](#table)
- [Group](#group)
- [Custom Message](#custom-message)

---
## Information

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

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

![info](https://i.imgur.com/eNxIMYK.png)


---
## Warning


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

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

![warning](https://i.imgur.com/1rpz6H4.png)

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

![warning-expanded](https://i.imgur.com/aNJ61cT.png)

---
## Error


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

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

![error](https://i.imgur.com/MBTWyKg.png)

---
## Table


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

### Example

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

![table](https://i.imgur.com/JGe1t5g.png)

---
## Group


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


```javascript
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);
```

![group](https://i.imgur.com/aAqL3nq.png)


#### [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 !

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

4. 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](https://i.imgur.com/jKcxj6w.png)

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)`;

```javascript
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);
```

![custom](https://i.imgur.com/L7DGpWk.png)