Firefox Plugin Firebug tutorial

What is Firebug?
After several years of Web development work, I feel that there are higher requirements for WEB development. Write beautiful HTML code; write exquisite CSS style sheets to display each page module; debug javascript to add more lively elements to the page; ajax should be used 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. The level of DOM is also marked at the top of the source code, 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

Network condition monitor

One day, your boss or customer may find you and complain about the slow speed of Your webpage. What should you do? You may say this may be a network problem, a computer configuration problem, a slow program, or simply a matter of their character? In any case, you may be asked to solve many possible problems.

Network condition monitor can help you solve this problem. Firebug's network monitor is also powerful. It can display the time it takes to load CSS, javascript, and referenced images on the page in a moment, here, you may be able to take advantage of the culprit that slowed down your web page, optimize the web page, and finally the boss is happy with the customer, so your job is also strong.

The Network Monitor also has some other details, such as previewing images, viewing each external file, or even the http header of the xmlHttpRequests request.

Figure 6: network condition monitor

Javascript Debugger

This is a very good javascript script debugger, which occupies little space, but there are a lot of window for single-step debugging, breakpoint setting, and variable viewing. The so-called Sparrow is small and dirty.

If a website has been built, but its javascript has performance problems or is not perfect, you can use the Profile on the panel to count the running time of each script, check which statements have been executed for a long time and troubleshoot the problem step by step.

Figure 7: javascript Debugger

DOM Viewer

DOM (Document Object Model) contains a large number of objects, functions, and events. In the past, it was not easy for you to find the required content. It was like you went to a huge library, if you want to find a few small books with inaccurate names, you may not be able to find any choice. The Firebug DOM Viewer allows you to easily browse the internal structure of the DOM and help you quickly locate DOM objects. Double-click a DOM object to edit its variables or values. You may find that it also has the Automatic completion function when you enter document. after get, press the tab key to fill in the document. getElementById is very convenient. If you think that the completion is not ideal, press shift + tab to restore the original state. With the Firebug DOM viewer, your javascript has found the drive object, and Web development may become a pleasure.

Figure 8: Dom Viewer

Summary

The Firebug plug-in provides a complete set of tools necessary for web development. From the compilation of HTML, to the beautification and optimization of CSS style sheets, and the development of javascript scripts or Ajax applications, the Firebug plug-in will become your right assistant. To do good, you must first sharpen your tools. In the era of web, Ajax must be called, and the user experience is often improved. If you make good use of the Firebug tool, you will be able to put HTML, CSS, and javascript in a convincing manner, since then, it has become an expert in web development.