Problem
Can the built-in JavaScript console in Chrome show colors?
I want red errors, orange warnings, and a console. It’s a green log. Is that something you can do?
Asked by Randomblue
Solution #1
You may add CSS to the console in Chrome and Firefox (+31). messages in the log:
The same principle can be used to add numerous CSS to the same command.
Answered by christianvuerings
Solution #2
A rainbow drop shadow is used in this extreme example.
Answered by bartburkhardt
Solution #3
To color your debugger, you can use a custom stylesheet. This code can be found under C:Documents and SettingsUser Name>Local SettingsApplication DataGoogleChromeUser DataDefaultUser StyleSheets. If you’re using Windows XP, the directory is Custom.css, although it changes by OS.
.console-error-level .console-message-text{
color: red;
}
.console-warning-level .console-message-text {
color: orange;
}
.console-log-level .console-message-text {
color:green;
}
Answered by Dennis
Solution #4
You can’t force console.log()s to show in a specific color programmatically in older versions of Chrome, but invoking console.error() will put a red X icon on error lines and render the text red, and console.warn() will give you a yellow! icon.
The All, Errors, Warnings, and Logs buttons beneath the console can then be used to filter console entries.
Custom CSS for console.logs has been supported by Firebug since 2010, and Chrome support has been enabled as of Chrome 24.
console.log('%c Oh my heavens! ', 'background: #222; color: #bada55',
'more text');
The following parameter is utilized as the CSS to style the console line when percent c exists anywhere in the first argument. Additional arguments are added to the mix (as has always been the case).
Answered by josh3736
Solution #5
To make things a little easier, I built template-colors-web https://github.com/icodeforlove/Console.js.
console.log(c`red ${c`green ${'blue'.bold}.blue`}.green`.red);
With the default console.log, the above would be incredibly difficult to accomplish.
Click here to see a live interactive demo.
Answered by Chad Scira
Post is based on https://stackoverflow.com/questions/7505623/colors-in-javascript-console