The Design Superhero

You know, the number one browser – Firefox has cool add-ons which make the job of website designers and developers much easier. Here I have a list of excellent Firefox add-ons that every web developer and designer should know.

1. Web Developer

A developer essential, Web Developer adds an array of custom tools and menus to Firefox. Use it in tandem with Firebug for maximum functionality and control over your code.

2. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

3. FireFTP

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!

4. ColorZilla

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

5. Greasemonkey

Allows you to customize the way a webpage displays using small bits of JavaScript. … Allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org. You can write your own scripts, too. Mark Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will show you how.

6. View Source Chart

* Draws A Color-Coded Chart of a Web Page’s Source Code Source Charting… * Graphically Displays HTML Tag Boundaries * Graphically Defines Tag Nesting Order, Structure and Hierarchy * Adds A Simple but Powerful User Interface *TO* Source Code WHAT SOURCE CHARTING DOES THAT INDENTATION-ONLY FORMATTING DOES NOT: Source Charting Allows the User To… * quickly scan and recognize a document’s tags without reading a single tag * see how deeply nested an element is just by looking to its left (no scrolling/finding/reading tags) * identify an element’s containing tags without having to scroll, find and read each tag

7. Screengrab!

Screengrab saves entire webpages as images. It will save what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images.

8. Split Browser

This splits the content area of the browser window as you like. It will help you in various cases. For example, to compare multiple webpages, to show a calendar always, and so on. There is some ways to split window. * Choose the “Split Browser to” menu in the context menu. * Choose the “Load in Split Browser” menu in the context menu on link. * Click popup-button on top/bottom/left/right edges of the content area. * Drop links, bookmarks, etc. to popup-button on top/bottom/left/right edges of the content area while dragging. You can split browser infinitely, as many as your RAM and your screen allow. Enjoy split and split to your heart’s content!

9. Resizeable Textarea

A lot of forums and boards provide very small textareas for new postings. If you type a longer posting, you have to scroll up and down, to read what you have written and to proceed. This situation is annoying. Now here is my solution: Resizeable Textarea extension. It lets you resize most of those text areas.

10. Copy Plain Text

Have you ever copied text from a website and pasted it into an email program, such as Thunderbird, but been frustrated that the text formatting (bold, italic, font, etc.) were copied with it? This extension copies the text without all the formatting.

11. Clipmarks

Clipmarks lets you clip and share pieces of web pages. Instead of having to bookmark entire pages, our Firefox add-on lets you “clip” the best parts (text, images and video).

You can share your clips anywhere with our ClipCast widget and save them to your online collection at clipmarks.com. Clips can also be emailed, printed or posted directly to your blog. Add the Clipmarks Application to Facebook to share clips with your friends there.

12. FirePHP

Find out what PHP code in the backend does to pages on display in Firefox browsers.

13. Codetch

Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.

14. ScribeFire

ScribeFire (previously Performancing for Firefox) is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. You can drag and drop formatted text from pages you are browsing, take notes, and post to your blog.