FireBug Documentation collect and organize data

Use firefox for a long time to install firebug very long time, but only use the firebug has a component-Yslow. Previous testtimes post is back in the week the teacher said: firefox build firebug, who raised a cool! I eager to learn to thin under the firebug, but suffer from poor development of basic, work is busy, has not been done. Today's early work is completed, the IBM technology forum to see a friend using firebug to debug Js article suddenly remembered, they Google a few articles. Add slowly to see the next

The article first met a firebug
This article was originally published in "programmer," Journal of Phase III, now paste the text, the content has been modified a lot of editing:)

What is Firebug

In a few years of Web development, more and feel better now with WEB development requirements. HTML code to write beautiful; to write sophisticated CSS style sheet for each page display module; to debug javascript to the page add some more lively elements; to use Ajax to enhance the user experience. A good WEB developers need to take into account more aspects in order to produce an equally good job. To help the general is in a flood of developers Web2.0, here to introduce a light and flexible supporting development tools.

Firebug is Firefox plug-ins under a development class, now part of Firefox one of the five-star strongly recommended plug-ins. It is set to view and edit HTML, Javascript console, network status monitor in one, is the development of JavaScript, CSS, HTML and Ajax right-hand man. Firebug as a compact Swiss Army knife, analyzed from the perspective of various Web pages within the details of the level, to Web developers a great deal of convenience. This is a true work of the plug-in, if you previously had any contact with it, perhaps after reading this article, there will be a test of desire. The time of writing this article the author, coincides with the final version of Firebug 1.0 release to say that this is the kind of coincidence.


Firebug plug-in though powerful, but it has and the Firefox browser together seamlessly, using simple and intuitive. If you are worried about it taking up too much system resources, you can easily enable / disable the plugin, or even to open the site-specific plug-ins.

After installed plug-in, first with the Firefox browser, open the need to test the page, then click the bottom right of the green button or use the F12 shortcut key to call up the Firebug plug-in, it will be divided into upper and lower framework of the current page, as shown in Figure 1 .

Figure 1: Firebug plug-in start icon

See from Figure 1, Firebug has six main Tab button below will focus on introducing the functions of these areas.

Console HTML CSS Script Dom Net
Console Html Viewer Css Viewer Script section times Dom Viewer Network Status Monitor

Console Console

Console can display the current page in the javascript errors and warnings, and prompts an error file and line number, to facilitate debugging, the browser error than the error itself and has prompted a more detailed reference. And debugging Ajax applications is particularly useful when you can see in the console out of every XMLHttpRequests post request parameters, URL, http header and content of feedback, the original black box appears behind the scenes in the operation of the program is clearly display in front of you.

As the C shell or Python shell as you can see the variable content in the console, run the javascript statement directly, even if a large segment of the javascript program can run correctly and get the run-time information.

Console also an important function is to view the script's log, before you may get used to using the alert Lai Dayin variable, but Firebug brought us a new friend - console.log, the simplest printing Rizhi the syntax is of:



  1. console.log ("hello world")

If you have a bunch of parameters need to be combined with the output, can be written like this:



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

Firebug's log output a variety of optional formats and syntax, and even custom color output, compared with monotonous alert, obviously more convenient, space is limited, do not do details here, but those who want to improve the efficiency of debug readers can go to Firebug's official site (see Appendix) to view a more detailed tutorial.

Figure 2: javascript debugging in the console

View and edit HTML

For the first time to see the HTML code Firebug powerful viewer, I felt something special, compared to Firefox's own HTML viewer, it has many powerful. HTML

The first thing you see is have a formatted HTML code, it has a clear levels, you are able to easily identify each label parallel relationship between the subordinate, label folding feature can help you focus on parsing code. Source code at the top of the DOM also mark the level shown in Figure 3, it clearly shows a hml element parent, child and the root element of the CSS with Firebug Viewer own use, will div + css page Analysis of the preparation of great benefit. You can also directly modify the HTML Viewer HTML source code, and in the browser the first time to see the revised results, even with all that so many page designers will be dead set to become a fan of Firebug.

Sometimes the page will be based on user actions javascript mouse onmouseover like to dynamically change some of the HTML elements or background color style sheet, HTML viewer will change the page content can be caught up, and highlighted in yellow marker, so that page black-box operation complete history.

Using Inspect checking, we can also use the mouse to directly select the page number of blocks, see the corresponding HTML code and CSS style sheets, the real do WYSIWYG, if you use an external editor to modify the current page , you can click on Firebug to reload image reload the page, it will continue to follow before you use Inspect the selected block, to facilitate debugging.

Figure 3:: HTML Viewer

CSS debugging

Firebug's CSS debugger is designed for Web designers tailored.

Today's web design adhere div + css, if you are using table sets out the HTML page, you have to reconstruct it again by these rules, or appears to you is not stylish! To do with the div out of the page can really streamline the HTML code, HTML tag weight loss result is the preparation of CSS style sheets has become the highlight of making the page. Firebug's CSS viewer not only from the bottom up out of a CSS style sheet for each inheritance relationship of subordination, but also lists each file in the style in which the definition of style. In the viewer you can directly add, modify, delete some CSS style sheet properties, and in the current page directly to see the revised results.

A typical application is the page position appears in a block is not appropriate for some, it needs to move a few pixels. This time with the CSS debugging tools can easily edit its location - you can move freely according to need pixels.
Figure 4 is a block changes the background color.

Tip: If you are learning the application of CSS style sheets, but the overall style sheet can not remember what common values, the debugger can try to select a CSS style sheet properties, and then up and down arrow keys to change its value, it possible values will show you one by one traversal.

Figure 4: CSS Viewer, can directly modify the style sheet

Visual CSS ruler

We can use Firebug to see the page in a block of CSS style sheets, if the right of the Layout tab to further expand it, it will scale in the form of the area occupied by the current block out clearly identified, accurate to the pixel, more What is surprising is that you can visualize in this interface directly modify the value of each pixel, the location of blocks on the page will change with the changes. Some elements appear in the page or the area beyond the expected value of dislocation, the feature can provide effective help, you can take this analysis of offset, margin, padding, size relations, and to find solutions to problems.

Figure 5: Firebug's CSS ruler

Network Status Monitor

Perhaps one day, your boss or clients to find you, complain about you making the web page is excruciatingly slow, how do you respond? You might say that this may be network problems, or a computer configuration problem, or the program too slow, or directly to their character that is the problem? Anyway, eventually you may be asked to address the variety of possible problems.

Network Status Monitor can help you solve this difficult problem. Firebug's network monitor is also powerful, it will page the CSS, javascript and web page referenced in the image loading time consumed in moments like map show up, maybe here you can slow down an uncovered the culprit of your web page, and then tune the Web page, the last boss of satisfied customers happy, your job could also be strong.

Network Monitor There are other details of the features such as preview the image to view an external file for each request even xmlHttpRequests http headers, etc..

Figure 6: Network Status Monitor

Javascript Debugger

This is a very nice javascript script debugger, take up little space, but the single-step debug, set breakpoints, variable view window a lot. Is the so-called small but complete.

If you have a web site has been built, but it's javascript has performance problems or is not too perfect, the front panel on the Profile to each piece of the script run time statistics to see which statement in the end is the execution time is too long, an excluded step by step problem.

Figure 7: javascript debugger

DOM Viewer

DOM (Document Object Model) Object inside and contains a large number of functions, events, in the past, you want to find from the contents need not be easy, it is like you go to a huge library, you want to find a few This name is not the exact book, many choices will make you confused. Use Firebug's DOM viewer was able to easily view the internal structure of DOM, DOM help you quickly locate the object. Double-click a DOM object, you can edit it, or the value of the variable, edit the same time, you may find that it also has auto-complete feature, when you enter document.get, press the tab key can be padded to document.getElementById, very convenient. If you think good enough padded, press shift + tab will restitution. Used Firebug's DOM viewer, your javascript driven from found objects, Web development may become a pleasure.

Figure 8: Dom Viewer


Firebug plug-in provides a set of web development tools necessary. From the preparation of HTML, CSS style sheets to the beautification of tuning, and using javascript script development, or Ajax applications also, Firebug plug-in will be your right-hand man. The so-called advance preparation of its profits. In the Web2.0 era, described themselves as Ajax, is easily enhance the user experience, if the Firebug tool to good use, will make you even more powerful, to HTML, CSS, javascript order must instill obedience, she became an expert in web development class people.


The Chinese meaning of Firebug Firefly, the author is Joe Hewitt, the official website
Firefox ie Firefox, IE browser in recent years to shake the market share of a powerful force, but for its appearance, I would like to lifetime might also see the release of IE 7, and the official website http:/ /

Article II:

Firebug Start Guide

FireBug Documentation collect and organize data

It is said that the web developers, Firebug is a Firefox browser plug-ins in one of the best.

Recently, I have in learning how to use Firebug, find the one for beginners online tutorials , I feel more useful, the translator out.


Firebug Start Guide

Study: Estelle Weyl

Original URL:

Translator: Ruan Yifeng

This article is an overview of Firebug, not its detailed explanation of all features. However, the content of this article to a novice, should be sufficient.


First, install Firebug
Second, open and close the Firebug
3, Firebug window overview of four, five at any time edit pages, CSS with Firebug treatment
Six, seven box-shaped model to assess the download speed of 8, DOM
9, Javascript debugging 10, AJAX
XI, Note

First, install Firebug

Firebug in Firefox browser to run. There is another Firebug lite version, you can javascript call, contained in the page, so in other non-Firefox browser. This article does not involve this version.

Install Firebug, please visit the Firebug download page . Click on the column on the right page of huge orange button. You can also Mozilla's FireFox Add-ons site to download it. Restart after the installation as long as FireFox, you can use.

If you have installed, then check whether the update to the latest version. Open Firefox's "Tools" menu, select "Add-ons" command, and then in the pop-up window, click the lower left corner of the "Find Updates" button.

Second, open and close the Firebug

In the Firebug website, can find its shortcut key settings . I most often use the following three methods:

* Open Firebug: press F12, or click your browser's status bar to the right of the green flag.

FireBug Documentation collect and organize data

* Close Firebug: press F12, or click your browser's status bar to the right of the green flag, or click the red close the upper right corner of Firebug window signs.

* In a separate window to open Firebug: click the firebug window upper right corner of the red arrow logo, or use Ctrl + F12 / ⌘ + F12 button.

Firebug related settings:

* Fixed Firebug open in a new window: the first open firebug, click on the top left corner of the bug logo, select the options menu in the "Always Open in New Window" setting.

* Increase / Decrease font size: first open the firebug, click on the top left corner of the bug marks, select "Text Size" command. Changes in the range of each font is very small, you may need to use many times.

FireBug Documentation collect and organize data

* Limited only to certain sites to use Firebug: Right-click your browser's status before the green check mark symbol, select the "disable Firebug" command. Then, right-click this symbol has been grayed out, select the "Allowed Sites ..." command to increase the effect of the domain name to allow Firebug.

FireBug Documentation collect and organize data

3, Firebug Window Overview

* Console Tags: command-line operation the main use of javascript, javascript error message displayed at the bottom of the>>> prompt, type javascript commands you can own.

* HTML tags: display HTML source code, and like the DOM hierarchy, as there are indentation before each line. You can choose to show or not show a child node.

* CSS Tags: View all the style sheets have been loaded, you can spot any modifications. In the Firebug window top, "edit" command next to a style sheet of this page for all the drop-down list, you can choose a style sheet to view.

FireBug Documentation collect and organize data

* Script Tag: Display javascript file and where the page. In the Firebug window top, "inspect" command next to a page in the drop-down list of all Javascript files, you can choose a browse. Javascript command you can set a breakpoint (breakpoint) and the conditions there.

* DOM Tags: show all objects in the page object and the window properties. Because in the javascript, all the variables are the properties of window object, so Firebug will display all the variables and their values.

* Net Tags: display all the pages related to downloads, and they spend their time, their HTTP request headers and server response headers. XHR tab is useful on the AJAX debugging.

4, edit the page at any time <br /> in HTML tab, click on the window at the top of the "inspect" command, and then select the page in the text node, you can modify, modify the results will be immediately reflected in the page.

FireBug Documentation collect and organize data

Firebug is also a source browser and editor. All HTML, CSS and Javascript files in the object, can be edited with a click or double-click. When you enter the finished page in the browser corresponding changes will occur immediately, you can get instant feedback. DOM browsers allow you to conduct a thorough editing document structure, not limited to text nodes. In the HTML tab, click on the window top "inspect" command next to "edit" command, the bottom of the window will immediately turn into a black and white text editor window, you can edit the HTML source code of arbitrary. In the CSS tab, Firebug will automatically fill all your input. In the DOM tab, when you press Tab key, Firebug will automatically fill all the property name.

5, dealing with CSS with Firebug

In the DOM tab, each HTML element style attributes reveals all the CSS settings of the element. You can double-click to edit these settings.

FireBug Documentation collect and organize data

For those who do not support the CSS rules for Firefox, Firebug will automatically hide. For example, Firebug will hide the browser CSS for certain specific settings, and some it does not support the CSS3 rules. Therefore, it will hide _height: 25px; (underscore is a setting for IE6) and p: first-of-type (color: # ff0000;) (: first-of-type is a CSS3 pseudo-class specified , only Safari 3 support). However, this also means that if you happen to typing error occurred, causing some of the rules can not be displayed, then you only use a CSS editor, show all the content, find your mistakes.

Firebug allows you to turn off CSS in some of the statements, the page will be immediately reflected in corresponding changes, you can immediately see the effect. "Off" a statement of the method is to click on the lefthand side, there will be a red prohibition signs. The statement will be grayed out. Click again, the statement would be restored.

Firebug allows you to edit the CSS attributes and attribute values. You just click on them, you can edit. Immediately after the effect of changes in the browser window is displayed. The best use of this feature is to determine the precise positioning of padding and margin when, firebug allows you to use the arrow keys to increase by units.

Firebug allows you to add new attributes and attribute values. Increase is double the current selector, then there will be an empty property name input box, and finish will be a blank after the property value.

6, box-shaped model

When you are in HTML tab, click an element, the left window displays the HTML code on the right window shows the element of CSS. In the CSS window above, a layout button, when clicked, will display the box associated with the element model, including padding, margin and border values. To view each element of these three values, simply click on "inspect" button, then hover your mouse over the element in the top of the page.

FireBug Documentation collect and organize data

7, evaluation download speed

Net tab of the page graphics all the time used by http requests. Using this feature, you must open the Network monitoring, the default setting is open, but you can "options" drop-down menu, turn off this option. You can use this function evaluation javascript file download, using the entire page display time.

FireBug Documentation collect and organize data

In the left click on each HTTP request will display the time the request header.

After the 1.0.5 version, you can individually view the HTML file, CSS files, image files such as their download time.

8, DOM

DOM tab provides all objects on the page all the properties. Firebug one of the coolest features is that it can dynamically modify the page, as reflected in the browser window, but if you use the browser's View Source feature comes, you will find source code has not changed.

9, Javascript debugging

JavaScript profiler can report on the implementation of your Javascript function of time spent, so you can view the different functions of the velocity. Method is to use this feature, open the console tab, then click the Profile button above (top button on the order of "Inspect | Clear | Profile"). Firebug lists all the function calls, and time spent. You may want to test for a function, in its front with console.profile ([title]), the Ministry added in a subsequent console.profileEnd ().

Label the bottom of the console is a command-line input, it begins to ">>>". If the command-line input with output, and then it will display at the top of the window. A detailed command line input API is worth a look. Firebug console object built several useful methods available for calls, including console.debug,, console.warning, console.error so. If these methods produced output, Firebug will provide a link so you view the code.

Another method is to set debugging breakpoints. Script tab allows you to suspend any line. Click the line number, it will set a breakpoint. Right-click the line number, you can set a breakpoint condition occurs only when the condition is true, the program will be suspended. Right and a watch window, you can view the current value of the variable.

FireBug Documentation collect and organize data

10, AJAX

As mentioned earlier, Firebug captures dynamic content pages and other DOM changes. If you open the sample file , click on the link on the page, view the source code in the browser, you will find nothing has changed, the source code still contains the link. But if you view the source code in Firebug, you will find DOM has changed, "Hello World" has been included. This is one of the core functions Firebug, without it, AJAX requests and responses are not visible. With it, you can see the sent and received text, has the appropriate header information. In the Net tab, you can control each request / response to their time spent.

FireBug Documentation collect and organize data

Net tab XHR function, see AJAX operation particularly useful. If you click on each server to respond before the plus side, you will see the server response headers and content.

When the server through the XMLHttpRequest object to send a request, Firebug will POST or GET request to record content, and to respond to the header information and content. Net label use XHR functionality, you can see this content. It will list all the server to respond, and the time spent. Click the + sign in front, if GET request, it will display three tabs; if POST request, will display four labels:

Params: Display the request URL contained in the name / value pairs.

Headers: display request and response headers.

Response: Display the actual information received from the server.

Post: display from through POST request to the server information. (The GET request does not include.)

The four labels are useful for writing and debugging programs. Check POST and Params tab, make sure your request was properly issued. Check Response tab to see the return format, determined according to how to write Javascript handler.

11, note

* Firebug 1.05 and earlier versions are not compatible with Firefox 3.0.

* Firebug author Joe Hewitt provides this software free of charge, in order to demonstrate our love for him, you might consider him for contributions .

* Firebug some advanced applications, see Joe Hewitt of this demo video .


Article 3 Firebug in a few features you should not miss

FireBug is a Firefox extension provides the ancillary functions of many Web developers, if you are a web developer, for every day, and HTML / CSS / Javascript deal, Firebug can greatly improve your efficiency.
Firebug most of the features are very intuitive, I most often use the Inspect CSS / DOM, and Javascript debug, sometimes to see Net and YSlow . There are a number of features, large or small, is not up on the discovery, but it is also very easy to use, not to be missed:


Whether to do UserScript , bookmarklet or web crawler, sometimes using five or six lines of page elements to achieve extraction of DOM, or you have to use XPath 1. Before positioning an element of the XPath mainly by eye, with Firebug to provincial eyes, and first used Inspect positioning page elements, and then right click, choose Copy XPath, buttoned.
FireBug Documentation collect and organize data

This XPath is a DOM tree from the past, has revised some errors on the page, so sometimes there are some deviations actual XPath, but are generally difficult to adjust. For example, some pages there are no table tbody, direct that the contents of the form, DOM tree will automatically fill the tbody, people tend to get the xpath tbody, when in actual use, and the actual content of the corresponding web page, it should tbody removed.

javascript command line

If any scripting language does not provide the console with the command line (console), I'm not playing,:-p. Use the command line console (console), you can save a lot of debug time. I've introduced jsenv . Firebug also provides a very useful javascript command line console, you can directly interact with the current Web page, enter the command can automatically append the time. In addition, we must not forget to look at this list of commands .

Console API

I love to use the javascript function that is alert, occasionally put it on loop, I can spend an afternoon playing time OK. Byebye now and the time the alert said. Firebug provides a set of fairly complete javascript console API, you can log directly output to the console instead of re-use out of a small window that provides a variety of log levels (debug, info, warn, error), and grouping features, you can display objects property, you can record stack trace, even a timer and the profiler, debugging performance do not have to worry about. I remember see the console API description .


Page layout, or do both dynamic HTML, often need to know the relative position of a page element. You can install a Measueit to expand their capacity, you can also use Firebug in the benchmark. With the Inspector to select the element you want to measure, on the right side select the Layout tab, and then right across the box model of the central, the ruler will appear.
FireBug Documentation collect and organize data

In all browser Firebug

Sorry, not all features, is not a little disappointed. But at least you can guarantee the normal output of the console API, and provides command line support is quite good. Download firebuglite file , put the script directory, and then add in the page:

<script language="javascript" type="text/javascript"

F12 can call out using the Firebug.

分类:Java 时间:2010-05-05 人气:402
blog comments powered by Disqus


  • [Zz] Unix debugging Swiss Army Knife: lsof 2011-08-31

    See the original: This is the "you should know about Unix and Linux command" series, third, in this article, I will introduce this tool lsof, if netcat is a Swiss army knife

  • Linux Netcat command – The swiss army knife of net 2015-02-11

    Swiss Army Knife of networking netcat is a versatile tool that is able to read and write data across TCP and UDP network . Combined with other tools and redirection it can be used in number of ways in your scripts. You will be surprised to see what y

  • Derby front-end development tools to learn and experience. 2011-04-28

    A long period of time without touching a new technology (in terms of their own is new, because previously no contact) and more recently a project to use the Derby database, so it took time to learn the easy to use. Ashamed to say, working for so long

  • Large collection of Web development tools 2009-07-01

    Author: Klaus Komenda , Translation: butwho English original: Collection of Web Developer Tools, per Browser Original found: Translation made-Collection of Web Developer Tools for major browsers Chinese translation: Large collection of Web developmen

  • Google will Instantiations JAVA development tools produced by all the free release 2010-09-17

    Google bought in August this year, JAVA / AJAX tool developers Instantiations, their products are basically Eclipse Java development tools, including the famous GWT Designer. Generally speaking, Google's products after the acquisition will open sourc

  • Google will Instantiations produced JAVA development tools for free release 2010-09-17

    Google in August this year bought JAVA / AJAX tool developers Instantiations, their products are basically the Eclipse Java development tools, including the famous GWT Designer. In general, after the Google acquisition of open source or free products

  • Far away in Denmark, the development of Google Chrome Daniudi 2009-09-05

    Introduction: In this paper, the "Financial Times" Web site published a close-up figures, the article is the protagonist of the Google Chrome V8 engine developers Rasbach (Lars Bak). He is a programming genius, but far away from the computer wor

  • java in IDE development tools related presentations 2010-07-16

    Java development in every aspect, every IDE can be competent, but under different development if you do Swing development, web development, or business development, we will choose a different IDE. Swing Development: If you specialize in Swing develop

  • Web developers should be aware of the 62 things (to) 2010-11-29

    Recently, it was in Stack Overflow question published in "hands-on development site, you need to know what happened?", many people give different answers, but all based on the following wiki Stack Overflow problem areas on a number of answers we

  • front-end web development tool 2010-11-30 CE% C4% D6% AA% CF% FE/blog/item/325fe71009cbfc0c213f2ed2.html Whatever you do web development or reconstruction of the front, front-end tools are playing a very important role, where we recommend some good, and is widely used f

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 闽ICP备15018612号

processed in 0.044 (s). 13 q(s)