A command to display information

1: <! DOCTYPE HTML > 2: < HTML > 3: <head> 4: <title> Common console command </title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.log('hello');
  10:         console.info('information');
  11:         console.error('wrong');
  12:         console.warn('warning');
  13:     </script>
  14: </body>
  15: </html>
Copy the code

The most common is console.log.

Two: placeholders

Console supports the placeholder format for printf, including characters (%s), integers (%d or % I), floating point numbers (%f), and objects (% O) :

A placeholder role
%s string
%d or %i The integer
%f Floating point Numbers
%o Expandable DOM
%O Lists the attributes of the DOM
%c Format the string according to the provided CSS style 
   1: <script type="text/javascript">
   2:         console.log("%d year % D month %d day", 2011,3,26); 3: </script>Copy the code

Effect:

%o and %o are used to print objects. For ordinary objects, there is no difference between the two, but for dom nodes it is different:

// Format it as an expandable DOM, as in the Element panel of the developer tools. Console. log('%o',document.body.firstElementChild); / / like the JS object access DOM element, can view the DOM element attribute / / equivalent to the console. Dir (document. Body. FirstElementChild) console. The log ('%O',document.body.firstElementChild);
Copy the code

The %c placeholder is the most commonly used. When using the %c placeholder, the corresponding subsequent argument must be a CSS statement used to render the output with CSS. There are two common output methods: text style, image output.

The text output

console.log("%cHello World, welcome!"."color: red; font-size: 20px"); // Print a red, 20px string: Hello world, welcome!Copy the code

In addition to plain text, it can also output character paintings like zhihu’s console panel. These character drawings can be generated online:

  • picascii
  • mg2txt
  • Ascii generator

Approximate method: use an online tool to generate character art and copy it to sublime, removing the newline at the beginning of each line and replacing it with \n. There is only one line of code left at the end, making sure there are no newlines, and you can throw it into console.log(“”), or you can add it in combination with %c for a cool effect (console output is non-newline by default).

Image output

Since console does not define img, use a background image instead. In addition, the console does not support width and height, using Spaces and font size instead. You can also use padding and line-height instead of width and height.

To avoid the hassle, try the console-image plugin.

3. Information grouping

1: <! DOCTYPE HTML > 2: < HTML > 3: <head> 4: <title> Common console command </title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.group("First set of information"); 10:11: the console. The log ("Group 1 # 1: My Blog (http://www.ido321.com)"); 12:13: the console. The log ("The first set of the second: CSDN (http://blog.csdn.net/u011043843)"); 14:15: the console. GroupEnd (); 16:17: the console. The group,"Second set of messages"); 18:19: the console. The log ("Group 1: Program lovers QQ Group: 259280570"); 20:21: the console. The log ("Group two, Number two: Welcome to the club."); 22:23: the console groupEnd (); 24: </script> 25: </body> 26: </html>Copy the code

Effect:

4. View object information

Console.dir () displays all of an object’s properties and methods.

   1: <script type="text/javascript">
   2:         var info = {
   3:             blog:"http://www.ido321.com",
   4:             QQGroup:259280570,
   5:             message:"Program lovers welcome to join us."6:}; 7: console.dir(info); 8: </script>Copy the code

Effect:

Display the contents of a node

Console.dirxml () is used to display the HTML/XML code contained in a node of the web page.

1: <! DOCTYPE HTML > 2: < HTML > 3: <head> 4: <title> Common console command </title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <div id="info"> 9: <h3> My blog: www.ido321.com</h3> 10: <p> program enthusiasts :259280570, welcome you to join </p> 11: </div> 12: <scripttype="text/javascript">
  13:         var info = document.getElementById('info');
  14:         console.dirxml(info);
  15:     </script>
  16: </body>
  17: </html>
Copy the code

Effect:

6. Determine whether the variable is true

Console.assert () is used to determine whether an expression or variable is true. If the result is no, a message is printed to the console and an exception is thrown.

   1: <script type="text/javascript"< span style = "max-width: 100%; clear: both; min-height: 1em; 3: the console. Assert (result); 4: var year = 2014; 5: console.assert(year == 2018); 6: </script>Copy the code

1 is a non-zero value, true; The second judgment is false and displays an error message on the console

Trace the call trace of the function.

Console.trace () is used to trace function calls.

   1: <script type="text/javascript"> 2: /* How the function is called, just add console.trace() to it */ 3:functionadd(a,b){ 4: console.trace(); 5:returna+b; Var x = add3(1,1); 8:function add3(a,b){returnadd2(a,b); } 9:function add2(a,b){returnadd1(a,b); } 10:function add1(a,b){returnadd(a,b); } 11: </script>Copy the code

Console output:

8. Timing function

Console.time () and console.timeend (), which display the running time of the code.

   1: <script type="text/javascript"> 2: the console. Time ("Console timer one"); 3:for(var i=0; i<1000; i++){ 4:for(var j=0; j<1000; J++){} 5:} 6: console.timeEnd("Console timer one");
   7: </script>
Copy the code

The running time is 38.84ms

Performance analysis of console.profile()

Profiler is a method of analyzing the running time of various parts of a program to find bottlenecks, using console.profile().

   1: <script type="text/javascript"> 2:function All(){ 3: alert(11); 4:for(var i=0; i<10; i++){ 5: funcA(1000); 6:} 7: funcB (10000); 8:} 9:10:functionfuncA(count){ 11:for(var i=0; i<count; I++){} 12:} 13: 14:functionfuncB(count){ 15:for(var i=0; i<count; I++){} 16:} 17: 18: console.profile('Performance analyzer'); 19: All (); 20: the console profileEnd (); 21: </script>Copy the code

The output is shown as follows:

other

From the console. The log



https://github.com/dwqs/blog/issues/32