In addition to Console. log (), more Javascript Debugging commands are provided,

In addition to Console.log (), more Javascript debugging commands,

The Console object provides access to the browser console (such as Firefox's Web Console). It works differently in different browsers, but here are some of the interface features provided by the Metropolis.
The Console object can be accessed in any global object, such as Window, WorkerGlobalScope and special definitions provided through the property workbench.
It is defined as Window.Console by the browser, and can also be called by a simple Console.

The most common method is Console.log (), which is to output content on the console. When I first started to learn the front end, I saw that everyone used Console.log (). I have hardly seen any other usage of Console. Is there really no other usage of Console? After checking it, I found that the Console is still very powerful. As for why I rarely see anyone use it, it may be because it has been deleted after use. Record other usages of Console here.

Note: Because the Console object provides access to the browser console, the support and presentation in different browsers may be different, but the debugging content is only seen by our developers, so ensure that the development environment can use these methods. Now, the following demos are all for Chrome.

Classification output

Output of different categories of information

console.log ('Text information');
console.info ('Prompt information');
console.warn ('Warning message');
console.error ('Error message');
Grouped output

Use Console.group () and Console.groupEnd () to wrap the group content.

You can also use Console.groupCollapsed () instead of Console.group () to generate collapsed groups.

console.group ('First group');
 console.log ("1-1");
 console.log ("1-2");
 console.log ("1-3");
console.groupEnd ();
console.group ('Second group');
 console.log ("2-1");
 console.log ("2-2");
 console.log ("2-3");
console.groupEnd ();
Console.group () can also be nested

console.group ('First group');
 console.group ("1-1");
  console.group ("1-1-1");
   console.log ('content');
  console.groupEnd ();
 console.groupEnd ();
 console.group ("1-2");
  console.log ('content');
  console.log ('content');
  console.log ('content');
 console.groupEnd ();
console.groupEnd ();
console.groupCollapsed ('Second group');
 console.group ("2-1");
 console.groupEnd ();
 console.group ("2-2");
 console.groupEnd ();
console.groupEnd ();
Table output

Use console.table () to output the incoming object or array as a table. Suitable for neatly arranged elements

var Obj = {
 Obj1: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj2: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj3: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 },
 Obj4: {
  a: "aaa",
  b: "bbb",
  c: "ccc"
 }
}
console.table (Obj);
var Arr = [
 ["aa", "bb", "cc"],
 ["dd", "ee", "ff"],
 ["gg", "hh", "ii"],
]
console.table (Arr);
View objects

Use Console.dir () to display all the properties and methods of an object
Console.dir () and Console.log () have the same effect in Chrome

var CodeDeer = {
 nema: 'CodeDeer',
 blog: 'www.xluos.com',
  
}
console.log ("console.dir (CodeDeer)");
console.dir (CodeDeer);
console.log ("console.log (CodeDeer)");
console.log (CodeDeer);
View node

Use Console.dirxml () to display all the properties and methods of an object
Console.dirxml () and Console.log () have the same effect in Chrome

Node information of Baidu's homepage logo
Conditional output

Using console.assert (), conditional output is possible.

When the first parameter or return value is true, no content is output When the first parameter or return value is false, output the following content and throw an exception

console.assert (true, "You will never see me");
console.assert ((function () {return true;}) (), "You will never see me");
console.assert (false, "You can see me");
console.assert ((function () {return false;}) (), "You can see me");
Count output

Use Console.count () to output the content and the number of times it is called

(function () {
 for (var i = 0; i <3; i ++) {
  console.count ("Number of runs:");
 }
}) ()
Trace the call stack

Use Console.trace () to track the process of the function being called. There are many calling processes in complex projects. Use this command to help you clear.

function add (a, b) {
 console.trace ("Add function");
 return a + b;
}
function add3 (a, b) {
 return add2 (a, b);
}
function add2 (a, b) {
 return add1 (a, b);
}
function add1 (a, b) {
 return add (a, b);
}
var x = add3 (1, 1);
Timing function

Use Console.time () and Console.timeEnd () to wrap the code snippet that needs to be timed, and output the event that runs this code.

The parameters in Console.time () serve as the identifier of the timer and are unique. The parameter in Console.timeEnd () ends the timer with this flag and returns the running time in milliseconds. Up to 10,000 timers can be running at the same time.

console.time ("Time to loop 1000 times in Chrome");
for (var i = 0; i <1000; i ++)
{
}
console.timeEnd ("Time to loop 1000 times in Chrome");
Performance analysis

Use Console.profile () and Console.profile () to perform performance analysis and view the time consumed by each part of the code, but I did not find where to view the analysis report generated by these two methods in the debugging tool that comes with Chrome. Other debugging tools should be needed.

Interesting Console.log ()

Finally, let's introduce the powerful Console.log (). This method has many uses (the usage of other output methods, such as error (), etc., can refer to log ()).

1. Prompt output

Prompt information can be added to the output objects and variables to increase the recognition

var ans = 12345;
console.log ("This is the value of the temporary variable ans:", ans);
Second, formatted output

Placeholder Meaning% s String output% d or% i Integer output% f Floating point output% o Print javascript object, can be integer, string and JSON data

Sample:

var arr = ["小 明", "小红"];
console.log ("Welcome two new classmates% s and% s", arr [0], arr [1]);
console.log ("Integer part of pi:% d, with decimals:% f", 3.1415, 3.1415);
Three, custom style

Use% c to define the style for the print content, add% c before outputting the information, and write the standard css style afterwards, you can add style to the output information

console.log ("% cMy stylish message", "color: red; font-style: italic");
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 ");
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;
console.log ('% cMy name is classicemi.', 'color: #fff; background: # f40; font-size: 24px;');
to sum up

Console is used in many ways, and some of them are very practical during debugging, which can save a lot of time. Of course, I know that debugging is better with breakpoint debugging, but it is also very useful to use "printf method" for small problems (funny face).