The use of Firefox plugin firebug tutorial _javascript Tips

What is Firebug
Having been working on web development for several years, it is increasingly felt that there is a higher demand for web development now. To write beautiful HTML code, to write elegant CSS stylesheet to show each page module, to debug JavaScript to add some more lively elements to the page, to use Ajax to bring the user a better experience. A good web developer needs to be more level-able to deliver an equally good job. In order to help the vast number of developers in the Web2.0 torrent, here to introduce a lightweight and flexible auxiliary development tools.

Firebug is Firefox under a development class plug-in, now belongs to the Firefox five-star powerful recommended plug-ins. It integrates HTML viewing and editing, JavaScript consoles, and network health monitors, and is the right-hand man for developing JavaScript, CSS, HTML, and Ajax. Firebug, like a sophisticated Swiss Army knife, analyzes the details of a Web page from various angles, bringing great convenience to web developers. This is a people put it down, if you have not touched it before, perhaps after reading this article, there will be a desire to try. The author in writing this article, is every Firebug Release 1.0 official version, this cannot but say is a kind of coincidence.

Application
The Firebug plug-in is powerful, but it has been seamlessly integrated with the Firefox browser and is simple and intuitive. If you are worried that it will take up too much system resources, you can also easily enable/disable the plugin, even for a specific site to open the plug-in.

After installing the plugin, first use the Firefox browser to open the page you need to test, and then click the Green button on the lower right or use the shortcut key F12 call out the Firebug plug-in, it will be the current page into two frames, as shown in Figure 1.

Figure 1:firebug Plugin expand diagram

As you can see from Figure 1, the Firebug has 6 main tab buttons, which are described in the following sections.
Console HTML CSS Script Dom Net
Console HTML Viewer CSS Viewer Script Bar period Dom Viewer network condition Monitoring

Console Console
The console is able to display JavaScript errors and warnings on the current page, and prompts for error files and line numbers to facilitate debugging, which is more detailed and valuable than the error prompts provided by the browser itself. It is also especially useful when debugging Ajax applications, where you can see every xmlhttprequests request post parameters, Url,http headers, and feedback in the console, and the program that seems to be working in the background black box is clearly displayed in front of you.

Like the C shell or the Python shell, you can also view variable content in a console, run JavaScript statements directly, and even a large section of JavaScript programs can run correctly and get run-time information.

The console also has an important role to look at the script log, where you might have been accustomed to using alert to print variables, but Firebug brought us a new friend--console.log, the simplest print log syntax is this:

Console.log ("Hello World")

If you have a bunch of parameters that need to be grouped together for output, you can write this:

Console.log (2,4,6,8, "foo", bar).

Firebug's log output has many optional formats and syntax, and can even customize the color output, which is obviously more convenient and limited to space than the monotonous alert, but there is no detail here, but readers who are interested in improving debug efficiency You can go to the official site of Firebug (see appendix) for more detailed tutorials.

Figure 2: Debugging JavaScript in the console

viewing and modifying HTML
The first time I saw Firebug's powerful HTML code viewer, I thought it was different, and it was a lot more powerful than Firefox's own HTML viewer. Html

The first thing you see is the formatted HTML code, which has a clear hierarchy in which you can easily identify the subordinate parallelism between each label, and the folding of the tags will help you focus on analyzing the code. The hierarchy of the DOM is also marked above the source code, as shown in Figure 3, which clearly lists the parent, child, and root elements of a HML element, in conjunction with Firebug's own CSS viewer, which can greatly benefit Div+css page parsing. You can also directly modify the HTML source code in the HTML Viewer, and the first time in the browser to see the effect of the changes, this will allow many page designers to become Firebug fans.

Sometimes the JavaScript in the page will dynamically change the style sheet or background color of some HTML elements according to the user's action, such as the onmouseover of the mouse, and the HTML Viewer will grab the changed contents of the page and take the yellow highlighting to make the page's black-box operation complete history.

With the inspect check function, we can also use the mouse to select some blocks directly in the page, view the corresponding HTML source code and CSS style sheet, really do what you see, if you use the external editor to modify the current page, You can click on the firebug reload image to reload the page, it will continue to track you before using inspect selected block, easy to debug.

Figure 3::html Viewer

CSS Debugging
Firebug's CSS debugger is tailored for web designers.

Today's web design will be called DIV+CSS, if you are using the table set out HTML page, you have to follow this rule to refactor again, otherwise it seems you are not fashionable! Using div to do the page can really streamline the HTML code, the result of the HTML tag weight loss is that the CSS style sheet has been written as a page production plays. The Firebug CSS Viewer not only lists the subordinate inheritance relationships for each CSS style sheet from the bottom up, but also lists which style files each style is defined in. You can add, modify, and delete CSS style sheet properties directly in this viewer, and see the modified results directly in the current page.

A typical application is that a block position in a page is somewhat inappropriate, and it needs to move several pixels. With CSS Debugging tools you can easily edit its location-you can move pixels as you want.
The background color of a chunk is being modified in Figure 4.

Tip: If you're learning about CSS stylesheets, but you can't remember the values of the common style sheets, try selecting a Stylesheet attribute in the CSS debugger and then using the UP and DOWN ARROW keys to change its value, which iterates through the possible values.

Figure 4:css Viewer, can modify style sheet directly

Visual CSS Ruler
We can use Firebug to view the CSS stylesheet of a block in a page, and if you further expand the Right Layout tab, it will clearly identify the area occupied by the current block in the form of a ruler, accurate to the pixel, and, more surprisingly, You can modify the values of each pixel directly in this visual interface, and the location of the blocks on the page changes with the changes. This function can provide effective help when some elements in the page are mangled or the area exceeds the expected value, so you can analyze the relationship between offset, margin, padding and size to find a solution to the problem.

The CSS ruler in Figure 5:firebug

Network Health Monitor

Maybe one day, your boss or your client will find you, complaining about the speed of your Web pages, how do you respond? You might say this could be a network problem, or a computer configuration problem, or a program that is too slow, or is it a character problem? In any case, at the end you may be asked to solve a number of possible problems.

The network status Monitor can help you solve this tricky problem. Firebug's Network Monitor is also powerful, it can put the CSS in the page, JavaScript and the pictures referenced in the Web page to load the time to display the moment graph, perhaps here you can find a drag to slow down the culprit of your Web page, and then to tune the page, Finally, the boss satisfied with the customer happy, your job is also strong.

Network Monitor also has some other detail features, such as previewing pictures, viewing each external file, or even HTTP headers for xmlhttprequests requests, and so on.

Figure 6: Network Health Monitor

JavaScript debugger

This is a good JavaScript script debugger, occupy little space, but one step debugging, set breakpoints, variable viewing window a lot. It's called though small, spite.

If you have a website already built, but its JavaScript has a performance problem or not too perfect, you can use the Panel profile to calculate the time of each script run, to see exactly which statements execution time is too long, step by step to eliminate the problem.

Figure 7:javascript Debugger

Dom Viewer

DOM (Document object Model) contains a large number of Object and functions, events, in the past, you want to find out what you need, it is not easy, it is like you go to a huge library, want to find a few names are not very exact little book, A multitude of choices will leave you at a loss. Using Firebug's Dom Viewer makes it easy to navigate the internal structure of the DOM to help you quickly locate DOM objects. Double-click a DOM object, you can edit its variable or value, editing the same time, you may find that it also has automatic completion function, when you enter Document.get, press the TAB key can be completed for document.getElementById, very convenient. If you think it's not enough, pressing Shift+tab will restore the status quo. With the Firebug Dom Viewer, your JavaScript has found the driving object, and web development may be a pleasure.

Figure 8:dom Viewer

Summary

The Firebug plug-in provides a complete set of tools necessary for web development. From HTML authoring, to the beautification of CSS stylesheets, and to JavaScript scripting, or Ajax apps, the Firebug plugin will be your right-hand man. The so-called 工欲善其事, its prerequisite. In the era of Web2.0, the word will be called Ajax, is frequently the user experience to upgrade, if the Firebug tool used well, you will be able to give up the powerful, HTML, CSS, JavaScript collation obey orders, since then become a Web development expert-level figures.