July 30, 2007                                            

26 Useful Firefox Extensions for Web Design

* This post is regularly updated. *
browserApproximately 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!
CSSViewer

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.
Firebug

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.
Aardvark

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!
clipmarks