Styling Console Messages

As developers, we at a point log messages to the console for debugging purpose. Getting unexpected results can be stressful at times especially if you have multiple components in your application. In this case, console messages are extremely helpful.

What if you can style your console messages? Probably not for only debugging purpose but to also warn people to stay away from your work. Interestingly, you can do this by adding the %c specifier to your console statement. Now that you know, open up the Developer Tools and try this in your console.

console.log('%cStyling Console Messages', 'color:green; background:#33eeaa; font-size:25px;')

%c Specifier

The specifier %c makes it possible for you to add CSS style to the console statement. As shown in the above example, %c applies the CSS style rules in the second parameter to the console statement. Read about other specifiers, Google Developers — Console API Reference.

Other Console Messages

There are other console statements that we can style but let’s focus on applying CSS style to a few of them.

console.log('%cGeneral output of logging information', 'color: #330000;'); 
console.info('%cInformative logging of information', 'color: #0080ff;'); 
console.warn('%cOutputs a warning message', 'color: #ff8000;'); 
console.error('%cOutputs an error message', 'color: #ff0000;');

Similarly, %c specifier is available for other console statements. Check out the documentation on MDN Web Docs — Console Web APIs.

Applying Multiple Styles

Certainly, multiple CSS styles can be applied to a console statement. Prepend the console statement with %c. Of course, statements after the directive are styled with the CSS styles stated in the parameter.

console.log('Multiple Styles: %cFirst Style. %cSecond Style','color:#085965; font-size:20px','color:#f53c55; font-size:30px')

Notably, there are three parameters specified in the console statement and the style declared in the last two parameters applied to the %c specifier respectively.

Styling Console Messages with an Array of CSS styles

As a matter of fact, CSS styles can get long. However, separating the styles into a variable as an array can be helpful.

const styles = [
    'color: #4dbb63', 
    'background: #999588', 
    'font-size: 20px',
    'text-shadow: 2px 2px #615e57',
    'padding: 5px',
].join(';'); 

console.log('%cStyling Console Messages', styles);

Note that, the join() function was used to convert the array to string.

Conclusion

In conclusion, the console is a powerful tool we can leverage. However, if you are interested in the new features of laravel you can read the article, New in laravel 6.