Firebug is a tool for web front-end development, which is an extension of the Firefox browser. It can be used for debugging JavaScript, viewing the DOM, parsing CSS, monitoring network traffic, and interacting with Ajax. It provides all the functionality needed for almost front-end development. Official website: www.getfirebug.com
How do I get firebug?
Because it is an extension of the Firefox browser, you first need to download the Firefox browser. Readers can access www.mozilla.com to download and install the Firefox browser. Use it to access https://addons.mozilla.org/zh-CN/firefox/collections/mozilla/webdeveloper/after installation is complete
Enter the page shown. Click "Add to Firefox", then click "Install Now" and finally restart the Firefox browser to complete the installation.
Main panelAfter the installation is complete, there will be a bug icon behind the address of the Firefox browser. Click the icon to expand the Firebug console, or you can open the console by using the shortcut key <F12>. Use the CTRL+F12 shortcut key to enable Firebug to open a window independently of the space at the bottom of the Firefox page.
As you can see, the Firebug consists of 7 panels:
Console panel: For logging, overview, error hints, and execution of command lines, but also for Ajax debugging;
HTML panel: For viewing HTML elements, you can edit HTML and change CSS styles in real time, which includes 3 sub-panels, namely the style, layout, and Dom panel;
CSS panel: Used to view all the CSS files on the page, you can dynamically modify the CSS style, because the HTML panel already contains a CSS panel, so the panel will be seldom used;
Script panel: Used to display JavaScript files and their pages, or to display JavaScript debug debugging, including 3 sub-panels, respectively, monitoring, stack and breakpoint;
DOM panel: Used to display all objects on the page;
Network panel: Used to monitor network activity, can help to see the loading of a page, including file download time and file download error information, can also be used to monitor AJAX behavior;
Cookies panel: Used to view and adjust cookies (required to install the Firecookie mentioned in the resources below).
Console Panel1. Console Panel Overview
This panel can be used to log logs or to enter a command line for a script.
2. Logging
Firebug provides several common logging functions as follows:
Console.log: Simple logging;
Console.debug: Record debugging information, and attach the line number of hyperlinks;
Console.error: The error icon is displayed before the message, and a hyperlink to the line number is attached;
Console.info: The message icon is displayed before the message, and a hyperlink to the line number is attached;
Console.warn: Displays a warning icon in slender money, and a hyperlink with a line number.
In a blank HTML page, add the <script> tag to the <body> tab, with the following code:
1 <script type= "Text/javascript" >2 console.log (' This is the log message '); 3 Console.debug (' This is debug message '); 4 Console.error (' This is error message '), 5 console.info (' This is Info message '), 6 console.warn (' This is warn message ' ); 7 </script>After executing the code, you can see the results shown in Firebug, used to debug the program with alert, but console can be used under Firebug.
3. Format string output and multivariable output
This function is similar to the syntax in the C language and can be used in the console logging method.
%s: string%d,%i: Number%f: Floating point%o: Linked object
At the same time, these functions support several variables. The code is as follows:
1 <script type= "Text/javascript" >2 var kid= "Kids", count= "3", man= "Allen"; 3 var sport1= "basketball", sport2= "Badminton", sport3= " Tennis "; 4 Console.log ("%d%s in play ", Count,kid), 5 console.log (count," a ", kid," playing the Game "); 6 Console.log ("%s specializes in sports: ", Man,sport1 , SPORT2,SPORT3); 7 </script>After running the code, the effect looks like this:
The Firebug console also provides additional features such as detecting function execution times, grouping messages, testing drivers, tracking, counting, and viewing JavaScript profiles. More information can be accessed http://getfirebug.com/logging.
4. Sub-menu in the panel
There is a row of sub-menus in the console panel, which are clear, hold, overview, all and so on.
Clear clears the contents of the console. "Keep" is to save the contents of the console, even if the refresh still exists. "All" is the display of all information. The following "error", "Warning", "message", "Debug Info", "Cookies" menu is a classification of all.
The overview menu is used to view the performance of the function. The following example shows the code as follows:
1 <button type= "button" id= "BTN1" > Execution loop 1</button> 2 <button Type= "button" id= "BTN2" > Execute loop 2</button> 3 <button type= "button" id= "Btn3" > Execution Cycle 3</button> 4 <script type= "Text/javascript" > 5 var f1=function () { 6 for (var i =0;i<1000;i++) 7 for (var j=0;j<1000;j++); 8 } 9 function f2 () {10 for (var i =0;i<1000;i++) 11 for (var j=0;j<1000;j++); 12 }13 document.getelementbyid ("Btn1"). onclick=f1;14 document.getelementbyid ("Btn2"). Onclick=f2;15 document.getelementbyid ("Btn3"). Onclick=function () {16 for (var i =0;i <1000;i++) 17 for (var j=0; j<1000;j++);18 }19 </script>
Open the page and display three buttons:
After you open the page, enable the Firebug console panel, and then click the Overview menu, as shown in:
As you can see, there is a line of words, "Overview collection. Click "Overview" again to view the results. , then click Execute Loop 1, execute loop 2, execute loop 3 three buttons at a time, and click the Overview menu again to see the results as shown:
You can see that Firebug shows a very detailed report. This includes information such as the function name of each function, number of calls, percentage of elapsed time, elapsed time, time, average time, minimum time, maximum time, and the number of rows in the file.
5.Ajax Commissioning
The console panel can also be used for Ajax debugging, which can replace the network panel to some extent. For example, if I open a page, I can see this Ajax HTTP request header and server response header information in the Firebug console. For example, it shows the Get method, address, time-consuming, and number of lines of code that call AJAX requests for the Ajax that is used this time. The most important thing is that there are 5 tags, i.e. parameters, header information, response, HTML, Cookies. The first tab is used to view the parameters passed to the server, the Second tab is used to view the response header information and the request header information, the Third tab is used to view the contents returned by the server, and the Fourth tab is to view the HTML structure returned by the server; The Fifth tab is used to view the corresponding cookies.
If you don't see any information, you might have turned this feature off, click the drop-down arrow next to console, and check the box above "show xmlhttprequests".
HTML Panel1. Viewing and modifying HTML code
The power of the HTML panel is to be able to view and modify the HTML code, and the code is formatted. Here is a homepage of one of my browsers to explain.
You can see the entire page's current document structure on the left side of the HTML console, and you can expand it by clicking "+". When the appropriate element is clicked, the current element's style, layout, and DOM information are displayed in the right panel. When the cursor moves to the corresponding element in the HTML tree, the corresponding element in the page above will be highlighted.
For example, move the cursor over a <P> tab, showing the effect as shown:
The blue part of the page represents the element itself, the purple represents the padding part, and the yellow represents the margin portion. You can also add, modify, and delete HTML nodes and attributes in real time, as shown in. In addition, clicking the Script node also allows you to view the scripts directly, which can be viewed either inline in HTML or imported externally. Also this applies to <style> tag inline or imported CSS styles and dynamically creating HTML code.
2. View (Inspect)
With the view (Inspect) feature, you can quickly find the HTML structure of an element,
When you click the "Inspect" button, when you select an element with the mouse on the page, the element is surrounded by a blue box, and the corresponding HTML tree in the following HTML panel expands and highlights. You can exit this mode when you click again, and the HTML tree at the bottom remains in this state. With this feature, you can quickly find the elements within the page, debugging and finding the appropriate code is very convenient. When the page is refreshed, the page still displays the area selected with inspect.
The edit button below the HTML panel can be used to directly edit the selected HTML code, followed by the structure path of the current element throughout the DOM.
3. View the part of the DOM that was changed by the script
Using JavaScript to change the value of a style property can do some animation. After opening the page, use the View (Inspect) feature to select the appropriate HTML code, for example, select "Highlights" as shown in:
When you click the "Domestic" tab, the effect appears:
As you can see, the HTML Viewer records the changed content pages on the page and highlights them in yellow. With this feature, the black-out of the web will be a complete history. We can use this feature to see how the animations of other sites are implemented.
4. Viewing and modifying the style of an element
In the Styles panel on the right, all current styles for this element are shown. All styles can be disabled and modified in real time, as shown by clicking on the "Text-align:center" button to disable the rule. You can modify it by clicking directly on the style value value.
Click the Layout panel to see the specific layout properties of this element, which is a standard box model. The layout panel makes it easy to see information such as the offset, margin, border, padding, height, width, and so on of the element, as shown in:
5. View the DOM information
When you click the DOM panel, you can see detailed DOM information for this element, as well as functions and events, as shown in:
CSS, DOM, and network panel
These 3 panels are relatively minor compared to the previous 2 panels, and the CSS and DOM panels are similar to the panels on the right side of the HTML panel, but not as flexible as the HTML panels, so they are generally used very little.
One feature that is unique to the CSS panel is the ability to view in detail the styles that are inline and dynamically imported in the page. As shown in the following:
When you click the CSS panel, you can view the corresponding styles individually. The styles that are expanded here are formatted and suitable for learning the code format and specification of CSS.
And in the network panel, there are some powerful features, such as opening a site home page, Firebug display effect as shown:
This page can monitor the loading of each element, including the size of scripts, pictures, etc., as well as loading time, which is of paramount importance for page optimization.
In addition, the top can also be categorized to see the elements of HTML, CSS, JS and other loading conditions, so that the analysis more flexible.
Script PanelThe script panel is not only able to view scripts within the page, but also has powerful debugging capabilities.
On the right side of the script panel are "monitoring", "stacks" and "breakpoints" three panels, which can be easily debugged using the Firebug provided by the settings, as shown in:
1. Static breakpoints
For example, test.html file, the code is as follows:
1 <! doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 2You can see the effect shown when you run the code. The bold and colored line numbers in the figure represent the JavaScript code here, where you can set breakpoints. For example, in line 6th of the code before the click, then it will appear in front of a reddish-brown dot, indicating here has been set breakpoints. At this point, the breakpoint you just set appears in the breakpoint list in the right-hand breakpoint panel. If you want to disable a breakpoint temporarily, you can remove the tick from the previous check box of a breakpoint in the breakpoint list, and the corresponding breakpoint in the left panel will turn from reddish brown to red taupe.
After setting the breakpoint, we can debug the program. Click the click here button on the page to see the script stop on the line marked with a yellow background. You can now display the value of this variable by moving it with the mouse over a variable. The display results are as follows:
At this point, the four buttons above the JavaScript content have become available. They stand for continue, step into, step over, and step out, respectively.
Continue execution of <f8>: When the script is stopped by a breakpoint, clicking <F8> resumes execution of the script.
Step into <f11>: Allows jumping to the inside of other functions in the page.
Single-Step skip <f10>: Click <F10> to skip the function's call immediately after you jump to return.
Single-Step exit <shift+f11>: Allows the execution of the recovery script to be executed until the next breakpoint.
When you click the Step Into button, the code jumps to the next line, showing the following effect:
As you can see, when you move the mouse over the "lab" variable, you can show that its contents are a DOM element, or "Div#messagelabel".
The right panel is now switched to the monitoring panel, which lists several variables, including the pointer to the this and the lab variable. Click "+" to see the detailed information. Shown below:
2. Conditional breakpoints
In the "lab.innerhtml+=arr+" <br/> "" "This line of code before the right mouse button, you can set a conditional breakpoint input box. Enter "Arr==5" in the box, and then enter to confirm that the results are as follows:
Finally click the "click Here" button on the page. It can be found that the script stops when the expression "arr==5" is true, so that "5" and subsequent numbers are not displayed on the page. The comparison between the normal effect and the display after the conditional breakpoint has been set:
Resources
Shortcut keys: Press <F12> to quickly open Firebug, if you want to get a complete list of shortcut keys, you can access http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts.
Issue: If you encounter difficulties during installation, you can view Firebug's q&a with the URL Http://getfirebug.com/wiki/index.php/FAQ.
Firebug Plugin: Firebug In addition to its own powerful features, there are firebug-based plug-ins, which are used to expand the functionality of Firebug. Google, for example, develops page speed plugins that developers can use to evaluate the performance of their pages and get advice on how to improve performance. Yahoo developed the YSlow for detecting the overall performance of the page and the firephp for debugging PHP. There are also firecookie for debugging cookies.
SummarizeThrough this study, the reader can master the basic functions of firebug. Firebug has gradually become a debugging platform, not just a simple Firefox extension. Learning Firebug can give some help to study and work in the future.
10 minutes to learn the front-end debugging tool--firebug
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
