Chrome console new gameplay-console displaying pictures and adding styles to text

For more information, please click here.

In normal mode, you can generally only output simple text messages to the console console. But in order to output the information more gracefully and easily read,

In addition to the Cosole.log () method, you can call Cosole.warn () to output a warning message, and the effect in the console is as follows:

There is a yellow triangular warning symbol with an exclamation point in front of the output information. It seems to be much friendlier than the general console information.

Although the icon is yellow, the output text is still black.

Another common use is the output error message. Can be implemented by calling Console.erro ().

The effect of the output is as follows:

A red circular icon with a fork appears in front of the message.

This effect is more friendly than the warning message and the font color is red.

To be more bull is to apply a style to the text. And now this feature has been implemented in Google Chrome.

In the Chrome Developer tool, the console can be styled to display a variety of colors, even pictures. It's so cool.

Specifically, the text that is output to the console console can be CSS controlled.

The format is as follows:

Console.log ("%c needs output Information", "CSS Code");

Below is a summary of the official documentation for the Console.log () API.

Google Developer Center above about Google Chrome console Console.log () Document:

Format specifier	Description
%s	Formats the value as a string.
%d or%i	Formats the value as an integer.
%f	Formats the value as a floating point value.
%o	Formats the value as an expandable DOM element (as in the Elements panel).
%O	Formats the value as an expandable JavaScript object.
%c	Formats the output string according to CSS styles for you provide.

1.3D Text:

Console.log ("%c3d Text", "text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0,0,0,.1), 0 0 5px Rgba (0,0,0,.1),
0 1px 3px Rgba (0,0,0,.3), 0 3px 5px Rgba (0,0,0,.2), 0 5px 10px rgba (0,0,0,.25),
0 10px 10px Rgba (0,0,0,.2), 0 20px 20px Rgba (0,0,0,.15); Font-size:5em ")
2.Colorful CSS

Console.log ("%ccolorful CSS", "Background:rgba (252,234,187,1); background:
-moz-linear-gradient (left, Rgba (252,234,187,1) 0, Rgba (175,250,77,1) 12%,
Rgba (0,247,49,1) 28%, Rgba (0,210,247,1) 39%,rgba (0,189,247,1) 51%, Rgba (133,108,217,1) 64%,
Rgba (177,0,247,1) 78%, Rgba (247,0,189,1) 87%, Rgba (245,22,52,1) 100%); background:-webkit-gradient (left Top,
Right top, Color-stop (0%, Rgba (252,234,187,1)), Color-stop (12%, Rgba (175,250,77,1)),
Color-stop (28%, Rgba (0,247,49,1)), Color-stop (39%, Rgba (0,210,247,1)), Color-stop (51%,
RGBA (0,189,247,1)), Color-stop (64%, Rgba (133,108,217,1)), Color-stop (78%, Rgba (177,0,247,1)),
Color-stop (87%, Rgba (247,0,189,1)), Color-stop (100%, Rgba (245,22,52,1))); Background:
-webkit-linear-gradient (left, Rgba (252,234,187,1) 0, Rgba (175,250,77,1) 12%, Rgba (0,247,49,1) 28%,
Rgba (0,210,247,1) 39%, Rgba (0,189,247,1) 51%, Rgba (133,108,217,1) 64%, Rgba (177,0,247,1) 78%,
Rgba (247,0,189,1) 87%, Rgba (245,22,52,1) 100%); background:-o-linear-gradient (left, Rgba (252,234,187,1)
0%, Rgba (175,250,77,1) 12%, Rgba (0,247,49,1) 28%, Rgba (0,210,247,1) 39%, Rgba (0,189,247,1) 51%,
Rgba (133,108,217,1) 64%, Rgba (177,0,247,1) 78%, Rgba (247,0,189,1) 87%, Rgba (245,22,52,1) 100%);
Background:-ms-linear-gradient (left, Rgba (252,234,187,1) 0, Rgba (175,250,77,1) 12%, Rgba (0,247,49,1) 28%,
Rgba (0,210,247,1) 39%, Rgba (0,189,247,1) 51%, Rgba (133,108,217,1) 64%, Rgba (177,0,247,1) 78%, Rgba (247,0,189,1) 87%,
Rgba (245,22,52,1) 100%) background:linear-gradient (to right, Rgba (252,234,187,1) 0, Rgba (175,250,77,1) 12%,
Rgba (0,247,49,1) 28%, Rgba (0,210,247,1) 39%, Rgba (0,189,247,1) 51%, Rgba (133,108,217,1) 64%,
Rgba (177,0,247,1) 78%, Rgba (247,0,189,1) 87%, Rgba (245,22,52,1) 100%);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #fceabb ',
Endcolorstr= ' #f51634 ', gradienttype=1); Font-size:5em ")
3.Rainbow Text

Console.log ('%crainbow Text ', ' background-image:-webkit-gradient ' (linear, left top, right top, color-stop (0, #f22), Colo R-stop (0.15, #f2f), Color-stop (0.3, #22f), Color-stop (0.45, #2ff), Color-stop (0.6, #2f2), Color-stop (0.75, #2f2), Color-stop (0.9, #ff2), Color-stop (1, #f22)); color:transparent;-webkit-background-clip:text;font-size:5em; ');

Update: Output pictures in chrome console

In addition to the dazzling text effects described above, you can also display images in the chrome console, and it's no problem to show animated images like GIF naturally.

or apply the same code, just change the content to the specified background as a picture.

Here is an example:

Console.log ("%c", "padding:50px 300px;line-height:120px;background:url (' http://wayouliu.duapp.com/img/tagsImg/ Youth.gif ') no-repeat; ");

For more HTML5 content, please click here.

Chrome console new gameplay-console displaying pictures and adding styles to text