Firefox is my favourite web browser, and one of the reasons I like it so much is because there are so many useful and time-saving add-ons for Firefox. If you’re a web designer or developer who uses Firefox, then you know how helpful a great add-on can be! To help you save even more of your time, I’ve rounded up my favourite Firefox add-ons for web designers and developers!
Wouldn’t it be nice if there was a fast and simple way to view the differences in HTML code (text) between 2 web pages? Well, PageDiff, an add-on for Firefox, lets you do just that! PageDiff uses browser generated DOM compliant view source, and it removes the Doctype declaration and HTML tags, allowing you to ignore the source code and compare just the text content of the web pages.
This Firefox add-on includes a colour eyedropper, the Webpage DOM Color Analyzer, and the ColorZilla Online Palette Viewer, making it a must-have tool for colour lovers! With the eyedropper, you can get a colour reading from anywhere in your web browser, adjust the colour, and paste it into another program. The Color Analyzer will create a palette of all of the colours on a given web page, and you can hover over a colour to see which elements use that particular shade, or click on a colour for a list of all of the CSS rules that apply that colour to DOM elements. With the Online Palette Viewer, you can view a palette, bookmark it, and share it using a social bookmarking service such as Delicious or Google Bookmarks.
If you use Who.is to find out more information about a URL, then you need to get WHOIS Lookup, an add-on for Firefox. WHOIS Lookup adds a small Whois lookup button to your browser, allowing you to perform searches for details related to an IP address, domain, or hostname, such as location, network provider, and contact details, with the click of a button!
Dummy text is great for web designers who want to show their clients how text will look in a site’s design before the content is ready, and the Dummy Lipsum add-on for Firefox is a great tool for creating dummy text. When your cursor is in a text area, a context menu option will appear (“Insert Dummy Lipsum”), and this option will automatically fill the field with dummy text. Dummy Lipsum will attempt to detect the size of the text area and fill it will the appropriate amount of content, but you can also configure the default values for each type of field.
If you want to improve your website’s performance, then you should download YSlow. This Firefox add-on uses a set of predefined or user-defined rules for high performance to evaluate your site’s pages, and it will provide suggestions on how you can improve the speed of your website. YSlow is integrated with the web development tool Firebug, and it includes tools for performance analysis, including Smush.it™ and JSLint.
Looking for an easy way to switch between a site on your development server and your live server? Then download Server Switcher, a Firefox add-on that allows you to easily navigate between websites on your development server and live server with the click of a button! Server Switcher is a great add-on for web developers who want to be able to instantly see the differences between two websites.
There are lots of add-ons for taking screenshots of web pages, but FireShot is arguably one of the best add-ons available. Like other screen capture add-ons, Fireshot allow you to take a screenshot of an entire web page or just the visible portion, but it also includes a set of annotation and editing tools. With these tools, you can easily modify your screen captures, as well as insert graphical and text annotations, making Fireshot a great tool for developers and designers to use when working with their clients.