Firefox is a widely-used browser – not just by users but web developers. Simply put, Firefox and its addons can make developing for the web easier and simpler. And with the release of Firefox 4, it got even easier. This article features 20 essential Firefox 4 addons for web developers.
Before diving into the Firefox 4 addons, though, here’s a quick glimpse into some of the noteworthy new Firefox 4 features that benefit web developers:
• Improved HTML5: Gecko now uses the HTML5 parser, which fixes bugs, improves interoperability, and improves performance.
• Better CSS support: Firefox 4 features support for new CSS transitions, computed values, selector grouping, background image subrectangle, and touch properties.
• New CSS stuff: Firefox 4 adds new CSS properties, pseudo-classes, pseudo-selectors, and functions.
• More graphics and video support: for WebGL, WebM video, SMIL animation for SVG, and more.
• Improved security: new security features added like Content Security Policy (CSP), HTTP Strict Transport Security, and more.
• Built-in developer tool: Firefox 4 features the Web Console tool which is a debugging aid for web and extension developers.
However, what makes Firefox great is the development community around it, and appropriately there are tons of addons that make your web development simpler and easier.
Please note that four of the extensions below are still marked as ‘experimental’, but have been tested and do work perfectly well with Firefox 4, they are: HTML5toggle, HTML5 Validator, Mobile Toolkit and Mobilify.
Creating a Web Development Environment using Google Chrome Extensions →
22 Firefox Extensions to Turn Gmail into a Powerhouse of Productivity and Manageability →
Extend the Firebug Console with these 15 Extensions →
20 Essential Firefox 4 Addons for Web Developers
FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and more.
Download FireFTP here
HTML5toggle provides a button which makes it easy to turn on or off the HTML5 support in Firefox 4. Given that HTML5 support is still evolving, some websites do not work as expected when HTML5 support in Firefox 4 is enabled.
Download HTML5toggle here
HTML5 Validator (Experimental)
HTML5 Validator adds a ‘HTML 5 Validator’ context menu item to a page’s context menu.
Download HTML5 Validator here
IE Tab 2
IE Tab 2 lets you use IE to display web pages in a tab within FireFox. Adopted from the original IE Tab, this version has new features including IE 7, 8 or 9 compatibility modes. You can also import settings from your old IE Tab.
Download IE Tab 2 here
Total Validator lets you perform multiple validations and take screen shots in one go. Total Validator is an all new HTML5 and XHTML5 validation. It provides true HTML validation for HTML 2.0 through to XHTML 1.1 using the official DTDs, plus added attribute and other tests. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly as they don’t use the official DTDs.
Download Total Validator here
Web Developer adds various web developer tools to Firefox.Download Web Developer here
EditCSS is a stylesheet modifier in the Sidebar.
Download EditCSS here
Download Console² here
CSS Reloader allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive. You can use the keyboard shortcut F9, or the context-menu’s option “Reload CSS” to reload the CSS files or at page.
Download CSS Reloader here
View Source Chart
View Source Chart lets you inspect the DOM—and learn HTML—at lightning speed. Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, View Source Chart enables you to take in DOM structure and hierarchy as fast as your brain possibly can.
Download View Source Chart here
Screenshot Pimp has a silly name but a useful function: it lets you capture, grab, save, download, or copy anything you see in your web browser—and beyond—with only one click. Screenshot Pimp not only creates an image of whatever is inside you’re web browser, but it has the ability to also capture the rest of the website that you have not scrolled down to yet. So whether the part of the website you don’t see has more text, or an image, or even flash content that is just too big to fit on the page without shrinking or scrolling, Screenshot Pimp allows the user to grab it in multiple formats, and save it to your hard drive.
Download Screenshot Pimp here
Mobile Toolkit (Experimental)
MobileToolkit helps you to validate the code of any page, check it on several mobile emulators and find documentation to improve your mobile compatibility. It offers not only one click code validation but also mobile render emulation for various mobile devices and browsers.
Download Mobile Toolkit here
Mobilify slims down the content of pages and applies a phone frame to better simulate the Firefox Mobile UI for iterative local development. It does this by placing an icon in your Addon Bar that lets you switch a page into “mobile” mode- narrowing theto 320px, darkening the surrounding content, and placing your content in a mobile phone ‘frame’. Simply click the ‘widescreen’ icon to enable mobile mode, and click again to disable.
Download Mobilify here
Download Firebug here
CodeBurner for Firebug
CodeBurner integrates with Firebug to extend it with reference material for HTML and CSS. CodeBurner’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. It also hooks into context-menus in the HTML and CSS panels, the DOM crumb trail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.
Download CodeBurner for Firebug here
Adobe BrowserLab for Firebug
Adobe BrowserLab integrates with Firebug and generates screenshots of your pages (public or behind a firewall) in multiple browsers. Launch Adobe BrowserLab directly from Firebug and preview temporary changes you’ve made using Firebug.
Download Adobe BrowserLab for Firebug here
FirePath for Firebug
FirePath integrates with Firebug and adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors (Sizzle selector engine).
Download FirePath for Firebug here
Firepicker for Firebug
Firepicker integrates with Firebug and adds a small color picker dialog when editing a CSS rule in Firebug. Firepicker scans for values that can be parsed as CSS colors (#abc, rgb(1,2,3), blue, red etc.) and displays them in a drop-down list right below the firebug’s CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.
Download Firepicker for Firebug here
iMacros lets you automate Firefox. Whatever you do with Firefox, iMacros can record and replay that repetitious work so you don’t have to manually do it each time. It can automate visiting the same sites, filling out forms, remembering passwords, downloading and uploading, data extraction and web scraping/mining, web testing, social scripting/bookmarking, and more.
Download iMacros here
FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc. It automatically switches an internet connection across one or more proxy servers based on URL patterns. Basically, FoxyProxy automates the manual process of editing Firefox’s Connection Settings dialog. Proxy server switching occurs based on the loading URL and the switching rules you define.
Download FoxyProxy here
What Are Your Essential Web Developers Firefox 4 Addons?
Over to you: what are your favorite Firefox 4 addons for web developers? Feel free to share your useful additions in the comments section below.