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

Source: Internet
Author: User
Tags chrome developer

Interested classmates can post the last code copy paste to the console to play.

Go for Code

In normal mode, you can generally only output simple text messages to the console console. But in order to output the information more elegantly and easily readable, in addition to the Cosole.log () method can also call Cosole.warn () to output the warning message, 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 RG BA (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 10 PX 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%, R GBA (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:d XImageTransform.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://misc.360buyimg.com/lib/img/e/ Logo-201305.png ') no-repeat; ");


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.