JavaScript Console detailed _javascript tips

A command to display information

Console.log (); The console input page does not output

Console.info (); General Information

Console.debug (); Error-Removal information

Console.warn (); Warning Tips

Console.error (); Error tips

"Console.log ()" Can be used to replace "alert ();" or "document.write ();" For example, write "Console.log" in a Web page ("Hello World"), "and then enter it in the console, but not in the Web page."

We insert the following code in the code:

Console.info ("This is Info");

Console.debug ("This is Debug");

Console.warn ("This is warn");

Console.error ("This is Error");

Opening the console after loading will see something like this:

Second, placeholder

The top 5 methods of the console object can use printf-style placeholders. However, there are fewer types of placeholders, only four of characters (%s), integers (%d or%i), floating point numbers (%f), and Objects (%O) are supported. Like what:

Console.log ("%d years%d months%d days", 2011,3,26);

Console.log ("Pi is%f", 3.1415926);

%o placeholder that you can use to view the internal situation of an object. For example, there is an object:

var dog = {};

Dog.name = "hairy";

Dog.color = "Yellow";

Then, use the o% placeholder for it:

Console.log ("%o", dog);

Third, grouped display

Console.group (); Console.groupend ();　　　　(These two methods are used in pairs)
console.group ("First set of Information");
Console.log ("First Group One");
Console.log ("First group II");
Console.groupend ();
Console.group ("second group Information");
Console.log ("Group II first");
Console.log ("second group II");
Console.groupend ();

Four, Console.dir (); (Show all properties and methods of an object)

For example, now for the second section of the Dog object, add a bark () method and then use "DIR ();" To display:

Dog.bark = function () {alert ("Woof");};

Console.dir (dog);

V. Console.dirxml (); (Get all the Html/xml code that a node contains)

var table = document.getElementById ("table1"); Get node

Console.dirxml (table); Show all the code for the node

VI, Console.assert (); (to determine whether an expression or variable is true.) If the result is no, a corresponding message is printed on the console and an exception is thrown.

var result = 0;

Console.assert (result); False

var year = 2000;

Console.assert (Year = = 2011); False

Vii. Console.trace (); (used to track the call path of the function)

/* An addition function */

function Add (a,b) {

return a+b;

}

I want to know how this function is invoked, and add the Console.trace () method to it:

function Add (a,b) {

Console.trace ();

return a+b;

}

Suppose the calling code for this function is as follows:

var x = add3 (1,1);

function Add3 (a,b) {return add2 (a,b);}

function Add2 (a,b) {return add1 (a,b);}

function Add1 (a,b) {return Add (a,b);}

After running, the call trajectory for add () is displayed, from top to bottom, add (), Add1 (), ADD2 (), ADD3 ()

Viii. Console.time (); and Console.timeend (); (used to display the elapsed time of the code)

Console.time ("Timer One");

for (Var i=0;i<1000;i++) {for

(var j=0;j<1000;j++) {}

}

console.timeend ("Timer one");

IX. Performance Analysis

Performance analysis (Profiler) is to analyze the operating time of various parts of the program, to find out the bottleneck, the method used is console.profile ();

Suppose there is a function foo (), which calls the other two functions Funca () and FUNCB (), where Funca () is invoked 10 times and FUNCB () is invoked 1 times.

function Foo () {for

(var i=0;i<10;i++) {Funca (1000);}

FUNCB (10000);

}

function Funca (count) {for

(var i=0;i<count;i++) {}

}

function FUNCB (count) {for

(var i=0;i<count;i++) {}

}

Then analyze the running performance of "Foo ();":

Console.profile (' Performance Analyzer One ');

Foo ();

Console.profileend ();

The title bar prompts you to run a total of 12 functions, which takes 2.656 milliseconds. The Funca () runs 10 times, takes 1.391 milliseconds, the shortest run time 0.123 milliseconds, the longest 0.284 milliseconds, the average 0.139 milliseconds, and FUNCB () runs 1 times, and takes 1.229ms milliseconds.

In addition to the use of "console.profile ()"; Method, Firebug also provides an "overview" (Profiler) button. The first time you click the button, "Performance analysis" begins, you can do some sort of action on the Web page (such as Ajax), and then click the button for the second time, "profiling" ends, and all the operations that the operation throws will perform performance analysis.

Ten, the Property menu

After the name of the console panel, there is an inverted triangle, the property menu is displayed when clicked.

By default, the console displays only JavaScript errors. If you select JavaScript warnings, CSS errors, and XML errors are sent, the associated prompts are displayed.

What's more useful here is to show "xmlhttprequests", which is to display AJAX requests. When selected, all AJAX requests for the Web page will be displayed in the console panel.

For example, click on a Yui example, the console will tell us that it uses Ajax way to send a GET request, HTTP request and response header information and content body, also can see.

The above mentioned is the entire content of this article, I hope you can enjoy.