Limited Time Offer - 75% Off, Get Hover Console Now!

Hover Console

In-Page Debugging

Color Your JS Debugging: The Power of console.log Colors ❤️

Color Your JS Debugging: The Power of console.log Colors ❤️

posted on

Console Colors refers to the ability to add color styling to messages logged using the console.log() or other console function in JavaScript. This feature allows developers to visually differentiate between different types of messages or highlight important information in the browser console during debugging.

The Importance of Colorized console.log() Messages

This can help improve readability and make debugging more efficient by drawing attention to specific messages or types of information.

Overall,

console.log() colors provide a useful tool for enhancing the visual presentation of debug messages and improving the debugging experience in web development.

When dealing with extensive applications where the browser console is flooded with logs, customizing the appearance of log messages becomes crucial. By styling your log messages, you ensure that important information doesn’t get lost amidst the sea of logs.

console.log messages can be colored in two ways:

  1.  Utilizing %c with CSS.
  2. Applying ANSI escape codes.

Utilizing %c with CSS

The %c placeholder is a special syntax that allows CSS styling to be applied to specific sections of the console output. This enables programmers to format console messages using CSS principles.

By using CSS styling within console.log() statements, developers can apply:

  • Font colors
  • Background colors
  • Font sizes
  • Font weights and
  • Other styles to the logged messages.

Simply Color with CSS

console.log('%cHover Console is a JavaScript debugging extension.',  'color: green;');

Output:

Using Variable

Change The Font Color with Size

let myColor = "color:#44eb70; font-size:40px;"

console.log("%cHover Console is a JavaScript debugging extension.", myColor);

Output:

Change The Font Color, And Make It Bold, Italic, And Underlined

let myColor = "color:#44eb70; font-size:30px; font-weight: bold; font-style: italic; text-decoration: underline;"

console.log("%cHover Console is a JavaScript debugging extension.", myColor);

Output:

Multi-Layered Color

let style = 'font-weight: bold; font-size: 50px;color: green; text-shadow: 3px 3px 0 #0b8c2e , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 #5cd17b , 21px 21px 0 #3db85e';

console.log('%c Hover Console', style);

Output:

Text Color with Outline Color

let style = "font: 100px sans-serif; font-weight:bold; color:#6ceb23; -webkit-text-stroke:3px #db4739";

console.log('%cHover Console', style);

Output:

Console message with %s

Besides cleaning up the console message by passing the styles as an array. We can also clean up the message using the %s specifier.

let style = ['color: green', 'background: yellow'].join(';');

let message = 'Hover Console is a JavaScript debugging extension.';

// Using the styles and message variable
console.log('%c%s', style, message);

Output:

Custom Your console.log()

function colorLog(message, color) {
    color = color || "black";
    switch (color) {
        case "success":
            color = "Green";
            break;
        case "info":
            color = "DodgerBlue";
            break;
        case "error":
            color = "Red";
            break;
        case "warning":
            color = "Orange";
            break;
        default:
            color = color;
    }
    console.log("%c" + message, "color:" + color);
}

colorLog("Hover Console");
colorLog("Hover Console is a JavaScript debugger.", "success");
colorLog("Hover Console is a JavaScript debugging extension.", "info");
colorLog("Hover Console is a JS language.", "error");
colorLog("Hover Console is a language.", "warning");

Output:

Default Console Color

//For pink background and red text
console.error("Hover Console");  

//For yellow background and brown text
console.warn("Hover Console");  

//For just a INFO symbol at the beginning of the text
console.info("Hover Console");

Output:

Applying ANSI Escape Codes

The output color of the console can be modified in JavaScript using ANSI escape codes. By inserting escape sequences like ‘\x1b[36m%s\x1b[0m’ for green, console messages can be styled to enhance readability and visual distinctiveness.

Simply Color with ANSI Escape Codes

console.log('\u001b[32m' + 'Hover Console is a JavaScript debugging extension.');

Output:

Using Variable

const RED = "\u001b[31m";

console.log(RED + "Hover Console in Red.");

Output:

Background Color

const WHITE_GREEN = "\u001b[37;42m";

console.log(WHITE_GREEN + "Hover Console is a debugger!");

Output:

Formatted with Large and Green Text

let style = "color: green; font-size: x-large";

console.log("%cHover Console is formatted with large and green text", style);

Output:

Font in Box

let style = 'background-color:white; border:2px solid green; font-size:18px; font-weight: bold;padding:3px 5px;color:';

console.log('%cRed Hover Console%cGreen Hover Console%cBlue Hover Console', `${style} Red`, `${style} Green`,`${style} Blue`);

Output:

By leveraging these techniques, as a developer you can effectively highlight different types of messages, making the debugging process more efficient and visually intuitive. Customizing console output not only aids in quickly identifying issues but also improves overall code maintainability by ensuring that important log messages are easily distinguishable.

Incorporating color into console is a valuable practice that enhances the development experience. Whether through CSS styling in the browser or ANSI escape codes in the terminal, this approach offers a clear and efficient way to manage and interpret console output.

Resources & References

×