|
Without much said, Firefox Web Browser is a web browser loved by many web designers and developers. Having the ability to install add-ons, you can customize the web browser to suit your own demanding needs. If you are a web designer or web developer and is not using Firefox Web Browser, then you must be missing something great on the web. You might want to look into some of the interesting Firefox Add-ons below which will help web designers or web developers to increase their work efficiency. 1. Firebug Firebug is the best friend for Web Designers and Web Developers, it allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web pages. 
Add-on Link | Official Link 2. Web Developer The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It allows Disable Cache, JavaScript, View Cookie Information, edit CSS, Resize Browser and many more.  Add-on Link | Official Link 3. YSlow YSlow is an extension for FireBug, it will appear as a tab inside FireBug after you have install this Add-on. What YSlow does is it analyzes web pages and tell you why they are slow based on Yahoo’s rules for high performance websites.  Add-on Link | Official Link 4. FirePHP FirePHP is also another extension for FireBug. FirePHP enables you to log to your Firebug Console using a simple PHP method call. FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required.  Add-on Link | Official Link 5. MeasureIT Want to know the width and the height of an image or the size of the container in a web page? MeasureIT draw a ruler across any web page to check the width, height, or alignment of page elements in pixels.  Add-on Link | Official Link 6. Colorzilla The color looks great on the web page, wonder how to find out the color RGB? With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.  Add-on Link | Official Link 7. ScreenGrab Screengrab! is an extension for Firefox that makes it easy to save a web-page as an image. With it, you can save anything that you can see in a browser window - from a small selection, to a complete page into a JPEG or PNG.  Add-on Link | Official Link 8. Font Finder Like a font on a website, want to know what is the font type, font size and font style that appear on web page? Simply use Font Finder and highlight any text element, right-click, and choose font finder. An alert box will appear with all of the styling information you could require including font-size, font-family, color (in both hex and RGB), line-height, letter-spacing, and much much more…  Add-on Link | Official Link 9. HTML Validator HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.  Add-on Link | Official Link 10. IE Tabs Web designer always want to view how their design looks like in other browser. This IE Tabs Add-on is derived from the famous extension IE View, but much different. While IE View always open IE-only pages in a separate Internet Explorer window, IE Tab can view them in a Mozilla/Firefox tab. Now you can compare the differences of your design between Firefox and IE effectively.  Add-on Link | Official Link 11. Operaview Operaview is very similar to IE View, instead of opening an IE, it open pages in Opera from Firefox and Mozilla context menus.  Add-on Link | Official Link 12. Window Resizer Window Resizer accurately resizes your browser so that you can test to see if the web page you are working on looks right in all of the standard resolution sizes.  Add-on Link | Official Link 13. Pencil Need a simple sketching or GUI Prototyping for your new website? Pencil allow you to sketch and prototyping freely and openly.  Add-on Link | Official Link 14. Fireshot Fireshot provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.  Add-on Link | Official Link 15. PixelPerfect Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.  Add-on Link | Official Link 16. Xmark (Formerly Foxmarks) If you have tons of bookmarks, you cannot miss this out, Xmarks is the #1 bookmarking add-on. Install it on all your computers to keep your bookmarks and (optionally) passwords backed up and synchronized. If something happen to your computer, not to worry, you can retrieve all your bookmarks from Xmarks. Xmarks also helps you uncover the best of the web based on what millions of people are bookmarking.  Add-on Link | Official Link 17. FireFTP Need to upload your files online to your web server? Don’t want to install another FTP program? Then try FireFTP. FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.  Add-on Link | Official Link 18. FlashTracer Flash tracer is a Firefox extension which enables you to see all the output generated by any running flash SWF movies (the output generated by the trace flash method).  Official Link 19. CSS Validator Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page.  Add-on Link | Official Link 20. CSS Viewer Allow you to view CSS properties of related page elements at glance. Want to know why the CSS style is out of place, this is the Add-on you should use.  Add-on Link 21. Greasemonkey Allows you to customize the way a web pages displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available.  Add-on Link | Official Link 22. Javascript Debugger Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.  Add-on Link | Official Link 23. JS View All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their Javascripts and style sheets in external files and link to them within a web page. JS View allow you to switch between the Javascript files that the website is using.  Add-on Link 24. Selenium IDE Selenium IDE includes the entire Selenium Core, allowing you to easily and quickly record and play back tests in the actual environment that they will run.  Add-on Link | Official Link 25. Console² Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content).  Add-on Link | Official Link 26. Dummy Lipsum Need some dummy text for a field? Try Dummy Lipsum which will try to detect the field size and fill it with the “correct” amount of text, or you can configure the default values (for each type of field). Lorem Ipsum dummy text is taken from the Lorem Ipsum site.  Add-on Link | Official Link That’s 26 Firefox 3.0 Add-ons for web designers and developers! Do give these Firefox Add-ons a try, I’m sure you would find them useful. If you have stumble across other cool Firefox Add-ons, you are always welcome to provide them to fill up this featured list.
|