Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
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");
Example: Colored & Bold Log
console.log(
"%cHello, Console!",
"color: white; background: #007BFF; font-weight: bold; padding: 4px;"
);
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;"
);
2. Backgrounds, Borders & Padding
Make logs stand out like notifications:
console.log(
"%cSUCCESS",
"background: #28A745; color: white; padding: 4px 8px; border-radius: 4px;"
);
3. Fun with Fonts & Shadows
console.log(
"%c Debug Mode Activated!",
"font-family: sans-serif; font-size: 18px; text-shadow: 1px 1px 2px #ccc;"
);
? Practical Uses
Pro Tip: Combine this with console.group() for neatly organized logs.
? Your Challenge
What’s the craziest style you can create? Try:
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
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");
Example: Colored & Bold Log
console.log(
"%cHello, Console!",
"color: white; background: #007BFF; font-weight: bold; padding: 4px;"
);
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;"
);
2. Backgrounds, Borders & Padding
Make logs stand out like notifications:
console.log(
"%cSUCCESS",
"background: #28A745; color: white; padding: 4px 8px; border-radius: 4px;"
);
3. Fun with Fonts & Shadows
console.log(
"%c
Debug Mode Activated!","font-family: sans-serif; font-size: 18px; text-shadow: 1px 1px 2px #ccc;"
);
? Practical Uses
- Color-code log levels (errors, warnings, info)
- Highlight API request/response logs
- Make debugging sessions less monotonous
- Open DevTools (F12 or Ctrl+Shift+I).
- Paste any example above into the console.
- 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"
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