Do you really know the console?

For front-end developers, when it is necessary to monitor the value of certain expressions or variables during development, it can be cumbersome to use debugger, instead of outputting values to the console for easy debugging. The most commonly used statements are console.log(expression) .

However, for the object as a global object console , most people do not understand the comprehensive, of course, I also, after my study, now for this can play console JS object has a certain understanding, want to share with you.

The Console object console.log() has many other methods besides the one most commonly used by developers. Flexible use of these methods can add a lot of convenience to the development process.

The Console method

Console.assert (expression, object[, Object ...])

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

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

Console.count ([Label])

The number of times the output is executed to the row, and 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)

Outputs the properties of the incoming object, including the properties of the child object, as a list, for example:

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

Output:

Console.error (object[, Object ...])

Used to output error messages, the same as common console.log , the difference is that the output is marked as the wrong style for easy resolution. Output Result:

Console.group

This is an interesting approach, which allows the console output statements to produce different levels of nesting relationships, each of which console.group() adds a layer of nesting, instead of a layer of nested methods that can be used console.groupEnd() . Language expression is 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:

And console.group() similar methods are the console.groupCollapsed() same, different points are nested output content is collapsed state, in a large section of content output when using this method can make the output layout is not too long ... It

Console.info (object[, Object ...])

This method, as previously mentioned console.error , is used to output information, nothing special.

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

Console.table ()

You can output an incoming object, or an array, in tabular form, which is more suitable for objects or arrays with internal elements, than the traditional tree output, or there may be many 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);

can also

Console.log (object[, Object ...])

This needless to say, this should be the most common developers, do not know who rules ...

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

Console.profile ([Profilelabel])

It's a pretty big thing to use for performance analysis. In JS development, we often evaluate the performance of a segment code or a function. It is possible to print the time manually in the function, but it is not flexible and has errors. With the help of the console and console.profile() methods we can easily monitor the performance of the operation.

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 in the Profiles panel the elapsed time during the operation of the above code.

The performance optimization of the page loading process is an important part of the front-end development, using the Profiles panel of the console to monitor all JS operation using the same way as a VCR, the console will record the operation of the process. , the record and stop buttons are available on the toolbar.

Recording results:

Console.time (name)
Timers, which can console.time() output the run time of paired and console.timeEnd() between codes to the console, and the name parameters can be used as label names.

console.time(‘计时器‘);for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {}}console.timeEnd(‘计时器‘);

(just actually wrote a layer of loops, the result of computer fan purring Ah, the browser is not responding directly ...) ）

Console.trace ()

console.trace()The calling procedure used to trace a function. In large projects, especially framework development, the function's call path can be very complex, and the console.trace() method can clearly output the called process of the function to the console.

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

Output:

Console.warn (object[, Object ...])

The contents of the output parameter as a warning prompt.

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

Placeholder

consoleThe five direct output methods on an object,,, console.log() console.warn() console.error() console.exception() (equivalent), console.error() and console.info() , can use placeholders. There are four supported placeholders for characters ( %s ), integers ( %d or %i ), floating-point numbers (), %f and Objects ( %o ).

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

There is also a special identifier %c , the output of the text can be attached to a special style, when the development of large projects, the code may have a lot of other developers added to the console statements. Developers can customize their output to make it easy for them to see what they're looking for in a dazzling output. Imaginative children's shoes can also produce creative output information, such as common recruitment information and what the individual describes.

Output Result:

console.log(‘%cMy name is classicemi.‘, ‘color: #fff; background: #f40; font-size: 24px;‘);

%cThe identifier can use a variety of CSS statements to add style to the output, and then give a chestnut, the background attributes of the url() image path can be added to achieve the output of the picture, you front-end children's shoes quickly display your CSS God skills to play the console bad bar ~ ~

Transferred from: http://segmentfault.com/a/1190000000481884

Do you really know the console?