Firefox firebug console graphics and text introduction

Firebug is a powerful tool for web development, which can greatly enhance the efficiency.

But it's not easy to get started with. I have translated an introductory guide to Firebug, which introduces some basic uses. Today, continue to introduce its advanced usage.

===================================

Firebug Console Detailed

Author: Ruan Yi Feng

Console (console) is the first panel of Firebug, and the most important panel, the main role is to display the Web page loading process generated various types of information.

A command to display information

Firebug has a built-in console object that provides 5 methods for displaying information.

The simplest method is Console.log (), which can be used instead of alert () or document.write (). For example, when you use Console.log ("Hello World") in a Web script, the console automatically displays the following when you load it.

In addition, according to the different nature of the information, the console object also has 4 ways of displaying information, namely General Information Console.info (), Error-console.debug (), Warning Console.warn (), Error prompts Console.error ().

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

The code is as follows	Copy Code
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 contents.

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

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

The code is as follows	Copy Code
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:

The code is as follows	Copy Code
var dog = {}; Dog.name = "hairy"; Dog.color = "Yellow";

Then, use the o% placeholder for it.

The code is as follows	Copy Code
Console.log ("%o", dog);

Third, grouped display

If there are too many messages, you can display them in groups, using Console.group () and Console.groupend ().

The code is as follows	Copy Code
Console.group ("First group 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 ();

Click on the group header to collapse or expand the group information.

Iv. Console.dir ()

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

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

The code is as follows	Copy Code
Dog.bark = function () {alert ("Woof");};

Then, the contents of the object are displayed,

The code is as follows	Copy Code
Console.dir (dog);

V. Console.dirxml ()

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

For example, to get a table node first,

The code is as follows	Copy Code
var table = document.getElementById ("table1");

Then, display the code that the node contains.

The code is as follows	Copy Code
Console.dirxml (table);

VI. Console.assert ()

Console.assert () is used 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.

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

The code is as follows	Copy Code
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 the function.

For example, there is an adder function.

The code is as follows	Copy Code
function Add (a,b) { return a+b; }

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

The code is as follows	Copy Code
function Add (a,b) { Console.trace (); return a+b; }

Suppose the calling code for this function is as follows:

The code is as follows	Copy Code
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 ().

Eight, timing function

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

The code is as follows	Copy 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 the time to analyze the various parts of the program, to find 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.

The code is as follows	Copy Code
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 ().

The code is as follows	Copy Code
Console.profile (' Performance Analyzer One '); Foo (); Console.profileend ();

The console displays a performance analysis table, as shown in the following figure.

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 using the 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.

The more useful here is "show xmlhttprequests", which is the display of 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.

[Reference Document]