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
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 Viewer||Css Viewer||Script section times||Dom Viewer||Network Status Monitor|
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:
- console.log ("hello world")
If you have a bunch of parameters need to be combined with the output, can be written like this:
- 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.
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.
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
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 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
Figure 8: Dom Viewer
The Chinese meaning of Firebug Firefly, the author is Joe Hewitt, the official website http://www.getfirebug.com
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:/ / www.firefox.com
Firebug Start Guide
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: http://www.evotech.net/blog/2007/06/introduction-to-firebug/
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
First, install Firebug
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.
* 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.
* 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.
3, Firebug Window Overview
* 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.
* 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.
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.
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.
7, evaluation download speed
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.
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.
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.info, 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.
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.
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.)
* 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 .
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.
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.
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.
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:
F12 can call out using the Firebug.