Jedidiah's Blog
Spice Up Your Debugging: The Hidden Art of Styled Console Logs

Spice Up Your Debugging: The Hidden Art of Styled Console Logs

Transform Your Console from Monochrome to Magnificent

Jedidiah Amaraegbu's photo
Jedidiah Amaraegbu
·

3 min read

Table of contents

As developers, we've all written console.log("Hello world") countless times. But did you know you can transform those plain text logs into eye-catching, styled messages? Let's dive into a simple yet powerful debugging technique that can make your development process both more effective and more enjoyable.

The Magic of CSS in the Console

Here's a simple line of code that might surprise you:

console.log("%cHello world", "color: red; font-size: 50px");

When you run this in your browser's console, you'll see "Hello world" displayed in bold red letters, fifty pixels tall. The magic here lies in two parts: the %c directive and the CSS styling string that follows it.

How Does It Work?

  1. The %c is a special formatting directive that tells the console to apply CSS styles

  2. Any text after the %c will be styled according to the CSS rules in the second parameter

  3. You can use most CSS properties you're familiar with, including colors, fonts, backgrounds, and even borders

Practical Applications

While colorful console logs might seem like mere eye candy, they serve several practical purposes:

For junior developers, styled logs can help distinguish between different types of messages – errors in red, warnings in yellow, and success messages in green.

Senior developers often use styled logs to create clear hierarchies in debugging output, making it easier to track complex application flows. You might style authentication logs differently from API responses, or highlight performance metrics with distinct colors.

Going Beyond Basic Styling

Want to take it further? Here's what else you can do:

// Multiple styles in one message
console.log(
    "%cError: %cFile not found", 
    "color: red; font-weight: bold", 
    "color: black; font-style: italic"
);

// Create debug headers
console.log(
    "%c⚡️ Application Started ⚡️", 
    "background: #333; color: #bada55; padding: 5px; border-radius: 5px;"
);

Best Practices

While styled console logs are powerful, remember:

  • Remove or disable fancy logging in production code

  • Use consistent styling patterns across your debugging statements

  • Don't go overboard – the goal is to improve clarity, not create a light show

Browser Support

This feature works in all modern browsers' developer tools, making it a reliable addition to your debugging toolkit, whether you're using Chrome, Firefox, Safari, or Edge.

The next time you're debugging a complex application, consider adding some strategic styling to your console logs. Not only will it make your debugging sessions more organized, but it might just make the process a bit more enjoyable too.

Remember, great developers aren't just problem solvers – they're also craftspeople who appreciate the small details that make development more efficient and enjoyable. Even something as simple as a styled console log can be a step toward more thoughtful, well-crafted code.

consoledebuggingJavaScriptCSSbrowser