What is the usage of console in javascript?

The console usage of JavaScript is: 1. "console.assert(expression, object[, object...])" syntax; 2. "console.count([label])" syntax, etc.

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

For front-end developers, when they need to monitor the values ​​of certain expressions or variables during the development process, using the debugger will be too cumbersome. Instead, the values ​​will be output to the console for easy debugging. . The most commonly used statement is console.log(expression).

However, most people do not fully understand the console object as a global object. Of course, I do too. After some study, I now understand that this can be played I have a certain understanding of the JS object that is transferred to the console, and I would like to share it with you.

In addition to console.log(), which is the most commonly used method by developers, the console object has many other methods. Flexible use of these methods can add a lot of convenience to the development process.

Console method

console.assert(expression, object[, object...])

Receives at least two parameters, the first When the value of a parameter or the return value is false, the value of the subsequent parameter will be output on the console. For example:

console.assert(1 == 1, object); // 无输出，返回 undefined
console.assert(1 == 2, object); // 输出 object

console.count([label])

Output the number of times the line is executed. The optional parameter label can be output before the number of times, for example:

(function() {  for (var i = 0; i < 5; i++) {
    console.count('count');
  }
})();// count: 1// count: 2// count: 3// count: 4// count: 5

console.dir(object)

Output the properties of the incoming object, including the properties of sub-objects, in list form, for example:

var obj = {
  name: 'classicemi',
  college: 'HUST',
  major: 'ei'};
console.dir(obj);

Output:

##console.error(object[, object...])

console .log is the same, but the difference is that the output content will be marked with an error style for easy identification. Output result:

console.group

console.group() will add a layer of nesting. On the contrary, to reduce a layer of nesting, you can use the console.groupEnd() method. The language expression is relatively weak, look at the code:

console.log('这是第一层');
console.group();
console.log('这是第二层');
console.log('依然第二层');
console.group();
console.log('第三层了');
console.groupEnd();
console.log('回到第二层');
console.groupEnd();
console.log('回到第一层');

console.group() is console.groupCollapsed( )The function is the same, but the difference is that the nested output content is in a collapsed state. When a large section of content is output, use this method to prevent the output layout from being too long. . . Bar

console.info(object[, object...])

console.error mentioned before, Used to output information, nothing special.

console.info('info'); // 输出 info

console.table()

var obj = {
  foo: {
    name: 'foo',
    age: '33'
  },
  bar: {
    name: 'bar',
    age: '45'
  }
};var arr = [
  ['foo', '33'],
  ['bar', '45']
];

console.table(obj);
console.table(arr);

Needless to say, this should be It's the most commonly used one by developers, I don't know who specified it. . .

console.log('log'); // 输出 log

This is a very tall thing that can be used for performance analysis. In JS development, we often need to evaluate the performance of a piece of code or a certain function. It is possible to manually print the time in the function, but it is not flexible enough and has errors. With the help of the console and the

method we can easily monitor the running performance. For example, the following code:

function parent() {  for (var i = 0; i < 10000; i++) {
    childA()
  }
}function childA(j) {  for (var i = 0; i < j; i++) {}
}

console.profile('性能分析');
parent();
console.profileEnd();

Then we can see the time consumed during the running of the above code under the Profiles panel.

Performance optimization of the page loading process is an important part of front-end development. Use the profiles panel of the console to monitor the running status of all JS. The usage method is like a video recorder. The console will record the running process. Come down. As shown in the picture, there are record and stop buttons on the toolbar.

Recording result:

Timer, you can pair the console.time( )
The running time of the code between console.timeEnd() is output to the console, and the name parameter can be used as the label name. <pre class="brush:php;toolbar:false">console.time('计时器');for (var i = 0; i &lt; 1000; i++) {  for (var j = 0; j &lt; 1000; j++) {} } console.timeEnd('计时器');</pre>

console.trace()

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

function tracer(a) {
  console.trace();  return a;
}function foo(a) {  return bar(a);
}function bar(a) {  return tracer(a);
}var a = foo('tracer');

console.warn('warn'); // 输出 warn

console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);
console.log('圆周率是%f', 3.14159);var obj = {
  name: 'classicemi'}
console.log('%o', obj);

The above is the detailed content of What is the usage of console in javascript?. For more information, please follow other related articles on the PHP Chinese website!