Firebug Console Detailed

Author: Ruan Yi Feng

The console is the first panel of the Firebug and the most important panel, the main function is to display the page loading process to generate a variety of information.

I. Commands to display information

The Firebug contains a console object that provides 5 ways to display information.

The simplest method is Console.log (), which can be used to replace alert () or document.write (). For example, using Console.log ("Hello World") in a Web script, the console will automatically display the following when it loads.

In addition, depending on the nature of the information, the console object also has 4 ways to display information, namely General Information Console.info (), Error console.debug (), Warning Console.warn (), Error message Console.error ().

For example, insert the following four lines in the Web script:

Console.info ("This is Info");

Console.debug ("This is Debug");

Console.warn ("This is warn");

Console.error ("This is Error");

When loaded, the console displays the following content.

Can see, different nature of the information in front of the different icons, and each message has a hyperlink behind, click to jump to the corresponding line of the source page.

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

If there is too much information, you can display them in groups, using Console.group () and Console.groupend ().

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 ();

Click the group header, and the group information is collapsed or expanded.

iv. Console.dir ()

Console.dir () can display all properties and methods of an object.

For example, now for the second section of the Dog object, add a bark () method.

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

Then, the contents of the object are displayed,

Console.dir (dog);

Wu, Console.dirxml ()

Console.dirxml () is used to display the Html/xml code contained in a node of a Web page.

For example, get a table node first,

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

Then, the code that the node contains is displayed.

Console.dirxml (table);

Liu, Console.assert ()

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

For example, the results of the following two judgments are no.

var result = 0;

Console.assert (result);

var year = 2000;

Console.assert (Year = = 2011);

vii. console.trace ()

Console.trace () is used to track the call path of a function.

For example, there is an adder function.

function Add (A, b) {

return a+b;

}

I want to know how this function is called, and add 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 ().

Eight, chronograph function

Console.time () and Console.timeend () are 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");

Nine, performance analysis

Performance analysis (Profiler) is the analysis of the various parts of the running time, 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 () 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++) {}

}

You can then analyze the running performance of Foo ().

Console.profile (' Performance Analyzer One ');

Foo ();

Console.profileend ();

The console displays a performance analysis table, as shown below.

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.

10. 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.

What's more useful here is "show xmlhttprequests", which is the AJAX request. 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.

[References]

* Firebug tutorial-logging, Profiling and CommandLine (part I)

* Firebug tutorial-logging, Profiling and CommandLine (part II)

Finish

---------------------===========

All along, due to the lack of standardized debugging environment and a strong development platform. In the fields of HTML, CSS, and JavaScript, people have to devote a lot of time and effort to boring tests. However, the advent of Firebug greatly saves developer time for Web developers. The JavaScript console, in particular, keeps the HTML pages in the hands of developers alive.

We usually contact the most, is Console.log, Console.info and Console.error: Whether it's a direct output of JavaScript, or a actionscript-javascript in HTML with ActionScript mates, these methods work well. You only need a simple console.log (somevariable), or a line in ActionScript Com.flash.external.ExternalInterface.call ("Console.log", somevariable); You can see the result of the variable (expression).

However, the console actually provides many powerful API interfaces. Many friends don't seem to know yet. Here are a few of the many I know and welcome to add.

Console.dir (Anyobject) – The structure of the direct output object, example as shown:

Console.dirxml (Anydomnode) – similar to the above example, output a section of HTML nodes in indented format, as shown in figure:

console.time (slugname) –console.timeend (Slugname) – records the execution time of a timestamp, which can be used to optimize a looping statement, as shown in the figure:

Console.group () –console.groupend () – packet output, see the picture to understand:

This article from: http://www.awflasher.com/blog/archives/1625