Multi-color Console printing new gameplay

Chrome should be one of the tools that every web developer must have. It has powerful devtool, assists with our JavaScript debugging, examines DOM elements, CSS changes in real time, and so on. And it also has a huge plug-in system, and we can easily expand their own chrome plugin. If you want to learn more about Chrome's common debugging, see the author's early push article, "15 Tips for chrome developers to know."

The console console in Chrome is one of the most common tools we use to check if a program is allowed to work, and it's a common tool for printing debug log information and running debug code. In China in recent years, it has become one of the channels for programmers to recruit. such as the following Baidu recruitment information:

There are several ways to print logs in the console, such as log, info, warn, and error. But they are not the subject of this article. For the log information printing, has been very monotonous. Until the latest version of Chrome and Firefox (+31), we can try more colorful printing format. In the latest Google Chrome documents, Console.log supports the following formats:

1. %s string formatting;
2. %d/%i integer formatting;
3. %f decimal digit data format;
4. %o Extensible DOM node formatting;
5. %O Extensible JavaScript object formatting;
6. %c uses CSS to customize the formatting of the style output.

This article is going to be about%c, the formatter. We can use CSS styles to control the output of printed information. So we can get a colorful log message, or it's a job ad.

The following code outputs the effect:

console.log(‘%c [破狼]-[双狼说]!‘, ‘background: #008000; color: #fff‘);

Effect:

Again: The following paragraph from the Http://stackoverflow.com/questions/7505623/colors-in-javascript-console example, the effect of text lighting:

The code is long, please go to StackOverflow to view. Here is the main use of the Text-shadow this CSS3 feature to achieve, text lighting effect:

var css = "text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), .....";// console.log("%cExample %s", css, ‘all code runs happy‘);

The effect is as follows:

There is also log repo on GitHub, and interested readers can study it.

Multi-color Console printing new gameplay