To add styles in a console.log() statement, use the %c placeholder in the log message and then pass a CSS style string as the second argument. For example:
console.log("%cStylish message!", "color: blue; font-weight: bold;");
How to make console.log text colorful in JavaScript
Key takeaways:
Use the
%cplaceholder inconsole.log()to add custom CSS styles to console messages. This makes it easier to differentiate messages by type, such as errors, warnings, and general information.By chaining
%cplaceholders, we can apply different styles to separate parts of a message in a singleconsole.log()call. Each%cplaceholder can be followed by a different CSS style string.To improve readability, define consistent styles for different message types. For instance, use a bold red font for errors and green for success messages.
Styled logs are useful during development but should generally be removed or disabled in production environments to avoid cluttering the console.
The console supports a range of CSS properties, including
color,font-size,background-color,font-weight, and more, which can be used to enhance the readability of log messages.
In JavaScript, the console.log() method is one of the most commonly used tools to display messages for debugging or understanding code behavior. By adding color to the console.log() messages, we can improve the visibility of crucial logs, making debugging much more efficient. In this Answer, we’ll learn how to format the console.log() text using CSS styling and a few practical examples. Let’s work through it together!
Why make console text colorful
In larger applications, where the console can quickly fill up with logs, it can be challenging to scan through and identify the messages that matter the most. Making console text colorful allows us to:
Highlight critical messages such as errors or warnings.
Differentiate between log categories (e.g., success, errors, general information).
Make debugging easier by visually separating logs.
The basic syntax of the console.log()
Before discussing formatting, here’s a quick review of the basic syntax for console.log():
console.log(message);
In the above syntax:
console: It is an object that provides access to the browser’s debugging console.log(): It is a method that outputs a message to the console.message: This can be an object(s), string, or a primitive data type.
Applying CSS styles to console.log()
The %c placeholder allows us to apply CSS styles to a log message in the browser’s console. We can pass the styles as a string argument in the second parameter.
The CSS styling is not supported by our code widget. Use the console of the browser to see the effect of the CSS styling in the following command. Open the browser’s console by following these steps.
Open the Developer tools panel.
Google Chrome and Microsoft Edge: Press “Ctrl + Shift + I” or “F12”.
Mozilla Firefox: Press “Ctrl + Shift + K” or “F12”.
Safari: Go to
Safari > Preferencesor press “Command + ,” and click the "Advanced" tab. Check the option “Show Develop menu in menu bar”. Press “Command + Option + C” to open the console directly.For macOS, use “Command + Option” inplace of “Ctrl + Shift”.
Once the Developer tools are open, select the “Console” tab.
Let’s try an example where we color the text:
console.log("%cWelcome to Educative!", "color: blue;");
In the above command, we use the %c placeholder to indicate that the following text (Welcome to Educative!) should be styled. The second argument ("color: blue;") specifies that the text should be colored blue using CSS.
If we run this in the browser’s console, we’ll see that the text is now blue.
Adding color to the console log
Example 1: Styling text with multiple CSS properties
We can style our console.log() message with more than just colors. Let’s add some extra CSS properties, such as font-size and background-color:
console.log("%cThis is a bold and large message!", "color: red; font-size: 20px; font-weight: bold; background-color: yellow;");
In the above command, we apply multiple CSS properties: red text, a larger font size of 20 px, bold weight, and a yellow background. This makes the message stand out even more!
If we run this in the browser’s console, we’ll see that the text with multiple CSS styles.
Adding multiple CSS styling to the console log
Example 2: Combining multiple styles in one console.log()
Sometimes, we may want to apply different styles to different parts of a message. We can pass multiple %c placeholders, each followed by a corresponding style.
console.log("%cError: %cSomething went wrong!", "color: red; font-weight: bold;", "color: black;");
In the above command, we applied two %c placeholders. The first %c applies the red, bold style to the word “Error.” The second %c reverts the style to default for the rest of the message (“Something went wrong!”).
If we run this in the browser’s console, we’ll see that the text with multiple %c styles.
Applying multiple %c styles in one console log
By styling different parts of the message, we can emphasize important words while keeping the rest of the text neutral.
Example 3: Applying styles conditionally
We might want to color messages based on their type. For example, we can create a small function that applies styles conditionally depending on whether it’s a success or an error message:
function logMessage(type, message) {if (type === "success") {console.log("%cSuccess: " + message, "color: green; font-weight: bold;");} else if (type === "error") {console.log("%cError: " + message, "color: red; font-weight: bold;");}}logMessage("success", "Data loaded successfully!");logMessage("error", "Failed to load data!");
Applying styles conditionally in console log
In the above code:
Lines 1–7: We define the
logMessagefunction that accepts atype(either “success” or “error”) and amessage.Line 9: For “success,” we style the text in green and bold.
Line 10: For “error,” we style the text in red and bold.
If we run this in the browser’s console, we’ll see the following output.
This allows us to have reusable, styled console messages based on the context.
Best practices for styling console logs
Use styles sparingly: While it’s tempting to use lots of styles, over-styling logs can make them harder to read. Reserve colors for critical information.
Consistency: Define specific styles for different log types (e.g., success, errors) and stick to them to make it easy to scan the console for important messages.
Disable in production: Consider removing or disabling styled
console.log()messages in production code to avoid performance overhead and cluttered logs for end-users.
Knowledge test
Let’s attempt a short quiz to assess your understanding.
1
How do you apply CSS styles to a console.log() message in JavaScript?
A)
Using style()
B)
Using %s in the string
C)
Using %c in the string
D)
Using %f in the string
Question 1 of 20 attempted
Conclusion
In this Answer, we learned how to use CSS styling to make console.log() messages colorful and more readable. By applying the %c placeholder and passing CSS styles, we can add colors, backgrounds, fonts, and more to our console messages. This can significantly improve debugging efficiency, especially in larger projects.
Frequently asked questions
Haven’t found what you were looking for? Contact Us
How to add styles in console log
Can we add a console.log() in CSS?
How do I format text in the console.log()?
How to bold text in console.log()
TRENDING TOPICS
