How to use Firebug?

I. Installation of Firebug

Firebug is running in the Firefox browser. There is also a firebuglite version that can be called through JavaScript and included in the page to be used 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 orange-yellow button in the middle right column of the page. You can also download it at Mozilla's Firefoxadd-ons site. Once installed, just reboot Firefox and you can use it.

If you have already installed it, check to see if it has been updated to the latest version. Open the Firefox Tools menu, select the Add-ons command, and click the Findupdates button in the bottom left corner of the pop-up window.

　　Opening and closing Firebug

On the Firebug Web site, you can find its shortcut key settings. I use the following three methods most often:

1. Open Firebug: Press F12, or click on the green flag to the right of the browser status bar.

2. Close Firebug: Press F12, or click on the green flag on the right of the browser status bar, or click on the red close sign in the upper right corner of the Firebug window.

3, in a separate window open firebug: Click the Firebug window in the upper right corner of the red arrow logo, or use the Ctrl+f12/⌘+f12 button.

Related Settings for Firebug:

1, fixed Firebug in a new window open: First open Firebug, click on the top left corner bug flag, select the Options menu Alwaysopeninnewwindow settings.

2, increase/decrease Font size: First open Firebug, click on the top left corner bug flag, select Textsize command. Each font change is very small, you may need to use multiple times.

3, limit the use of Firebug only for certain sites: first right click on the browser state of the Greencheckmark flag, select Disablefirebug command. Then, right click on the already dimmed flag, choose Allowedsites ... command to increase the domain name that allows Firebug to take effect.

　　Iii. Overview of Firebug windows

Console Tags: the main use of JavaScript command line operations, display JavaScript error messages, at the bottom of the >>> prompt, you can type JavaScript commands yourself.

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

CSS Tags: Browse all the loaded style sheets and make changes to 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 in this page, and you can select a style sheet to browse through.

Script Tags: displays JavaScript files and their pages. At the top 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 that appear in JavaScript commands.

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

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

　　Edit the page at any time

In the HTML tab, 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. Objects in all HTML, CSS, and JavaScript files can be edited by clicking or double-clicking. When you have finished typing, the page in the browser will change immediately, and you can get instantaneous feedback. The Dom browser allows you to completely edit the document structure, not limited to text nodes. In the HTML tab, click the Edit command next to the inspect command at the top of the window, and the window immediately becomes a black-and-white text editing window where you can edit the HTML source code arbitrarily. In CSS tags, firebug will automatically fill in your input. In the Dom tab, when you press the TAB key, Firebug automatically complements the full property name.

　　V. Use Firebug to deal with CSS

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

1, for those who Firefox does not support CSS rules, Firebug will automatically hide. For example, Firebug hides CSS-specific settings for some browsers, as well as 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 CSS3 specified pseudo class, currently only SAFARI3 support). However, it also means that if you happen to be typing incorrectly, and some rules can't be displayed, then you can only use the other editor to display all the CSS content and find your error.

2, 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. The way to close a statement is to click on the left side of the statement and a red flag will appear. The statement is dimmed. Click again and the statement will be restored.

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

4, Firebug allows you to add new attributes and property values. The addition method is to double-click an existing selector, and then a blank property name entry box will appear, and a blank property value will appear when you complete the entry.

　Six, box-like model

When you click an element in the HTML tab, the left window displays the HTML code, and the right window displays the element's CSS. Above the CSS window, there is a layout button that shows the box model associated with the element, including the values of padding, margin, and border. To see these three values for each element, simply click the Inspect button and hover over the element above the page with the mouse.

　　Vii. Assessment of Download speed

NET tab, the time spent in all HTTP requests in the page is graphically formatted. To use this feature, you must turn on the networkmonitoring, the default setting is to open, but you can turn this option off in the Options pull-down menu. You can use this feature to evaluate JavaScript file downloads, taking up the entire page display time.

Clicking on the left of each HTTP request displays the header information for that request.

After the 1.0.5 version, you can view the individual downloads of HTML files, CSS files, image files, and so on.

　　VIII. DOM

The DOM tab 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, reflected in the browser window, but if you use the browser's own view Source feature, you will find that the source code has not changed.

　Nine, JavaScript debugging

Javascriptprofiler can report the time it takes for your JavaScript function to execute, so you can see how the different functions affect the speed. The way to do this is to open the Console tab, and then click on the Profile button above (the top button order is inspect| clear| Profile). Firebug lists all the functions that were called and the time it took. You can add a console.profile ([title]) to the front of the function you want to test, and add Console.profileend () to the following section.

At the bottom of the Console tab is the command line input, which begins with >>>. If the command line input has a result output, it will be displayed in the upper window. There is a detailed command line input API that is worth looking at. Firebug built-in console objects have several useful methods to call, 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 see the corresponding code.

Another way to debug is to set breakpoints. The script tag allows you to suspend execution on any line. By clicking the line number, a breakpoint is set. Right-click the line number to set the condition that a breakpoint appears, and the program will only suspend execution if the condition is true. There is also a watch window to the right to view the value of the current variable.

　　Ten, AJAX

As mentioned earlier, Firebug can capture the dynamic content of a page and other DOM changes. If you open this sample file, click on the link on the page, in the browser to see the source code, you will find nothing has changed, the source code still contains that link. However, if you look at the source code in Firebug, you will find that the DOM has changed and HelloWorld 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, which is especially useful for viewing AJAX operations. If you click the plus sign before each server response, you will see the header information and content of the server-side response.

When a request is made to the server by a XMLHttpRequest object, Firebug records the requested post or get content, as well as the header information and contents of the response. You can see these with the XHR feature in the net tag. It lists the responses of all servers and the time spent. Click on the + number above, and if it is a GET request, three tabs will appear, and if it is a POST request, 4 tabs will appear:

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

Headers: Displays header information for requests and responses.

Response: Displays the information actually received from the server.

Post: Displays information sent from the POST request to the server. (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 is correctly issued. Check the Response tab to see the format returned, and determine how the corresponding JavaScript processing function should be written.

Note : More wonderful tutorials Please pay attention to the triple computer tutorial section, triple Computer office group: 189034526 welcome you to join