JavaScript Tools--Console detailed

I. Commands to display information

Console.log (); Console input does not output in Web pages

Console.info (); General Information

Console.debug (); Debug information

Console.warn (); Warning prompt

Console.error (); Error hints

"Console.log ();" Can be used to replace "alert ();" or "document.write ();" For example, write to "Console.log" ("Hello World") in a Web page; "Then it will be entered 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

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

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

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

The%o placeholder, which you can use to view the inside of an object. For example, there is an object such as:

var dog = {};

Dog.name = "Mao";

Dog.color = "Yellow";

Then, use the o% placeholder for it:

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

Third, group 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, second article");

Console.groupend ();

Console.group ("Second set of Information");

Console.log ("second group first");

Console.log ("second group, second section");

Console.groupend ();

Iv. Console.dir (); (Displays 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 it:

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

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 a node

VI, Console.assert (); (used to determine whether an expression or variable is true.) If the result is no, output a corresponding message in the console and throw an exception)

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 a function)

/* An addition function */

function Add (A, b) {

return a+b;

}

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

function Add (A, b) {

Console.trace ();

return a+b;

}

Assume that the calling code for this function is as follows:

var x = ADD3 (n);

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 track of Add () is displayed, from top to bottom in order of Add (), Add1 (), ADD2 (), ADD3 ()

Viii. Console.time (); and Console.timeend (); (used to display the code's run time)

Console.time ("Timer one");

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

for (Var j=0;j<1000;j++) {}

}

Console.timeend ("Timer one");

Nine, performance analysis

Performance analysis (Profiler) is the analysis of the various parts of the running time, to find out the bottleneck, the use of the method is Console.profile ();

Suppose there is a function foo (), which calls the other two functions Funca () and FUNCB (), where Funca () calls 10 times, FUNCB () calls 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 12 functions for a total of 2.656 milliseconds. where Funca () runs 10 times, takes 1.391 milliseconds, has a minimum run time of 0.123 milliseconds, a maximum of 0.284 milliseconds, an average of 0.139 milliseconds, and FUNCB () runs 1 times and takes 1.229ms milliseconds.

In addition to using the "console.profile ();" Method, Firebug also provides an "overview" (Profiler) button. The first time you click on the button, "profiling" starts, you can do something about the Web page (such as an AJAX operation), and then click the button for the second time, "profiling" ends, and all the operations that are caused by the operation are analyzed for performance.

Ten, the Properties menu

After the console panel name, there is an inverted triangle, which displays the Properties menu when clicked.

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

It is useful here to show "XMLHttpRequests", which is to show Ajax requests. When selected, all AJAX requests for the Web page are displayed in the console panel.

For example, click on a Yui example, the console will tell us that it sends a GET request in AJAX mode, HTTP request and response header information and content body, can also be seen.

JavaScript Tools--Console detailed