Firebug console detailed
Firebug is a powerful tool for web development, which can greatly improve work efficiency.
However, it is not easy to get started. I once translated a “Firebug Getting Started Guide” and introduced some basic usage. Today, continue to introduce its advanced usage.
===================================
Firebug console detailed
Author: Ruan Yifeng
The Console is the first and most important panel of Firebug. Its main function is to display all kinds of information generated during web page loading.
1. Commands to display information
Firebug has a built-in console object that provides 5 methods to display information.
The simplest method is console.log(), which can be used to replace alert() or document.write(). For example, if you use console.log(“Hello World”) in a web script, the console will automatically display the following content when it is loaded.
In addition, according to the different nature of the information, the console object has 4 ways to display information, which are general information console.info(), debugging information console.debug(), warning prompt console.warn(), error prompt console. error().
For example, insert the following four lines in the web page script:
console.info(“This is info”);
console.debug(“This is debug”);
console.warn(“This is warn”);
console.error(“This is error”);
When loading, the console will display the following.
It can be seen that there are different icons in front of different types of information, and there are hyperlinks behind each information, click to jump to the corresponding line of the source code of the webpage.
Two, placeholder
The above five methods of the console object can all use printf style placeholders. However, there are relatively few types of placeholders, only four characters (%s), integers (%d or %i), floating-point numbers (%f) and objects (%o) are supported.
for example,
console.log(“%dyear%dmonth%dday”,2011,3,26);
console.log(“Pi is %f”, 3.1415926);
The %o placeholder can be used to view the internal situation of an object. For example, there is such an object:
var dog = {};
dog.name = “Da Mao”;
dog.color = “Yellow”;
Then, use the o% placeholder for it.
console.log(“%o”,dog);
Three, group display
If there is too much information, it can be displayed in groups. The methods used are console.group() and console.groupEnd().
console.group(“The first group of information”);
console.log(“First Group First”);
console.log(“The first group of the second”);
console.groupEnd();
console.group(“Second group information”);
console.log(“The first item in the second group”);
console.log(“The second group of the second”);
console.groupEnd();
Click the group title, the group information will be collapsed or expanded.
Four, console.dir()
console.dir() can display all the properties and methods of an object.
For example, add a bark() method to the dog object in the second section.
dog.bark = function(){alert(“汪汪汪”);};
Then, display the content of the object,
console.dir(dog);
Five, console.dirxml()
console.dirxml() is used to display the html/xml code contained in a certain node (node) of the webpage.
For example, first get a table node,
var table = document.getElementById(“table1”);
Then, display the code contained in the node.
console.dirxml(table);
Six, 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 on the console and an exception is thrown.
For example, the results of the following two judgments are both negative.
var result = 0;
console.assert( result );
var year = 2000;
console.assert(year == 2011 );
Seven, console.trace()
console.trace() is used to trace the call trace of the function.
For example, there is an adder function.
function add(a,b){
return a+b;
}
I want to know how this function is called, just add the console.trace() method to it.
function add(a,b){
console.trace();
return a+b;
}
Assume that the calling code of 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 trace of add() will be displayed, which are add(), add1(), add2(), add3() from top to bottom.
8. Timing function
console.time() and console.timeEnd() are used to display the running 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 to analyze the running time of each part of the program to find out where the bottleneck is. The method used is console.profile().
Suppose there is a function Foo(), which calls two other functions funcA() and funcB(), among which funcA() is called 10 times and funcB() is called once.
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, you can analyze the performance of Foo().
console.profile(‘Performance Analyzer One’);
Foo();
console.profileEnd();
The console will display a performance analysis table, as shown in the figure below.
The title bar indicates that a total of 12 functions were run, which took a total of 2.656 milliseconds. Among them, funcA() runs 10 times and takes 1.391 milliseconds, the shortest run time is 0.123 milliseconds, and the longest run time is 0.284 milliseconds, with an average of 0.139 milliseconds; funcB() runs 1 time and takes 1.229 milliseconds.
In addition to using the console.profile() method, firebug also provides a “Profiler” button. Click the button for the first time, “performance analysis” starts, you can perform certain operations on the web page (such as ajax operation), and then click the button for the second time, “performance analysis” ends, and all calculations caused by this operation will be performed Performance analysis.
10. Properties menu
Behind the name of the console panel, there is an inverted triangle. After clicking it, the properties menu will be displayed.
By default, the console only displays Javascript errors. If Javascript warning, CSS error, and XML error are all selected, the relevant prompt information will be displayed.
The more useful one here is “Display XMLHttpRequests”, that is, display ajax requests. After selected, all ajax requests of the web page will be displayed in the console panel.
For example, if you click on a YUI example , the console will tell us that it sent a GET request in ajax mode, and the header information and content body of the http request and response can also be seen.
[references]
* Firebug Tutorial-Logging, Profiling and CommandLine (Part I)
* Firebug Tutorial-Logging, Profiling and CommandLine (Part II)
(over)