Firefox adalah browser yang sangat populer plus nilai lebihnya firefox didukung Addons, Themes, Plugins. Untuk mengoptimalkan dan memudahkan kita berselancar didunia maya begitu juga untuk mendukung berbagai aktivitas dan kerjaan yang membutuhkan browser yang tangguh, firefox didukung dengan ribuan addons yang akan mempercantik firefox dan memberikan ribuan fitur yang bisa kita manfaatkan. Berikut ini addons yang keren-keren untuk para web developer dan web designers.

1. Web Developer

This is the Swiss army knife of Web development add-ons. Web Developer gives you a toolbar packed with useful features.

You can also turn off the toolbar and access the same features via Tools > Web Developer, or by right-clicking in the page. This is great for reducing toolbar clutter!

With the Web Developer add-on you can:

• Temporarily disable browser features such as caching, JavaScript, images and CSS
• View, manipulate, create and delete cookies
• View and edit a page’s CSS and HTML on the fly
• Manipulate forms and form data
• View all sorts of details about elements in the page
• Measure page elements with the Line Guides and Ruler features
• Highlight different types of elements within the page (great for debugging CSS layouts)
• Resize the browser window to various preset sizes (good for checking compatibility)
• Validate a page’s HTML and CSS with the W3C validators
• View a page’s JavaScript-generated source — fantastic for debugging AJAX stuff

In my opinion, Web Developer is an must-have tool if you do any sort of Web design or development work.

2. Firebug

Firebug is a comprehensive suite of debugging tools along the lines of Web Developer. You can enable it on a page-by-page basis by clicking the little bug icon in the status bar.

Amongst other things, you can use Firebug to:

• View and edit the page’s HTML, CSS and JavaScript
• Right-click any element in the page to inspect it
• Add breakpoints to the page’s JavaScript to debug it at certain points
• See the page’s DOM tree
• View download times, bottlenecks and HTTP headers

It even has a built-in JavaScript command line and console for debugging (and it’s nicer than the JavaScript Debugger add-on too).

A nice thing about the HTML inspector is that its Layout view shows you the CSS box (margin, padding and so on) around the currently-inspected element, and adds rulers and guides to the page so you can check everything’s lined up. Very cool.

Personally I prefer to use the Web Developer add-on, as I find Firebug has (ironically) got rather buggy and slow recently. However, Firebug does have some neat features not in Web Developer, such as being able to inspect any element by right-clicking it, as well as the aforementioned JavaScript debugger and Layout view.

3. SEO for Firefox

There are quite a few Firefox add-ons that can help you with SEO, but SEO for Firefox is the best in my opinion. Search for your target keywords on Google or Yahoo!, then click the SEO icon in the status bar to turn on the add-on. It then adds all sorts of useful info to each entry in the search results page, such as:

• The entry’s position in the search results (surprisingly useful!)
• The page’s Google PageRank
• Its age (the older the better from an SEO perspective)
• Number of inbound links to the page
• Number of bookmarks on del.icio.us
• Alexa rank

…and lots more besides. Unlike some add-ons, it just displays links to this info by default, rather than the info itself. This is a good thing, as it reduces the chance of your computer being blocked by search engines and other sites for requesting too much info at once.

You have to sign up for an SEO Book account to get the add-on, but it’s worth it.

Other honourable mentions in this category include SEO Toolbar (also from SEO Book), Foxy SEO Tool and SearchStatus. These all work with the page you’re viewing, rather than with a search results page.

4. HTML Validator

Validating webpages is one of those chores that you know you should do, but inevitably end up forgetting about when it comes to putting the site live. The great thing about this add-on is that it “auto-validates” your pages as you view them; if you see a red cross in your status bar you know that the page has failed validation. No excuses!

You can use one of two validators (or both): SGML Parser (as used by the W3C validation service) or HTML Tidy. As a nice touch, the add-on includes a feature to clean up your page markup, as well as the ability to check that your page conforms to the WAI accessibility guidelines (priorities 1, 2 and 3).

5. Save Complete

I often want to mess about with an online webpage’s HTML and CSS for debugging purposes. Firebug and Web Developer let you do this to some extent, but they’re a bit limited and, of course, they only let you preview changes in Firefox.

Enter Save Complete. This lets you save a webpage along with all its assets (CSS, images, and so on) to a folder on your hard drive. You then have a full local copy of the page that you can edit to your heart’s content, and open with any browser on your computer. Very handy for debugging and testing.

Unlike Firefox’s regular Save Page As > Web Page, Complete option, this add-on really does save pretty much everything: JavaScript files, style sheets, images referenced from CSS, and so on. It’s not perfect but it does a really good job. Also handy if you want to archive a permanent copy of any webpage on your computer.

6. FireFTP

An entire FTP program inside your Web browser might sound like a terrible idea, but in fact FireFTP is rather swish. There’s something nice about having an FTP client always at hand in the browser, since that’s where you tend to spend most of the time when coding webpages.

You can open it in a separate window or in a tab, and it’s very easy to use. It also supports advanced stuff like TLS/SFTP, directory syncing, and even FXP. Many developers I know even prefer FireFTP to the separate Mozilla FTP client, FileZilla.

7. Screengrab

Takes screen shots of webpages. Great for sending mockups to clients. The nice thing about Screengrab is that it can capture the entire page, even if it doesn’t fit in the browser window. You can also grab just the visible portion of a page, or a selection. Screen shots can be saved out to files, or copied to the clipboard.

If you like Screengrab you might also like Shooter. It does the same basic job but it’s a bit easier to make selections. It can’t, however, copy the screen shot to the clipboard (at the time of writing).

8. HttpFox

This add-on lets you analyze, in real time, the data that is sent between Firefox and the Web server. You can see the full HTTP request and response headers; any sent or set cookies; posted form fields, and so on. This is handy if you do a lot of server-side coding using PHP, for example.

You can also filter on a string of text, which makes it really easy to find the particular header you’re after.

9. User Agent Switcher

Another one from the author of Web Developer, Chris Pederick. This add-on lets you alter the User-Agent string that Firefox sends to the Web server. This allows Firefox to impersonate other browsers such as IE and iPhone, and search engine crawlers such as Googlebot.

The Googlebot option has saved my bacon on at least one occasion when sites weren’t getting indexed by Google. It turned out that, when a site was accessed by Googlebot, it was triggering a bug in the site’s robot detection code and crashing the server. Doh!

10. ColorZilla

ColorZilla is a tool for analyzing colours in a webpage. Click its icon in the status bar, then hover the mouse over a pixel in the webpage to see its colour value. Click to select the colour; you can then right-click the status bar icon to copy the RGB values in a variety of formats for pasting into your style sheet.

Other handy features of ColorZilla include:

• A Photoshop-style colour picker and palette browser
• A zoom feature to make it easier to click a colour in the page
• A DOM colour analyzer that gives you a palette of all colours used on the page, and lets you see which page elements use which colour

ColorZilla is a nice way to quickly eyedrop colours from a Web page without having to mess about in Photoshop. Great for CSS development.

Other Addons :

CSS Validator: CSS Validator adds a right-click option in your browser, sending the CSS to the W3C CSS Validator. It opens the results in a new tab. CSS Validator is a nice tool that will come in handy often.

FirePHP: FireBug is a fine tool for CSS, HTML, and JavaScript, but FirePHP, which only works when you have the FireBug extension installed, creates a full-featured development experience. With the help of both add-ons, you can view the quality of your PHP and find errors. It’s a great aid.

Font Finder: Font Finder allows you to highlight a font you like on any site, right-click on the selection, and after choosing “Font Finder�, view the full CSS text styling of the selection. You can then paste that into your own Web page.

Aardvark – A cool extension for web developers and designers, allows them to view CSS attributes, id, class by highlighting page element individually.

Flash Switcher – Use this extension to avoid reloading between flash plugins.

Window Resizer – Automatically resize your browser window between 640×480, 800×600, 1024×768, 1280×1024, 1600×1200 to see how pages appear at these resolutions.

Screen grab – Capture screenshot of any webpage and save it as an image file with this extension.

source by : www.elated.com, www.technobuzz.net