Firefox plug-in tool

The following describes Firefox plug-in tools that are frequently used in web design and production:

1.Firebug

Firebug is an important reason for developers to love Firefox. firebug is an integrated and powerful debugging environment on Firefox. Many debugging application plug-ins must be based on the firebug platform, some Web Testing and debugging tools are introduced below, so firebug is a required tool for every web design developer.

Firebug-Firefox plug-in Installation

After installing it in Firefox as prompted, you can see the firebug icon in the status bar at the bottom of the browser. After you click it, the firebug debugging window is displayed. Besides firebug tools, debugging portal for other selectively installed firebug Platform Plug-ins, such as page speed.

2.Page speed

After Google confirmed that webpage loading speed was a ranking factor in April this year, webmasters paid more attention to page performance. In fact, improving the page loading speed is very important for Seo and user experience. Google also provides this tool to detect page loading speeds.

The page speed plug-in is a Firefox plug-in based on the firebug platform. It rates the loading speed of each page. In addition, it provides optimization suggestions. Therefore, there are page optimizers who can improve the webpage loading performance. This tool is very necessary.

Page speed for Firefox-Official Google plug-in Installation

After the installation, page speed will appear in the firebug window. You can check the loading performance of the current page of the browser and click "analyze performance" in the page speed interface to perform the analysis, page speed scores the analyzed pages with a full score of 100. Of course, the higher the score is, the better. However, the goal of optimization is to score more than 85.

3.Web Developer

You can probably guess the purpose of the tool from the tool name. That's right. It is a powerful Firefox plug-in that integrates many page tests and can view CSS errors and cookies, set up to highlight almost all page elements, such as tables, heading, and image URLs, which is very useful for page debugging, especially when the page structure is very complex, these tools allow you to quickly find the distribution of specific elements.

Xiaolu prefers to use this tool to find the actual images on the page, because in Firefox, the actual images will not show the red cross like IE.

Web Developer-Firefox plug-in Installation

After installation, the tool bar will appear in the browser, for example:

4.HTML validator

It is very important for a webpage to comply with W3C standards. On the one hand, it is designed to make pages compatible across browsers, and on the other hand, it is also designed to allow search engines to smoothly capture and understand your pages. All the important aspects of web page optimization are to allow the page to pass W3C verification. html validator can be used to efficiently detect the HTML of the page.CodeNot only is it effective, but it also shows the location of the error code and provides error description and modification suggestions, which is a very good tool.

HTML validator-Firefox plugin installation

After the installation is complete, a red "Cross" or a green "tick" will appear in the lower right corner of Firefox browser, indicating that the page is invalid and valid. If the green check box is displayed on your page, congratulations! Your code is very standard and you don't have to worry about it. Double-click the Red Cross sign to display the error message, modify the settings one by one as prompted.

In addition, it is worth noting that the validity of HTML code should be subject to the W3C official verification. When using this tool, Xiaolu finds that its verification rules are slightly different from W3C standards, however, they are consistent most of the time. If you are not at ease, use the W3C markup validation service for verification.

5.Simple links counter

During website maintenance, link validity detection is a headache. The numerous links on the page make maintenance more difficult, there may be a lot of chain errors caused by an unrigorous batch search and replacement. This error is intolerable for both the boss and the user. Please be careful when solving this problem. SLC (simple links counter) can automatically check whether the link on the page is valid. You can say that there is also a link check in Dreamweaver. Yes, DW comes with the link check function, however, DW detection is limited to intra-site links, so there is no way to detect out-site links.

In addition to checking the link validity, SLC can also display the number of out-of-site links, in-site links, and specific link URLs on the page, which is convenient for checking the website's out-of-site links.

Simple links counter-Firefox plugin installation

6.X-ray

If you can see in the browser that the page content is contained by some HTML tags, isn't it intuitive? X-ray is such a tool. In the eyes of front-end designers, a common webpage is not only a text image, but a structure composed of various web labels. However, these images are purely stored in the brain of designers, x-ray provides a way to visualize it, especially when Browsing other websites.

X-ray-Firefox plugin installation

After installation, an "X-ray" option is added to the browser mail menu. The disadvantage of this tool is that it will make the page messy, but as long as there are not too many page objects to study, it can still be handled.

7 .Yslow

There is a more powerful webpage performance optimization tool than Google Page speed, namely yslow, which is a page performance evaluation and optimization tool provided by Yahoo. yslow also has a page performance score, interestingly, when the yslow score is close to the two pages, the page speed score is far from each other. during actual page optimization, the yslow score is not an important reference, yslow provides more useful information. It can count all elements contained in a webpage, including image files, CSS files, and JS files, and displays the number of HTTP requests on the page, xiaolu believes that this is one of the most important indicators for page performance optimization. Therefore, targeted Optimization Based on yslow information can produce very obvious results.

Install yslow-Firefox plug-in

Yslow is also a plug-in for the firebug platform and needs to be run in firebug.

8.Colorzilla

Recall how we color the webpage? First, open the graphic software (such as PS or fireworks), import the page, and use the color picker in the software to obtain the color at a certain position on the image, then copy the RGB or hexadecimal values of the color to Dreamweaver. If there is no such value, we need to first, the amount, which is a waste of time.

In addition to some commonly used colors, few people can accurately obtain the color value when they see the color. In fact, there is a Firefox plug-in that can help you "say" the color value: colorzilla can obtain any color value in the browser and express it as RGB and hexadecimal values, which can be easily copied and used, greatly improving the work efficiency when creating and modifying pages.

Colorzilla-Firefox plugin installation

9.Measureit

In addition to color, it is also very important to accurately measure the size of page elements, especially when designing "pixel School" for pages like Xiaolu and debugging pages, you also need to know the size of some elements to determine whether they meet the reserved space. Measureit is a convenient page measurement tool. You only need to drag the mouse to complete the measurement. Is it intuitive?

Install the measureit-Firefox plugin"