DEV Community

lucky chauhan
lucky chauhan

Posted on

The Secret Trick to Customizing Console Logs with CSS

#consolehacks #css #javascripttips #webdev

Tired of boring, plain-text console logs? Did you know you can style your browser’s console output with colors, custom fonts, backgrounds, and even animations—all using a simple JavaScript trick?

In this post, you’ll learn how to use the %c formatter to apply CSS styling to console.log() messages, making debugging more visually intuitive and even fun!

✨ Why Style Console Logs?

Before we dive into the code, here’s why you should care:

✅ Highlight important logs (errors in red, warnings in yellow)

✅ Organize debug output (API calls vs. state changes)

✅ Make debugging more enjoyable (because who doesn’t love colors?)

🛠 How It Works: The %c Formatter

The secret is the %c placeholder in console.log(). It tells the browser: “The next argument is CSS—apply it to this text!”

Basic Syntax 

console.log("%cStyled Text", "CSS goes here");
Enter fullscreen mode Exit fullscreen mode

Example: Colored & Bold Log 

console.log(
  "%cHello, Console!",
  "color: white; background: #007BFF; font-weight: bold; padding: 4px;"
);
Enter fullscreen mode Exit fullscreen mode

This logs a blue-background, bold, white text message.

🎨 Advanced Styling Tricks

1. Multiple Styles in One Log

Use multiple %c placeholders for different styles:

console.log(
  "%cError:%c File not found!",
  "color: red; font-weight: bold;",
  "color: #333;"
);
Enter fullscreen mode Exit fullscreen mode

2. Backgrounds, Borders & Padding

Make logs stand out like notifications:

console.log(
  "%cSUCCESS",
  "background: #28A745; color: white; padding: 4px 8px; border-radius: 4px;"
);
Enter fullscreen mode Exit fullscreen mode

3. Fun with Fonts & Shadows 

console.log(
  "%c✨ Debug Mode Activated!",
  "font-family: sans-serif; font-size: 18px; text-shadow: 1px 1px 2px #ccc;"
);
Enter fullscreen mode Exit fullscreen mode

🚀 Practical Uses

  • Color-code log levels (errors, warnings, info)
  • Highlight API request/response logs
  • Make debugging sessions less monotonous

🔍 Try It Yourself!

  1. Open DevTools (F12 or Ctrl+Shift+I).
  2. Paste any example above into the console.
  3. Experiment with your own styles!

Pro Tip: Combine this with console.group() for neatly organized logs.

💬 Your Challenge

What’s the craziest style you can create? Try:

  • Gradient text
  • Animated logs (using @keyframes)
  • A full-width console "header"

📌 Key Takeaways

✔ Use %c to inject CSS into console.log().

✔ Style text, backgrounds, borders, and more.

✔ Great for debugging, logging, and fun experiments.

Now go make your console logs pop with color! 🎉

Tags: #JavaScriptTips #WebDevelopment #Debugging #FrontEnd

Top comments (1)

Collapse
 
nadim_mahmud_e7a2ff078389 profile image
Nadim Mahmud •

It was great and informative thank you keep it up?🐧