This content originally appeared on Bits and Pieces - Medium and was authored by Nethmi Wijesinghe
Color and Style Console Output Like a PRO
The browser console is one of the most convenient tools developers use in their day-to-day development process. It helps developers rapidly identify bugs by logging specific messages. Essentially, the browser console has three primary uses:
- To log data.
- To display messages
- To run JavaScript.
However, have you ever thought the console output from your browser is too basic and dull? Or else, have you ever wanted to make the result on your console look more readable?
If there are too many console messages, the developer might find it challenging to find a particular log message. But, by adding styling, you can increase the readability and make the interaction easy and appealing.
When debugging, this can be useful if you have many console messages and want one particular message to stand out so that you can find it quickly. This article will discuss how to style the console log with Chrome DevTools to increase readability.
Introduction to Format Specifiers
Using a format specifier, you can denote the formatting you need to apply to a given value. It consists of a % symbol and a letter that specifies the formatting that should be applied to the console message.
A list of format specifiers that Chrome DevTools currently support is given below, along with the corresponding output.
As you can see from the above list, the format specifier we can use for styling is the CSS format specifier, %c. Using it, you can apply CSS style rules to the output string.
Here, the format specifier %c should be followed by the console message you intend to log. Then, you can pass the CSS style rules you want to apply to the output string as the second argument of the console.log().
Let’s look at a simple example.
console.log("%cHELLO WORLD!", "color:red");If you try this out in your console, you’ll see the message printed in red color, as follows. Here, to indicate that we’ll be adding CSS styles to the console output, we’ve used the %c format specifier and defined the CSS effect we want to apply to the string as the second parameter.
Style Console Messages
There are two methods to style console messages using DevTools.
- Using Format Specifiers
- Using ANSI Escape Sequences
Let’s apply styling to console messages using the abovementioned methods without further ado.
Styling with Format Specifiers
As discussed above, you can use the %c format specifier to style the console messages with CSS.
1. Increase the font size to increase the readability.
A larger font is always easier to read than a smaller one. Therefore, you can increase the font size of your console output as follows.
Besides, you can also use units like px or em to define the font size.
console.log("%cHello World!","font-size: 20px");
console.log("%cHello World!","font-size: 5em")2. Display console messages using a specific color.
You can use the built-in console methods console.error() and console.warn() to highlight an important message by changing the color of the output. As we saw in our first example, you can replicate this feature using the console.log() method.
In the previous example, we changed the color of the whole output. Now, let’s assume that you want only to emphasize a part of the console output using a different color. Then, you can do that, as shown below.
3. Using a variety of CSS styles on console messages.
Almost every CSS style can be applied to the console output as we applied the font size and color. As seen in the example below, you can highlight a word in a sentence or bold it to improve its readability.
Sometimes, you may want to combine multiple CSS styles. The following example demonstrates how you can simultaneously apply different CSS styles to the console output.
Though this offers complete customizability over the output, it can create a lengthy styling string as shown above. Therefore, JavaScript allows you to pass a list of styles joined as a single String to reduce the complexity of the string. This is depicted below.
const styles = ['font-weight: 800',
'font-size: 50px',
'color: #7158e2',
'text-shadow: 6px 6px 6px #17c0eb, 9px 9px 9px #67e6dc, 12px 12px 12px #3ae374, 15px 15px 15px #fff200, 18px 18px 18px #ff3838, 21px 21px 21px #ffb8b8'].join(';');
console.log('%cHello World!', styles);
Thus, we can apply as many styles as required to the console message and increase its readability.
Styling with ANSI Escape Sequences
Another technique you can use to style console messages is the ANSI escape sequences. With the aid of styling libraries like chalk, colors, and ansi-colors, Node.js developers frequently utilize this technique to add styles to the console output.
However, using a styling library to use ANSI escape sequences to style the console output is not essential. For that, you can use the following syntax:
\x1B[P1;…;Pnm
Here, the command starts with the escape character (\x1B) to indicate the beginning of the escape (control) sequence.
In such a sequence, the escape character is typically sent first to inform the device that the subsequent characters were to be read as a control sequence rather than as plain characters.
After that, a set of color and style codes will come, and then the console output.
Take a look at the following example.
The command above changes the color of the console output to red.
Likewise, you can change the color to “Yellow” and make it “Bold” “via the syntax shown below.
As shown above, you may use the color code “103” to change the background color while using the style code “1” to make the text bold.
Below is a complete list of style and color codes supported in DevTools.
Conclusion
This article has covered two methods to style the console.log() output. First, since the console is one of the most commonly used debugging tools, it is vital to ensure the console output is readable to identify errors and bugs better.
Now would be an excellent time to consider creating reusable debugging components with Bit. These can be used, reused, and shared across applications.
Sharing JavaScript Utility Functions Across Projects
Therefore, I hope this article provides insightful ways on how a developer can improve the readability of their console messages and improve their development workflow.
Thank you for reading!
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Increase Readability with Console Log Styling with Chrome DevTools was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Nethmi Wijesinghe
Nethmi Wijesinghe | Sciencx (2023-02-10T08:02:36+00:00) Increase Readability with Console Log Styling with Chrome DevTools. Retrieved from https://www.scien.cx/2023/02/10/increase-readability-with-console-log-styling-with-chrome-devtools/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.