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!");
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
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:'
;Start the group by Invoking
console.group(label)
orconsole.group('List of Human:'
)`
We don't need the second invocation because we already stored the title in the
label
variable !
Add elements to that group by passing it to the
console.info(<content>)
.Finally, Claim the end of the group using
console.groupEnd(label)
orconsole.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:
- Add a preceding
%c
to mark it as a custom Log. - 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);
Top comments (0)