Console logs are a developer’s trusty sidekick for debugging and providing information during the development process. While typically used for outputting plain text, console logs can also be styled to catch the eye and convey messages with a bit of flair. The JavaScript code snippet below showcases how to add custom styles to your console messages.
The Code
console.log('%c Made with ♥ by me', 'background: #000000; padding:5px; font-size: 10px; color: #ffffff');
console.log('%c Lorem ipsum dolor sit amet consecetur', 'background: #000000; padding:5px; font-size: 10px; color: #ffffff');
console.log('%c > https://latablerouge.ninja ', 'background: #000000; padding:5px; font-size: 10px; color: #ffffff');How It Works
The %c directive within the string tells the console to apply CSS styles, which follow as the second argument. These styles can be anything from font size and color to padding and background color. Each console.log statement in the snippet applies a bold black background with white text, reminiscent of a terminal’s appearance.
Usage
You can use these stylized logs to:
- Brand Your Console: Leave a signature message for anyone inspecting your site.
- Highlight Important Messages: Make critical debug information stand out.
- Add Personality: Bring a bit of character to the otherwise monotonous console output.
Advantages
- Visibility: Styled logs are more noticeable, which can be useful for warnings or credits.
- Customization: Tailor the appearance of your logs to match your project’s branding.
- Fun: Add some fun to your development process with visually appealing logs.
By incorporating styled console logs, developers can create a memorable and distinctive presence within the browser console, whether it’s for branding, important alerts, or simply to delight fellow coders who might be exploring their code.
Leave a Reply