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

One thought on “26 Useful Firefox Extensions for Web Design

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>