Firefox has an aggregate market share of 27 per cent and is widely thought of as the professional’s browser of choice. Beloved by designers, developers and network boffins, it’s stable, extensible and tries hard to keep bang up to date with web standards.
But if you’re only using it as a browser, you’re really missing out. Mozilla’s modular add-on features enable you to inject more power into Firefox.
That got us thinking. Could we use Firefox extensions to turn a browser into an IDE? It turned out that, yes, we could. Adding CSS, HTML and scripting capabilities to the core browser is one of the easiest parts of the project; it’s easily achieved with a range of powerful, free tools that are available now and compatible with Firefox 3.5.
You can go even further with FTP, colour picking, code verification, graphics and layout helpers. The result is a web-authoring platform that gives you all the tools you need to create and publish pages.
1. Web Developer
Chris Pederick’s Web Developer should be at the core of any Firefox web authoring makeover. We find it essential for working with CSS, especially on blog platforms like WordPress or Movable Type, where it can be difficult to track down which class or ID belongs to which element.
The extension adds a new toolbar to Firefox that lays bare the Document Object Model (DOM) of your page, enabling you to highlight page elements, view cookies, troubleshoot forms, see object names and so on. You can also disable or enable targeted site functions. For example, you can turn off JavaScript, images, style sheets, cookies or even page colours.
For us, the best feature is the ability to see and edit CSS. The ‘Add User Style Sheet’ command also allows you to apply saved styles to pages and preview any changes.
2. Firebug
Firebug is a great complement to Web Developer. There’s a bit of an overlap between the two apps, but essentially Firebug is a tool that’s better suited to direct inspection of underlying code, while Web Developer uses overlays to reveal the DOM on the page.
Google Chrome users may have a sense of déjà vu, as Firebug’s inspection window is very similar to the ‘Inspect Element’ tool in Google’s browser. It gives you direct access to the code in a page, enabling you to edit and debug it in a hierarchical, DOM-nested document window.
One of Firebug’s best features is its take on the Mozilla JavaScript console. It’s easy to invoke and gives you two interface options: either a single command line to type in and test code line by line or a full text window that uses Firefox’s JavaScript engine to execute code.
3. Pixel Perfect
When you’ve installed Firebug, add Pixel Perfect, a very useful tool that enables you to add a tracing image to a page you’re editing.
A tracing image is a transparent page mock-up that you can use to tweak the positioning code in your page. The two extensions work together to provide preview and manual code-editing tools.
4. Codetch
Codetch takes things a stage further than either Web Developer or Firebug, adding a complete web development IDE on top of Firefox. Install it and you’ll find a full code-editing environment with distinct preview, design and code views that can be configured in splitscreen mode.
Word processor-style text-layout tools can be used for formatting content, while built-in validation ensures that your pages are W3C compliant and work as they should in Firefox. It’s like having an early version of Dreamweaver as a browser plug-in.
5. Colorzilla
Colouzilla is one of our favourite tools. Adding an eyedropper function to Firefox, it allows you to sample colour from anywhere in a page. The colour HEX code readings can then be pasted directly into your text editor.
Colorzilla allows you to sample multiple colours for a page or to add to a palette as you build up your own colour scheme. Hold down [Shift] as you sample pixels. If the area you want to sample is small, zoom in by selecting the ‘Zoom’ option from Colorzilla’s menu.
The applications for these features are many, from matching CSS colours with a bitmap image to snatching a favourite colour scheme from another site.
There’s more too. Double-click on the Colorzilla icon in Firefox to get a full RGB colour picker. There’s also a palette view that includes custom schemes, such as the official W3C colour names and classic web-safe palettes.
6. MeasureIt
Colourzilla has one last hidden feature up its sleeve – you can measure between two points, which you specify using the eyedropper. But for even finer control, choose MeasureIt instead.
This add-on draws a grid over an element as a marquee around it – giving you accurate block measurements and a live read out. This is valuable when you need to match CSS widths and heights to existing components in a layout.
7. FireFTP
FireFTP embeds a fully featured FTP client into Firefox – and we really mean fully featured. When launched, FireFTP is reminiscent of desktop FTP app Filezilla. The split-pane view gives you full drag-and-drop access to your local desktop and to FTP servers.
There are also command tools to control remote files. Use FireFTP to upload scripts and files without leaving Firefox, giving your browser-based authoring environment a highly usable set of site-management tools.
8. Firefox Accessibility
The extensions mentioned so far do a pretty good job of replicating the kind of features you find in commercial web-authoring tools. Web Developer and Codetch even include code validation features. We’d advise that you add on an accessibility testing suite too.
If you’re running a commercial site it must comply, by law, with European and UK access regulation under the Disability Discrimination Act (DDA). The Firefox Accessibility Extension bundles together a range of accessibility reporting tools that you can run on your pages in a new toolbar. Though it’s an American tool, there’s a lot of crossover between US and EU legislation, so what passes the test here should be enough to ensure that your sites are DDA-compliant.
Crucially, the extension runs in your browser rather than remotely accessing content from a server. It tests the interpreted HTML in your page as Firefox renders it. This method means that it avoids false errors that might otherwise be generated.
Post by 
