JavaScript Console is widely used by developers for executing JavaScript codes, debugging, logging, etc.
Below are some mostly used methods provided by Console
- log() - This method outputs the given message to console.
- info() - This method outputs the given message to console as a Informational message.
- warn() - This method outputs the given message to console as a Warning message. The color of the message would be Yellow by default.
- error() - This method outputs the given message to console as a Error message. The color of the message would be Red by default.
- clear() - This method clears the console.
There are many more methods provided by Console but we don't need in this article.
In following ways we can out a message to console. I am taking console.log() for example.
console.log('I Love DEV');
console.log('I Love %s', 'DEV');
Output:
Observe in second line console.log('I Love %s', 'DEV'), here %s is String substitutions. Below are the string substitution used for other types :
- %o or %O - used to output objects,
- %d or %i - used to output integer,
- %s - used to output string,
- %f - used to output floating point values.
- %c - used to add styles.
Now, let's come to main agenda, styling our console outputs.
You got it right. We would be using %c for styling our console output. Let's style our first console output.
console.log('I Love %cDEV', 'height:40px;width:50px;padding: 3px 7px 3px 9px;background:#000;color:#fff;border-radius:4px');
console.log('I Love %c%s', 'height:40px;width:50px;padding: 3px 7px 3px 9px;background:#000;color:#fff;border-radius:4px', 'DEV');
Output:
Let's add more styles:
console.log('%cI Love %cDEV', 'color:#4caf50;font-size:18px', 'height:40px;width:50px;padding: 3px 7px 3px 9px;background:#000;color:#fff;border-radius:4px');
Output:
Top comments (0)