* This post is regularly updated. *
Approximately 60-70% of CSS Juice visitors are Firefox users, so i had an idea to create a complete list of Firefox Extensions / add-ons for web designers and developers. After a pain searched and tested, here is some of useful extensions you would happy to install. Same words, the list will keep update if i find more. Anyway, only a part of these extension have been tested by myself. Make sure to read the complete description of each add-on before you download from Firefox. Let me know which one is valuable or not and you are current using.
Source code Viewer and Editor
1. CSSViewer – simple and useful extension for view any part of CSS property at current pages. Recommended!
2. EditCSS – it is easy way to view or modifier any stylesheets in the Sidebar just right click or “Shift+Ctrl+8″.
3. Firebug – view, edit, and monitor CSS, HTML and Javascript live at any web pages. There is a small green click added at the bottombar after installation.
4. View formatted source – similar with CSSViewer, displays formatted and color-coded source for each element.
5. CSSMate – online CSS editor extension, similar with EditCSS.
6. ViewSourceWith – let you view page source with external applications.
7. Font Finder – simply highlight a single element and right click to view all CSS style.
8. Live HTTP Headers – View HTTP headers of a page and while browsing.
9. Modify Headers – allows you to add, modify and filter http request headers.
10. Professor X – let’s you see inside a page’s head without viewing the source code.
Web page Validators
11. CSS validator – one click to valid a page using the W3C CSS validator.
12. Validaty – Provides you a button to validate a page using a validator like validator.w3.org.
13. Html Validator – adds HTML validation inside Firefox and Mozilla.
14. SourceEditor – view and edit source of HTML element.
15. Total Validator – provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking.
16. LinkChecker – Check the validity of links on any web page.
Miscellaneous
17. Web Developer – Adds a menu and a toolbar with various web developer tools.
18. Style Sheet Chooser II – allows you to choose author-provided alternate style sheets for a web site.
19. View Dependencies – lists all the files which were loaded to show the current page at a tab of “page info” window.
20. Accessibar – enabling easy manipulation of web page display and text-to-speech output.
21. Aardvark – used for cleaning up a page prior to printing it for making the page more readable and analyzing the structure of a page.
22. Copy as HTML Link – creates an HTML link to the current page using the selected text, copy and paste into other applications.
23. TableTools – sorts, filters or copies any HTML table.
24. CHM Reader – make firefox support Compiled HTML file reading.
25. PageDiff – a simple page compare application to helps web developers and designers to see HTML code differences between web pages.
26. Clipmarks – let you save any parts of current web pages. Nice and Recommended!
I use Aardvark and CSSViewer regurarly. Both allow you to view the CSS right on the webpage you browse. Besides that the Web Developer toolbar is a set of tools including almost everything you need. If you code JavaScript/AJAX Firebug is your best friend.