Firebug Getting Started Guide (Firefox)

I recently learned how to use firebug. I found a tutorial for beginners on the Internet, which is useful and translated.

Author: Estelle Weyl

Http://www.evotech.net/blog/2007/06/introduction-to-firebug/

Translator: Ruan Yifeng

This article is an overview of firebug and does not explain all its features in detail. However, the content in this article should be sufficient for a newbie.

Directory

1. Install firebug

Ii. Enable and disable firebug

Iii. firebug window Overview

4. Edit the page at any time

5. Use firebug to process CSS

Vi. Box Model

VII. Evaluate the download speed

8. Dom

9. Javascript debugging

10. Ajax

XI. Notes

1. Install firebug

Firebug runs in the Firefox browser. In addition, there is a firebug Lite version that can be called through JavaScript and included in the page for use in other non-Firefox browsers. This version is not involved in this article.

To install firebug, visit the firebug download page. Click the huge orange button in the middle of the right bar of the page. You can also download it from the Firefox add-ons site of Mozilla. After installation, you only need to restart Firefox.

If you have already installed it, check whether it has been updated to the latest version. Open the "Tools" menu of Firefox, select the "add-ons" command, and click "find updates" in the lower left corner in the pop-up window.

Ii. Enable and disable firebug

On the firebug website, you can find its shortcut key settings. I usually use the following three methods:

* Open firebug: Press F12 or click the green icon on the right of the browser status bar.

* Close firebug: Press F12, click the green icon on the right of the browser status bar, or click the red close icon in the upper right corner of the firebug window.

* Open firebug in a separate window: Click the red arrow icon in the upper-right corner of the firebug window, or press Ctrl + F12/keys + F12.

Firebug settings:

* Fixed firebug opening in the new window: Open firebug first, click the bug icon in the upper left corner, and select "always open in New window" in the Options menu.

* Increase/decrease the font size: First open firebug, click the bug icon in the upper left corner, and select the "text size" command. Each font change is very small, and you may need to use it multiple times.

* Only use firebug for some sites: Right-click the green check mark in the browser status and select the "Disable firebug" command. Then, right-click the dimmed flag and select the "allowed sites..." command to add a domain name that allows firebug to take effect.

Iii. firebug window Overview

* Console Tag: displays JavaScript error messages through the Javascript command line. At the bottom of the page, you can enter the Javascript command at the prompt.

* HTML Tag: displays the HTML source code. As with the DOM hierarchical structure, each line is indented. You can select to display or not display a subnode.

* CSS Tag: You can view all mounted style sheets and modify them on the spot. In the upper part of the firebug window, next to the "edit" command, there is a drop-down list of all style sheets on this page. You can select a style sheet for browsing.

* Script Tag: displays the Javascript file and its page. In the upper part of the firebug window, next to the "inspect" command, there is a drop-down list of all JavaScript files on this page. You can select one to browse. You can set the breakpoint and its conditions in the Javascript command.

* Dom Tag: displays the attributes of all page objects and window objects. In JavaScript, all variables are properties of window objects, so firebug displays all variables and their values.

* Net Tag: displays all downloads on this page, their respective time spent, their respective HTTP request header information, and the server response header information. The xhr tag is useful for Ajax debugging.

4. Edit the page at any time

In the HTML Tag, click the "inspect" command at the top of the window, and then select the text node on the page. You can modify the node and the modification result will be immediately reflected in the page.

Firebug is a source code browser and editor. All objects in HTML, CSS, and JavaScript files can be edited by clicking or double-clicking. After you enter the content, the page in the browser changes immediately and you can get instant feedback. The Dom Browser allows you to thoroughly edit the document structure, not limited to text nodes. In the HTML Tag, click the "edit" command next to the "inspect" command in the upper part of the window. The window below will immediately become a black-and-white text editing window. You canSource codeAny edits. In the CSS Tag, firebug will automatically complete your input. In the DOM tag, when you press the tab key, firebug will automatically complete the attribute name.

5. Use firebug to process CSS

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

Firebug automatically hides CSS rules that are not supported by Firefox. For example, firebug hides CSS-specific settings for Some browsers and some CSS 3 rules that are not supported by them. Therefore, it hides _ Height: 25px; (the underline is a setting for IE6) and P: first-of-type {color: # ff0000 ;}(: first-of-type is a pseudo class specified by css3, which is currently only supported by Safari 3 ). However, this also means that if you happen to have a typing error and some rules cannot be displayed, you only need to use other editors to display all CSS content and find your error.

Firebug allows you to close some statements in CSS, and the page will immediately reflect the corresponding changes, you can view the results immediately. To close a statement, click on the left of the statement to display a red flag. This statement becomes grayed out. Click again to restore the statement.

Firebug allows you to edit CSS attributes and attribute values. You only need to click on them to edit them. The modified effect is immediately displayed in the browser window. The best use of this feature is to allow you to use the arrow keys to increase the number of padding and margin for accurate positioning.

Firebug allows you to add new attributes and attribute values. Double-click an existing selector and a blank attribute name input box appears. After the input is complete, a blank attribute value is displayed.

Vi. Box Model

When you click an element in an HTML Tag, the htmlCodeThe CSS of the element is displayed in the right window. At the top of the CSS window, there is a layout button. After clicking it, the square model related to the element is displayed, including the values of padding, margin, and border. To view the values of each element, click "inspect" and hover the cursor over the element on the page.

VII. Evaluate the download speed

. Net labels graphically show the time used by all HTTP requests on the page. To use this function, you must enable Network Monitoring, which is enabled by default. However, you can disable this option in the "options" drop-down menu. You can use this function to evaluate the Javascript file download time, which occupies the display time of the entire page.

Click on the left of each HTTP request to display the request header information.

After version 1.0.5, you can view the download time of HTML files, CSS files, and image files separately.

8. Dom

The Dom TAG provides information about all attributes of all objects on the page. One of the coolest features of firebug is that it can dynamically modify pages and reflect them in the browser window. However, if you use the browser's built-in source code view function, you will find that the source code has not changed.

9. Javascript debugging

Javascript profiler can report the time it takes to execute your JavaScript function, so you can view the speed impact of different functions. To use this function, open the console tag and click the Profile button above (the upper button order is "inspect | clear | profile "). Firebug lists all called functions and their time spent. You can add console. Profile ([title]) to the front of a function to be tested and console. profileend () to the back of the function ().

At the bottom of the console tag is the command line input, which starts with ">>>. If the command line input has a result output, it is displayed in the upper window. There is a detailed command line Input API worth looking. The firebug built-in console object has several useful methods for calling, including console. debug, lele.info, console. Warning, and console. Error. If these methods generate output results, firebug provides a link for you to view the corresponding code.

Another method for debugging is to set breakpoints. The script tag allows you to pause execution in any row. Click the row number to set a breakpoint. Right-click the row number and you can set a condition for a breakpoint. Only when the condition is true,ProgramThe execution will be paused. There is a watch window on the right to view the value of the current variable.

10. Ajax

As mentioned above, firebug can capture the dynamic content of the page and other dom changes. If you open this example file, click the link on the page, and view the source code in the browser, you will find that nothing has changed, and the source code still contains the link. However, if you view the source code in firebug, you will find that Dom has changed and "Hello world" is included. This is one of the core functions of firebug. Without it, Ajax requests and responses are invisible. With it, you can see that the sent and received text has the corresponding header information. In the net tag, you can also monitor the time consumed by each request/response.

The xhr function in the. NET tag is particularly useful for viewing Ajax operations. If you click the plus sign before each server responds, you will see the header information and content of the server response.

When an XMLHTTPRequest object sends a request to the server, firebug records the post or get content of the request, as well as the header information and content of the response. Use the xhr function in the net tag to view the content. It lists the responses of all servers and the time taken. Click the plus sign (+). For a GET request, three tags are displayed. For a POST request, four tags are displayed:

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

Headers: displays the request and response headers.

Response: displays the information actually received from the server.

Post: displays the information sent from the POST request to the server. (This GET request is not included .)

These four labels are useful for programming and debugging programs. Check the post and Params labels to make sure your request is correctly sent. Check the response tag to view the returned format and determine how to write the corresponding JavaScript processing function.

XI. Notes

* Firebug 1.05 and earlier versions are incompatible with Firefox 3.0.

* Firebug author joe hewitt provides the software for free. To show our love for him, you can consider contributing to him.

* For some advanced applications of firebug, see this Demo Video (http://video.yahoo.com/watch/111597) of joe hewitt ).

(End)