Firebug Getting Started Guide (GO)

This article transferred from: http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

Nanyi

Date: June 8, 2008

It is said that for Web developers, Firebug is one of the best plugins in the Firefox browser.

I recently learned how to use Firebug, online to find a tutorial for beginners, feel more useful, translated out.

=================

Firebug Getting Started Guide

Estelle Weyl

Original URL: http://www.evotech.net/blog/2007/06/introduction-to-firebug/

Translator: Ruan Yi Feng

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

Directory

First, install the Firebug
Second, open and close Firebug
Three, Firebug window overview
Iv. edit the page at any time
V. Using FIREBUG to process CSS
Six, box-shaped model
Vii. Evaluation of Download speed
Eight, DOM
Nine, JavaScript debugging
X. AJAX
Xi. notes

First, install the Firebug

Firebug is running in the Firefox browser. There is also a Firebug lite version that can be called by JavaScript and included in the page for use in other non-Firefox browsers. This version is not covered in this article.

To install Firebug, please visit the Firebug download page. Click on the large yellow-orange button in the right-hand column of the page. You can also download it at Mozilla's Firefox add-ons site. Once installed, just restart Firefox and you can use it.

If you've already installed it, check to see if it's updated to the latest version. Open the "Tools" menu in Firefox, select the "Add-ons" command, then click on the "Find Updates" button in the lower left corner of the pop-up window.

Second, open and close Firebug

On the Firebug website, you can find its shortcut settings. I use the following three ways most often:

* Open Firebug: Press F12, or click the green flag on the right side of the browser's status bar.

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

* Open Firebug in a separate window: Click the red arrow in the upper right corner of the Firebug window, or use the Ctrl+f12/?+f12 button.

Firebug Related settings:

* Fixed firebug Open in new window: First Open Firebug, click on the bug flag in the upper left corner, select "Always Open in new window" setting in the Options menu.

* Increase/Decrease Font size: First open Firebug, click on the bug flag in the upper left corner, select the "Text size" command. Each time the font changes in very small amplitude, you may need to use multiple times.

* Limit the use of Firebug only for certain sites: Right-click the green check mark flag on the browser state and select the Disable Firebug command. Then, right-click on the grayed out flag and select the "Allowed Sites ..." command to increase the domain name that allows Firebug to take effect.

Three, Firebug window overview

* Console tag: Mainly use JavaScript command line operation, display JavaScript error message, at the bottom of the >>> prompt, you can type JavaScript command yourself.

* HTML Tags: Displays the HTML source code, and, like the DOM hierarchy, has indentation before each line. You can choose to display or not display a child node.

* CSS Tags: Browse through all the already loaded style sheets and modify them on the spot. At the top of the Firebug window, next to the "edit" command, there is a drop-down list of all the style sheets on this page, and you can select a style sheet for browsing.

* Script Tag: Displays the JavaScript file and the page on which it resides. In the upper part of the Firebug window, next to the "inspect" command, there is a drop-down list of all the JavaScript files on this page, and you can select one to browse. You can set breakpoints (breakpoint) and the conditions they appear in JavaScript commands.

* DOM Tag: Displays the properties of all Page objects and window objects. Because in JavaScript, all variables are properties of the Window object, so Firebug displays all the variables and their values.

* Net Tags: Displays all downloads involved in this page, as well as their respective time spent, the respective HTTP request header information and the server response header information. XHR tags are useful for Ajax debugging.

Iv. 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 in the page, you can modify it, and the result will be immediately reflected in the page.

Firebug is also the source browser and editor. All objects in HTML, CSS, and JavaScript files can be edited with a click or a double tap. When you are finished typing, the page in the browser changes immediately, and you can get instant feedback. Dom Browser allows you to thoroughly edit the document structure, not limited to text nodes. In the HTML tab, click the "edit" command next to the "inspect" command in the upper part of the window, and the window below will immediately turn into a black and white text editing window where you can edit any HTML source code. In the CSS tab, Firebug will automatically fill in your input. In the Dom tab, Firebug automatically complements the full property name when you press the TAB key.

V. Using FIREBUG to process CSS

In the Dom tab, the Style property of each HTML element reveals all of the CSS settings for that element. You can double-click to edit these settings.

For those CSS rules that Firefox does not support, Firebug is automatically hidden. For example, Firebug hides CSS-specific settings for some browsers, and some CSS3 rules that it does not support. So, it hides the _height:25px; (the underscore is a setting for IE6) and p:first-of-type {color: #ff0000;} (: First-of-type is a pseudo-class defined by CSS3, currently only supported by Safari 3). However, this also means that if you happen to have typographical errors that cause some rules not to appear, then you only have to use the other editor to display all the CSS content and find your error.

Firebug allows you to close some of the statements in the CSS, the page will immediately reflect the corresponding changes, you can immediately see the effect. "Close" a statement by clicking on the left side of the statement, a red stop flag appears. The statement will be dimmed. Click again and the statement will resume.

Firebug allows you to edit CSS properties and property values. You can edit them just by clicking on them. The modified effect is immediately displayed in the browser window. The best use of this feature is to determine the exact positioning of the padding and margin, Firebug allows you to use the arrow keys per unit increase.

Firebug allows you to add new attributes and property values. The Add method is to double-click the existing selector, and then a blank property name entry box appears, and a blank property value appears when you finish typing.

Six, box-shaped model

When you click on an element in the HTML tag, the left window displays the HTML code, and the right window displays the element's CSS. At the top of the CSS window, there is a layout button that, when clicked, shows the block model associated with the element, including the values of padding, margin, and border. To see this three-item value for each element, simply click the "Inspect" button and hover over the element in the page with your mouse.

Vii. Evaluation of Download speed

NET tag, the time spent in all HTTP requests in the page is graphically formatted. With this feature, the network monitoring must be turned on, and the default setting is open, but you can turn this option off in the Options drop-down menu. You can use this feature to evaluate the download of JavaScript files, taking up the time of the entire page display.

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

After 1.0.5, you can view the individual download time of HTML files, CSS files, image files, etc.

Eight, DOM

The DOM tag provides information about all the properties of all objects on the page. One of the coolest features of Firebug is that it can dynamically modify the page to be reflected in the browser window, but if you use the browser's own view source function, you will find that the source code has not changed.

Nine, JavaScript debugging

JavaScript Profiler can report the time it takes to execute your JavaScript functions, so you can see how different functions affect speed. To use this feature, open the Console tab and click the Profile button above (the upper button order is "Inspect | Clear | Profile "). Firebug lists all the functions that were called and the time they took. You can add Console.profile ([title]) to the front of a function you want to test, plus console.profileend () at the rear.

At the bottom of the console tag is the command line input, which begins with ">>>". If the command line input has a result output, then it will be displayed in the upper window. There is a detailed command-line input API worth looking at. The Firebug built-in console object has several useful methods to invoke, including Console.debug, Console.info, console.warning, Console.error, and so on. If these methods produce output, Firebug will provide a link for you to view the corresponding code.

Another way to debug is to set breakpoints. The Script tab allows you to pause execution on any line. When you click the line number, a breakpoint is set. By right-clicking the line number, you can set the condition that a breakpoint appears on, and the program pauses execution only if the condition is true. There is also a watch window on the right to see the value of the current variable.

X. AJAX

As mentioned earlier, Firebug can capture the dynamic content of the page and other DOM changes. If you open this sample file, click on the link on the page, view the source in the browser, you will find that nothing has changed, the source still contains the link. However, if you look at the source code in Firebug, you will notice that the DOM has changed and that "Hello World" has been included. This is one of the core functions of Firebug, without which Ajax requests and responses are invisible. With it, you can see the sent and received text that has the corresponding header information. In the Net tab, you can also monitor the time each request/response takes.

NET tag is particularly useful for viewing AJAX operations in XHR. If you click on the plus sign before each server-side response, you will see the server-side response header information and content.

When a request is made to the server side through the XMLHttpRequest object, Firebug logs the requested post or get content, as well as the header information and content of the response. You can see this by using the XHR feature in the net tag. It will list the responses of all servers and the time spent. Click on the previous + sign, if it is a GET request, will display three tags, if it is a POST request, will show 4 tags:

Params: Displays the Name/value pairs contained in the request URL.

Headers: Displays the header information for the request and the response.

Response: Displays the information actually received from the server.

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

These four tags are useful for writing and debugging programs. Check the post and params tags to make sure your request was sent correctly. Check the Response tab to see the returned format and determine how the corresponding JavaScript handler function should be written

Firebug Getting Started Guide (GO)