Interesting use of Console in JavaScript

Console commands are used to debug Web pages. During javascript development and debugging, we often use commands such as console. log () to display output information. The console panel of modern browsers (generally F12 can be called out) can help us better debug web page script programs.

Once, on many websites, we saw the recruitment information hidden by developers in the debugging tool console, and the recruitment information on Baidu homepage, as shown in the figure below (chrome browser ):

 

This article will show you how to implement console command output formatting (with style), images, and other information to make the console very interesting.
Basic usage
The basic syntax of console. log is as follows:
Console. log (object [, object,…]);
// Console. log ('helloweba'); // output: helloweba
Placeholder
Tmall, Zhihu, and other websites also have their own recruitment information on the homepage console. Of course, these recruitment information is highly targeted and he told web developers to view it, the more precise object should be the front-end developer.
First, let me talk about placeholders. The browser provides such an API: The first parameter can contain some format placeholders, such as % c. The console. log method replaces the placeholder with the following parameters in sequence, and then outputs them in the row. Those familiar with PHP or C programs should be familiar with the placeholder concept.
The placeholder list is described as follows:
Format placeholders
% S string
% D or % I integer
% F floating point number
% O extensible DOM
% O list DOM attributes
% C format the string based on the provided css style
% O and % O have the same performance on common objects, but there is a difference in DOM:
// The format is an extensible DOM, which can be expanded as in the Element panel of the developer tool.
Console. log ('% O', document. body. firstElementChild );
// Access the DOM element like a JS object to view the attributes of the DOM element
// Equivalent to console. dir (document. body. firstElementChild)
Console. log ('% O', document. body. firstElementChild );
For a page test that is opened at will, firefox can always view the expandable DOM nodes, that is, the behavior is % o; IE does not support % o and % O; chrome displays normally.
% C placeholders are the most commonly used. When % c placeholders are used, the corresponding parameters must be CSS statements for CSS rendering of the output content. As a result, % c can be used with CSS to achieve the effect of hanging sky, such as background color, font color gradient, font 3D effect, pictures, and so on, or even Mars text, table packages.
Console. log ("% cHelloweba welcome! "," Color: red; font-size: 20px ");
// Output a red, 20px string: Helloweba welcome!
Note:
The console cannot define img, so it should be replaced by a background image.
The console does not support width and height, which are replaced by spaces and font-size. You can also use padding and line-height to replace width and height.
Chrome does not support img! The reason is that the ConsoleViewMessage. js source code makes the url harmonious. But you can download the firebug plug-in to view it ~ GIF images are also supported ~~~
The console is a line feed by default.
Character painting
On the console panel of Tmall and Zhihu, we also found interesting text graphics. How can we achieve this?
This text image is now called a character painting.
So do they seem to be compared with character painting by hand? No, there are artifacts that can make images into ASCII characters.
We recommend two online generation tools:
Online tool: picascii
Online tool: Maid
General method: Use an online tool to generate a character painting, copy it to sublime, delete the line break starting with each line, and replace it with \ n. There is only one line of code at the end, that is, ensure that there is no line break, and then drop it into the console. log ("") code. Of course, you can also add % c to make the cool effect.
Compatibility problems
Only IE8/9 supports the console when the developer tool is opened; IE6/7 does not support the console and throws an error.
% C, % o, % O, and IE are not supported, while % o and % O of firefox support % o.
The background image of % c is currently only supported by firebug, and chrome does not.
Different display of links: chrome can be clicked to jump; Firefox default developer tool requires a space to separate text before clicking to jump, while firebug always cannot click; IE cannot click to jump.

Here I paste the code in the demo:

Console. log ("\ n :. I #: I #. ff \ n # t ##. # K # \ n # f #### K # \ n # t #### K ## K ### \ n ##:: ## G ### f ## K. E ## E ### d l #. ######### w e #### \ n ##:: G ########### K ## K ############## E I ###### I ## ######. ######, \ n ## D ###########: t #### K ## K #### GD ## t ##. ############ K ,##. ############################ K # K, ####### j ######### G ## I ### f ## W # K #####\ n ## t: # j ##### E ## K # f ######## K # W ## E ###### I # # j ####, ##\ n ##.: ## f ### j ## k d ## L ####: ########### E #####\ n ####### f t # f ## K. ##.. ## I ### G #### E ##. W ####; K #######. \ n ##: # W ######## f ## K ############## K ######### ###### G; ######## \ n. #### I ##### I K # I E # t W #### G # W f ##. E #####. ###### I L #### L ##");
 
Var str = "Welcome to http://www.111cn.net/, onlookers front-end technical articles! \ N follow WeChat official account: % chellowebacom % c. We will occasionally push you a selection of technical articles! \ N ";
Console. log ("% c" + str + "\ n % c", "color: #6366e8;", "padding: 0 5px; color: # fff; background: #6366e8; font-size: 20px; "," color: #6366e8; "," background: url (http://www.111cn.net/attachments/hellowebawx.jpg) no-repeat left center; font-size: 100px ;", "\ n ");
After running, open the console panel, as shown in the following figure: