JavaScript Console Usage Daquan

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 = {  ' Classicemi ',  ' HUST ',  ' 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 (' This is the first layer '); Console.group (); Console.log (' This is the second layer '); Console.log (' still second layer '); Console.group (); Console.log (' third layer '); Console.groupend (); Console.log (' back to the second layer '); console.groupend (); Console.log (' back to the first layer ');

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.

// Output 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: {    ' foo ',    ' $ '  },  bar: {    ' bar ',     ' a '  }}; var arr = [  [' foo ', ' $ '],  [' Bar ', ']];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 ...

// Output 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 (' performance Analysis ');p arent (); 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 (' timer ');  for (var i = 0; i < i++) {  for (var j = 0; J < K; J + +) {}}consol E.timeend (' timer ');

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.

// output 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 is%d%d months ', ' Today ', ' 4, '), Console.log (' pi is%f ', 3.14159); var obj = {  ' 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 ~ ~

Users add:

1. console.debug() information for output and output debug.

2. console.timeStamp() Timeline information for marking the runtime.

3. console.memory used to display the memory information used at the moment (this is a property rather than a method).

4. console.clear() Clear the contents of the console (of course you can use the shortcut key Ctrl+l).

5. The $0 page elements selected in the elements panel can be output in the console.

6. $_ indicate the last command you typed in the console, you can also use the shortcut key "Up ARROW key" to achieve the same effect.

7. $x You can use the XPath syntax to get the elements on the page.

Reference documents

1. Https://developer.mozilla.org/en-US/docs/Web/API/console
2. Http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html
3. Http://blog.segmentfault.com/civerzhu/1190000000425386
4. Http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

Article Source: 1190000000481884

JavaScript Console Usage Daquan