Firebug Usage Summary

Firebug is a development tool for the front end of a Web site that is an extension plugin for Firefox browsers that can debug JavaScript, view the DOM, analyze CSS, monitor network traffic, and interact with Ajax. Provides all the functionality needed for almost front-end development.

Firebug contains a total of 6 panels, namely consoles, html,css, scripts, Dom and network

1. Console panel

The console panel is used for logging, overview, error prompting, and execution of the command line, as well as for Ajax debugging.

Firebug provides several common logging functions as follows.

Console.log: A simple logging.

Console.debug: Records debugging information and attaches a hyperlink to the line number.

Console.error: An error icon is displayed in front of the message and a hyperlink to the line number is attached.

Console.info: Displays the information icon in front of the message with a hyperlink to the line number.

Console.warn: A warning icon is displayed in front of the message and a hyperlink to the line number is attached.

In the HTML script, enter the following code, for example:

<script tye= "Text/javascript" >console.log (' This was log message '); Console.debug (' This is Debug message '); Console.error (' This is the error message '); Console.info (' This is Info message '); Console.warn (' This is warn message '); </script>

After executing the code, you see the following effects in the Firebug console:

submenu in the console panel:

They are clear, hold, overview, all, error, warning, message, debug information, cookies, etc.

' Clear ' is used to clear the contents of the console. ' Hold ' is to save the contents of the console even if it is refreshed. ' All ' is the display of all information. The following error, warning, message, Debug Information menu is a taxonomy for all. The ' Overview ' menu is used to view function performance.

The console panel can also be used for Ajax debugging, which can replace the network panel to some extent.

2. HTML panel

(1). View and modify HTML code.

(2). View (Inspect).

(3). Look at the part of the DOM that was changed by the script.

(4). View and modify the style of the element.

(5). View the DOM information.

3. CSS Panel

CSS panels are similar to the panels on the right side of HTML, but are less flexible than HTML panels.

One feature that is unique to the CSS panel is the ability to view in detail the styles that are embedded in the page and dynamically imported.

4. Script panel

The 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 ' 3 panels, which can be easily debugged using the set breakpoints feature provided by Firebug.

5. Dom Panel

The DOM panel is similar to the Panel on the right side of HTML, but less flexible than the HTML panel.

6. Network panel

The network panel can monitor the loading of each element, including the size of scripts, images, and loading time, which is very important for page optimization. In addition, the top can also be categorized to view the loading of elements such as HTML,CSS,JS, making analysis more flexible.

Firebug Usage Summary