How to Display Styled Messages in the JavaScript Console

Learn how to show messages in the JavaScript console with custom styles to make debugging more effective and visual.

The developer tools console is a fundamental part of the debugging process in web development. Often, we want our messages to be more informative and visually appealing. In this post, you’ll learn how to display messages in the JavaScript console with custom styles, similar to what large web applications do.

Simple Messages
The most basic way to display a message is by using console.log():

console.log("This is a simple message.");

Messages with CSS Styles
You can apply styles to messages using %c. Here’s an example:

console.log("%cThis is a styled message", "color: blue; font-size: 20px; font-weight: bold;");

Attention-Grabbing Messages
If you want to make a message stand out more, you can combine multiple styles:

console.log("%cAttention!%c This is important.", "color: red; font-size: 24px; font-weight: bold;", "color: black; font-size: 16px;");

Grouping Messages
To better organize your messages, you can use console.group() and console.groupEnd():

console.group("Message Group");
console.log("%cMessage 1", "color: green;");
console.log("%cMessage 2", "color: orange;");
console.groupEnd();

Adding Icons
Another way to make your messages more visual is to add icons:

console.log("%c✅ Success:", "color: green; font-size: 20px;", " The operation completed successfully.");

Complete Example
Here’s an example that combines several of these techniques:

console.group("Operation Summary");
console.log("%c🔔 Alert:", "color: orange; font-size: 20px;", " This is an alert message.");
console.log("%c✅ Success:", "color: green; font-size: 20px;", " The task was completed successfully.");
console.log("%c❌ Error:", "color: red; font-size: 20px;", " An unexpected error occurred.");
console.groupEnd();

Conclusion
Customizing console messages not only makes debugging more efficient but also enhances the developer experience. Now it’s your turn to experiment with these styles and make your messages more engaging!

visit the same article on my website hebertdev