20开发者和设计者必备的Firefox插件

在web开发和设计中,我们常常会遇到脚本或页面布局等方面的调试工作,这时候就需要一个好的浏览器,比如说Firefox,因为Firefox能支持很多插件供你使用,它们都非常的方便,会给你的开发和设计带来无限的乐趣。firefox使用者可以通过安装扩展来新增或修改 Firefox 的功能。扩展的种类包罗万象:像鼠标手势、广告窗口阻挡、增强的分页浏览等等。Firefox 的开发有时也会集成扩展的功能,下面就给大家推荐一些Firefox中常用的插件。

1. Firebug

Firebug

Firebug被认为是开发者和设计者必备的工具, 它与Firefox完美结合, 为用户浏览页面时提供强大的易用的开发工具,其特性包括即时编辑,debug,辅助设计网页中的CSS,HTML,JavaScript, 一旦拥有,别无所求

2. HTML Validator

HTML Validator

HTML Validator, 不出所料, 在Firefox中内置的HTML验证器,当一个页面在浏览的过程中,任何可以检测到的HTML错误都会以图标的形式在状态栏中显示

3. IE Tab

IE Tab

通常我们在开发过程中经常会要求兼容不同的浏览器,如IE,Firefox等,当时我们的做法是在IE和Firefox浏览器间来回切换,而现在有了IE Tab,只要一次点击就可以看到你的页面在IE里的样式及运行状况,而且只要再一点击即可简单地回到Firefox里,一个对开发者非常有用的工具。

4.ColorZilla

ColorZilla

ColorZilla是一款对设计者非常有用的附加插件,尤其是那些在某些网站发现的从未准确复制为自己所用的朋友们,其特点包括先进的拾色器,页面缩放工具等,这意味着你可以在你的浏览器中取到色彩并且把它转到成你自己的调色板中,以便在接下来的页面设计中用到。其他便利功能包括缩放功能,它允许你去测试页面中任意两点间的距离。

5.MeasureIt

MeasureIt

顾名思义,它是用来测量的,你可以使用它来画出一个尺子来测试你所浏览页面中任何可视元素的宽和高的像素,简单高效,是设计者的一个委好的工具。

6. WebDeveloper

Web Developer

Web Developer一款开发者和设计者必备的又一利器,它可以屏蔽脚本、样式供你调试,而且还可以操作Cookie,功能多且强大。

7.Yslow

Yslow

Yslow integrates with Firebug in order to analyse web
pages and suggest ways of improving their performance. It grades pages based
on one of its three pre-defined rule sets for high performance websites, or
based on a more individual user-defined rule set, fully customisable by the
developer. After analysing the page’s performance, YSlow provides a set of
statistics about the page and also offers suggestions for areas of improvement
and ways to make the page quicker, enabling the developer to see exactly where
a page is going wrong.

8.Aardvark

Aardvark

Aardvark is a user-friendly selector tool which allows
developers to select elements of a web page and perform specific actions on
them, including editing their size and location within the page, as well as
adding and removing different aspects to suit your needs. A simple right click
is all that is needed to begin the editing process, and with a feature that
allows users to analyse the structure of the page, Aardvark is becoming
increasingly popular with novice and experience developers alike.

9.Greasemonkey

Greasemonkey

Greasemonkey is a relatively simple app that allows
developers to customize the way in which a website displays by using small
bits of JavaScript. The plug-in offers access to an online library of scripts
already for a wide range of popular websites, as well as the ability for web
developers to write their own.

10. FirePHP

FirePHP

FirePHP is a handy plug-in for developers who already use
FireBug. By using a simple PHP method call, users are able to log in to their
Firebug Console. To use, Firebug must already be installed and a PHP library
downloaded. For developers looking to improve their Ajax development, FirePHP
is a very useful tool.

11.ScreenGrab

ScreenGrab

ScreenGrab is a great tool to have at hand when something
unexpected catches your eye on a webpage. It allows you to save the webpage,
either in its entirety or just a segment of it, as an image to either a file
or your clipboard, to be used at a later date. And as long as you have Java
installed in your browser, it can capture Java or Flash that’s embedded in the
page too.

12.FireShot

FireShot

FireShot is relatively similar to ScreenGrab in that
allows users to take screenshot of either part of or the whole webpage you are
browsing. Where FireShot differs, however, is that it provides a set of
graphical or text annotation tools, making it particularly useful for
designers who want to use a page as a specific example of how they design
their own. And as all screenshots can be uploaded to free public screenshot
sharing sites, sharing ideas with clients or colleagues has never been
easier.

13.FoxyProxy

FoxyProxy

One common complaint from developers working on Firefox is
the limited proxying capabilities, which is where the amusingly named
FoxyProxy comes in. It uses animated icons to inform the user when a proxy is
in use, and advanced logging system means you can track what proxies were used
where and at exactly what time. As the website says, FoxyProxy is fully
compatible with Portable Firefox, has better support for PAC files than
Firefox itself, and is translated into more than 25 languages. What’s not to
like?

14. Window Resizer

Window Resizer

If you want to see how your website looks on screens of
various different sizes, Window Resizer is the add-on for you. View your site
at 640x480, 800x600, 1024x768, 1280x800, 1280x1024 and 1600x1200 resolutions.
This handy tool is easily accessible through the Context menu, Tool menu or by
clicking on a Toolbar icon.

15. Library Detector

Library Detector

Ever wonder which JavaScript libraries are being used on
the page your viewing? Wonder no more. Library Detector, which supports
jQuery, jQuery UI, Prototype, Scriptaculous, Dojo, YUI, Qooxdoo, MooTools and
Spry, reveals this in an instant. Be inspired by other peoples’
creations.

16. SEOQuake

SEOQuake

Use SEOQuake on the fly to analyse your own SEO efforts
and the SEO efforts of competitors. SEOQuake’s SEOBar gives you an instant
snapshot of selected SEO parameters for the page you’re viewing. Parameters
include Google PR, Google Index, Google link and similar parameters for other
search engines including Yahoo!

17.GridFox

18\. GridFox

GridFox lets you overlay a grid onto any website- it’s as
simple as that. You can customize your grid to suit your specifications, using
GridFox to maintain faultless grid-based layouts. Once installed, you can
right click on any site to access the simple GridFox menu.

18. FireFTP

FireFTP

FireFTP is a free, cross-platform, secure, multi-language
FTP client. Besides providing access to FTP servers, FireFTP lets you compare
directory content, search, filter, compress, drag and drop. It comes with
tutorials and help files for new users.

19. View Dependencies

View Dependencies

View Dependencies is a really useful add-on for
developers. It provides you with a list, accessible through the Page Info
window, showing which files were loaded to view the current page you’re
viewing. Files are ordered by size and type, for ease of use, and can be
opened in a new tab or window.

20. LinkChecker

LinkChecker

This plugin (from the developer of MeasureIt and numerous
others) allows the user to very quickly determine the type of links on a page.
This means it’s easy for you to see broken links or redirects as you browse
your site. You can customise the colours used and also exclude certain anchor
text.