Chrome console new gameplay-console displays images and adds styles for text,

Chrome console new gameplay-console displays images and adds styles for text,

 

For details, click

 

In normal mode, you can only output simple text information to the console. However, to make the information more elegant and easier to read,

In addition to the cosole. log () method, you can also call cosole. warn () to output warning information. The following figure shows the effect on the console:

A yellow triangle warning symbol with an exclamation point will appear before the output information. It seems much more friendly than the general console information.

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

In addition, output error messages are often used. You can call console. erro.

The output result is as follows:

A red circle icon with a cross will appear in front of the information.

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

To improve the style of text. But now this feature has been implemented in Google's browser.

In Chrome's developer tools, the console can add styles to display colorful colors and even images. It's amazing.

Specifically, CSS control can be performed on the text output to the console.

The format is as follows:

Console. log ("% c information to be output", "css Code ");

The following is a summary of the official documentation for console. log () API.

The Google Developer Center documentation on the Google Chrome console. log:

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 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,. 1), 0 0 5px rgba (0, 0, 0,. 1 ),
0 1px 3px rgba (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,. 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, 12%,
Rgba (0,247, 28%) 0,210,247, rgba (39%, 1) 0,189,247, rgba (51%, 1) 133,108,217, rgba (64%, 1,
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 )),
Color-stop (28%, rgba (0,247, 39%, 0,210,247), color-stop (51%, rgba (, 1), color-stop,
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, 12%, 0,247) 28%, rgba,
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, 12%) 0,247, rgba (28%, 49,1) 0,210,247, rgba (39%, 1) 0,189,247, rgba (51%, 1,
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, 12%, 0,247) 28%, rgba,
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, 100%) 252,234,187); background: linear-gradient (to right, rgba (0%, 1) 175,250, rgba (12%,
Rgba (0,247, 28%) 0,210,247, rgba (39%, 1) 0,189,247, rgba (51%, 1) 133,108,217, rgba (64%, 1,
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 ), color-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 images on Chrome Console

 

In addition to the dazzling text effects described above, you can also display images on the Chrome console. Naturally, it is okay to display dynamic images like gif.

The application code is similar, but the content is changed to the specified background as an image.

The following 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, click