Use of Firefox plug-in firebug

Written by yuren Wharf

This article first published 《ProgramIn the third issue of member magazine, the full text is now pasted, And the content has been edited and modified a lot :)
What is firebug?
After several years of web development work, I feel that there are higher requirements for web development. Write beautiful htmlCodeYou need to write a refined CSS style sheet to display each page module. You need to debug JavaScript to add more lively elements to the page. You need to use ajax to bring a better user experience. A good web developer must take into account more aspects to hand over an equally outstanding job. To help developers who are currently in the Web flood, we will introduce a lightweight and flexible auxiliary development tool.
Firebug is a development plug-in under Firefox, and is now one of Firefox's five-star powerful recommendation plug-ins. It integrates HTML viewing and editing, the Javascript console, and the network condition monitor. It is a powerful helper for developing JavaScript, CSS, HTML, and Ajax. Firebug is like a Swiss Army knife. It analyzes the details of the web page from different perspectives, bringing great convenience to Web developers. This is an easy-to-use plug-in. If you have never touched it before, you may have a desire to try it after reading this article. When I wrote this article, it was a coincidence that firebug released the official 1.0 version.
Application
Although the firebug plug-in is powerful, it has been seamlessly integrated with the Firefox browser for simple and intuitive use. If you are worried that it will occupy too much system resources, you can easily enable/disable the plug-in, or even enable the plug-in for a specific site.
After installing the plug-in, use the Firefox browser to open the page to be tested, and then click the green button in the lower right or use the shortcut key F12 to call the firebug plug-in. This will divide the current page into two frameworks, 1.
Figure 1: firebug plug-in expansion

As shown in figure 1, firebug has six main tab buttons, which are described below.
Console html css script Dom net
Console HTML viewer CSS viewer script bar period Dom viewer network condition monitoring
Console
The console displays JavaScript errors and warnings on the current page, and prompts the file and row number of errors for debugging. These error prompts are more detailed and useful than the error prompts provided by the browser. It is particularly useful when debugging Ajax applications. You can view the parameters, URLs, HTTP headers, and feedback content of each xmlhttprequests request post in the console, the program originally appeared to be operating in the black box behind the scenes is clearly displayed in front of you.
Like C shell or Python shell, you can also view the variable content in the console and directly run javascript statements. Even a large JavaScript program can run correctly and get the runtime information.
The console also plays an important role in viewing the script log. You may have used to using alert to print variables, but firebug has brought us a new friend called console. log, the simplest syntax for printing logs is as follows:
Console. Log ("Hello World ")
If you have a bunch of parameters that need to be combined for output, you can write them as follows:
Console. Log (2, 4, 6, 8, "foo", bar ).
Firebug log output has a variety of optional formats and syntaxes, and can even customize the color output. Compared with the monotonous alert, it is obviously more convenient. It is limited by space and will not be described in detail here, however, readers who are interested in improving the debugging efficiency can go to firebug's official site (see the appendix) to view more detailed tutorials.
Figure 2: Debug JavaScript on the console

View and modify html
The first time I saw firebug's powerful HTML code viewer, I thought it was quite different. Compared with Firefox's built-in HTML viewer, it was much more powerful. Html
The first thing you can see is the formatted HTML code, which has a clear level, so that you can easily distinguish the subordinate parallel relationship between each tag, tag folding helps you focus on code analysis.Source codeThe Dom layers are also marked at the top, as shown in Figure 3. It clearly lists the parent, child, and root elements of an hml element and works with the CSS viewer that comes with firebug, it will bring great benefits to analysis and writing of Div + CSS pages. You can also directly modify the HTML source code in the HTML viewer and immediately see the modified effect in the browser. With this, many page designers will become fans of firebug.
Sometimes JavaScript on the page dynamically changes the style sheet or background color of Some HTML elements based on users' actions, such as the mouse's onmouseover. The HTML viewer also captures the changed content on the page, highlight the webpage in yellow to make the dark box operations completely historical.
With the inspect check function, we can also select some blocks on the page with the mouse to view the corresponding HTML source code and CSS style sheet, truly achieving what you see is what you get, if you have used an external editor to modify the current webpage, you can click the reload image of firebug to reload the webpage. It will continue to track the blocks selected with inspect for debugging convenience.
Figure 3: HTML Viewer

CSS debugging
Firebug's CSS debugger is designed for web designers.
Today's Web page design is called Div + CSS. If you are using an HTML page built from a table, you have to rebuild it according to this rule. Otherwise, it seems that you are not fashionable enough! The page made with Div can indeed streamline HTML code. The result of HTML Tag slimming is that the CSS style sheet has been written into the headlines of page creation. Firebug's CSS viewer not only lists the subordinate inheritance relationships of each CSS style table from the bottom up, but also lists the style files in which each style is defined. You can directly add, modify, or delete some CSS style sheet attributes in the viewer, and view the modified results on the current page.
A typical application is that a block location in the page is somewhat inappropriate, and it needs to move several pixels. At this time, the CSS debugging tool can easily edit its location-you can move the pixel as needed.
4. The background color of a block is being modified.

Tip: If you are learning about CSS style sheets, but you cannot remember the values of common style sheets, you can select a style sheet attribute in the CSS debugger, then use the up and down arrow keys to change its value. It will traverse the possible values one by one.
Figure 4: CSS viewer, which allows you to directly modify a style sheet

Visual CSS ruler
We can use firebug to view the CSS style sheet of a block in the page. If we expand the right layout tab, it will clearly identify the occupied area of the current block in the form of a ruler, it is even more surprising that you can directly modify the value of each pixel on this visual interface, and the location of the block on the page will change with the change. This function can effectively help you analyze the relationship between offset, margin, padding, and size when some elements on the page are misplaced or the area exceeds the expected value, to find a solution to the problem.
Figure 5: CSS ruler in firebug

 

From: http://www.css88.com/archives/130