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...])

is used to output error information, usage and common

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

This is an interesting method, which allows the statements output by the console to produce different levels of nesting relationships. A

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('回到第一层');

Output result:

The similar method to

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...])

This method is the same as the

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

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

console.table()

can output the incoming object or array in table form. Compared with traditional tree output, this The output scheme is more suitable for objects or arrays whose internal elements are neatly arranged, otherwise there may be a lot of undefined.

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

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

You can also

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

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

console.profile([profileLabel])

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

console.profile()

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:

console.time(name)

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(object[, object...])

输出参数的内容，作为警告提示。

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

占位符

console对象上的五个直接输出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。

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

还有一种特殊的标示符%c，对输出的文字可以附加特殊的样式，当进行大型项目开发的时候，代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息，比如常见的招聘信息和个人介绍啥的。

输出结果：<span class="hljs-built_in">console.log(<span class="hljs-string">'%cMy name is classicemi.', <span class="hljs-string">'color: #fff; background: #f40; font-size: 24px;');</span></span></span>

%c标示符可以用各种 CSS 语句来为输出添加样式，再随便举个栗子，background属性的url()中添加图片路径就可以实现图片的输出了，各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~

【推荐学习：javascript高级教程】

 网友补充：

1.console.debug() 用于输出输出debug的信息。

2.console.timeStamp() 用于标记运行时的timeline信息。

3.console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）。

4.console.clear() 清空控制台的内容（当然你可以用快捷键ctrl+L）。

5.$0 可以在控制台输出在Elements面板选中的页面元素。

6.$_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果。

7.$x 可以用xPath的语法来获取页面上的元素。 

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!