Firebug and YSlow Introduction and the use of graphic explanation

Firebug This is the next great web design plugin for Firefox browser, with the development of the browser, Firebug also launched the support IE, Opera, Chrome Firebug Lite. With Firebug's excellent code debugging capabilities, Firefox has become a must-have browser for web designers, and in order to fight against Chrome, IE, opera and other browsers are constantly launching their own web development plug-in, but overall still firebug prevailed.

The author briefly introduces the installation and basic use of the firebug, and its more powerful functions await the reader's own practice.
Firebug's official address is http://www.getfirebug.com, where Firefox versions are available for different browsers, and Firefox is also available through Firefox App Store search. The following is the example of Firefox under Firebug for specific instructions.

First, the installation of Firebug
After installing the latest version of Firefox (in this case version 5.0.1), click on the upper left corner of the Firefox menu and select Add-ons such as:

After you enter the "firebug" keyword in the search field that appears, Firebug search results appear, click Install, restart the browser to complete the installation process, such as:

Second, the start of Firebug
Complete the installation, restart the browser, you can press the "F12" shortcut to start the Firebug plug-in, you can also click on the right side of the Firefox address bar Firebug icon to start, after launch, the page will display columns, firebug the functions shown below, as shown:

Press the F12 key again or firebug the Close button in the upper right corner to turn off Firebug.
Firefox's main menu options are console, HTML, CSS, scripting, DOM, network Six, the use of these functions can meet the requirements of web design.
The Extra YSlow menu option in this example is explained below because the browser has installed the YSlow plugin.

Three, Firebug function introduction
1. Console function:
The main function of the console is to display various types of error messages on the Web page and to print the logs. It can also be used as a command-line window for JavaScript debugging and provides information about the execution of JavaScript code through the overview sub-option. As shown in the following:

Specific Firebug under the console application, can refer to this address http://04101334.iteye.com/category/49170 under the explanation.
2. html function:
This menu label function, mainly used to view the current page of the source code features, and can be edited, always display, in order to achieve the best results page. After enabling this tab, the interface is as follows:

The whole page is divided into two parts, the left side shows the current page source code, the right side of the page contains the relevant CSS style information and DOM information, more common source code display more intuitive and specific.
Double-click on the left source of any element of the property values, an editable hover, you can edit the properties, and can see the effect of the modification.
3, CSS Features:
Click the CSS menu tab to see all the CSS definition information, and you can also double-click to modify the page style effect, as shown in:

4. Scripting (Javascript) Features:
Script function is mainly a script debugger, can be single-step debugging, breakpoint settings, variable view and other functions, while the right monitoring function to achieve the script run time to view and statistics, improve operational efficiency, as shown in:

5. Dom function:
This feature is mainly used to view the page DOM information, provide a fast and accurate DOM positioning by providing the search function, and can double-click to implement DOM node properties or value modification, such as:

6. Network (NET) function:
This label function is mainly used to monitor the running time of each component of the webpage, so as to find out the slow running part and further optimize the running efficiency, such as:

Iv. Introduction and use of YSlow
In addition to the Firebug's own network monitoring function, there are many Firebug monitoring plug-ins to provide more detailed monitoring information report, in this introduction of the leader, YSlow.
YSlow: Http://developer.yahoo.com/yslow, only after the Firebug installed in the browser, YSlow to successfully display, after the successful installation will be firebug after the network menu options to add an option named YSlow, As shown in the first picture of this article.
Click YSlow, the following screen appears, select "Run Test", which by default is the page load automatically run YSlow, such as:

YSlow provides three different ways to view statistics, respectively, grade, components, Statistics, respectively, the following are:
1, Grade
After testing the Web page by YSlow the default 23 performance test rules (YSlow V2), the rating of the Web page operation is given. Level is a-f, where a is the highest level. If a test rule is not related to the page, the N/A identifier appears earlier, such as:

In addition to the evaluation of a certain rule and the overall performance of the Web page, YSlow also gives corresponding reference suggestions after each rule evaluation.
Performance test rules can be selected in the YSlow rulesets, there are YSlow V2, Classic V1, SAMLL Site or blog three categories, which contain several optional rules, such as:

2. Components
Displays information about the components of the Web page, double-click the component name to expand and view the details as shown in:

3, Statistics
This statistic, in the form of a pie chart, shows the information about the opening of the page in both emptying the cache and loading the cache, as shown in the following:

Where the left is the empty cache, and the right side is the data when the cache is loaded.
YSlow In addition to the above three categories of statistics, but also in the Tools option provides a number of more practical tools, mainly including the different requirements to display the page's JavaScript and validation, CSS information collection and display, picture optimization recommendations, etc., can be attempted to operate, as shown in:

Firebug and YSlow Introduction and the use of graphic explanation