The console. group () function in JavaScript details _ javascript skills

This article mainly introduces the console in JavaScript. the group () function is described in detail. when too many program debugging logs are generated, the console can be used. the group () function is called to display group information. For more information about how to use the console, see. log () or other log-level console output functions, there is no hierarchical relationship between log output. When the program outputs a large number of logs, this limitation will bring a lot of trouble. To solve this problem, you can use console. group (). The following code is used as an example:

The Code is as follows:

Function doTask (){
DoSubTaskA (1000 );
DoSubTaskA (100000 );
Console. log ("Task Stage 1 is completed ");
DoSubTaskB (10000 );
Console. log ("Task Stage 2 is completed ");
DoSubTaskC (1000,10000 );
Console. log ("Task Stage 3 is completed ");
}
Function doSubTaskA (count ){
Console. log ("Starting Sub Task ");
For (var I = 0; I }

Function doSubTaskB (count ){
Console. log ("Starting Sub Task B ");
For (var I = 0; I }

Function doSubTaskC (countX, countY ){
Console. log ("Starting Sub Task C ");
For (var I = 0; I For (var j = 0; j }
}

DoTask ();

The output result in the Firebug console is:

As you can see, there is no difference in the log output with a certain hierarchical relationship when it is displayed. To add a hierarchical relationship, you can group log output, insert console. group () to the START group, and insert console. groupEnd () to the end group ():

The Code is as follows:

Function doTask (){
Console. group ("Task Group ");
DoSubTaskA (1000 );
DoSubTaskA (100000 );
Console. log ("Task Stage 1 is completed ");
DoSubTaskB (10000 );
Console. log ("Task Stage 2 is completed ");
DoSubTaskC (1000,10000 );
Console. log ("Task Stage 3 is completed ");
Console. groupEnd ();
}
Function doSubTaskA (count ){
Console. group ("Sub Task A Group ");
Console. log ("Starting Sub Task ");
For (var I = 0; I Console. groupEnd ();
}

Function doSubTaskB (count ){
Console. group ("Sub Task B Group ");
Console. log ("Starting Sub Task B ");
For (var I = 0; I Console. groupEnd ();
}

Function doSubTaskC (countX, countY ){
Console. group ("Sub Task C Group ");
Console. log ("Starting Sub Task C ");
For (var I = 0; I For (var j = 0; j }
Console. groupEnd ();
}

DoTask ();

After the console. group () Statement is inserted, the output result in the Firebug console is:

Browser support

Like console. group () and console. log (), it is well supported in browsers with debugging tools. All major browsers support this function.