Two Firefox Extensions for Web Development

Keywords: internet, web design, webdesign, development, web, site, website, Firefox, extensions

One of the strengths and uniqueness of Firefox is the almost unlimited number of extensions created for this particular web browser. We’re going to have a look here at two of the most useful extensions for web designers and developers.

The Web Developer Toolbar

The web developer toolbar is a very useful Firefox and Seamonkey extension for web design, development & SEO related tasks. It adds a menu and a toolbar to your browser with a huge number of tools.

Overview of the toolbar main features :

  • the disable feature allows you to disable cache, Java, JavaScript and override the minimum font size setting for any page;
  • the css feature allows you to display style information for any web page, display css by media type (ie handheld or print), view and edit CSS stylesheets and even add your own stylesheet;
  • the work with form feature : display form information and details, convert form methods, etc.
  • the view image feature : one can view image information, disable images or hide images, outline images depending on various parameters (ie oversized images or with empty alt attributes or with no alt attribute). One can also replace images with their alt attributes, find broken images, display the image dimensions, file size and paths. You can even make an image full size or invisible.
  • the information feature displays page information, meta-tags information, access keys and abbreviations, anchors, element information, block size, div order, id and class details, link details, color information, table information and depth, title attribute, document size, JavaScript, meta-tags, server response headers.
  • the miscelleaneous feature allows the user to clear the web browser’s cache and history, show comments or hidden elements. You can also edit html from here and see what your web page would look like on a small device screen (small screen rendering).
  • the outline feature is useful to outline frames, headings, links, tables or positioned elements (absolute, fixed, float, relative). It is even possible to spot deprecated elements.
  • the tool features include all the validation tools you could imagine : you can validate your html, stylesheet and feeds, locally or not (through the W3C online validation services) and test your links. You can control the website accessibility and get a WAI and section 508 report (generated by Cynthia Says, generate a very complete speed report, although we would say this is a bit tough (
  • Finally, it also includes a DOM inspector and a Java console.
  • the view source extension : as it says !

Browser supported: Firefox, Mozilla and Seamonkey.

Plateform: any platform that these browsers support including Windows, Mac OS X and GNU/Linux.

Current available languages: English, Chinese (Traditional), Czech, Danish, Dutch, Finnish, French, German, Greek, Hungarian, Italian, Macedonian, Polish, Portuguese, Russian, Slovak, Spanish, Thai, Turkish.

The Firebug Extension for Web Development

This is also a very good extension for web design and development. It is a bit less obstrusive than the web developer extension : when you need it, you’ll just need to press the F12 key to launch Firebug in a separate window, or as a bar at the bottom of your browser… Press F12 again to make it disappear. With Firebug, you can to edit your documents on the fly, debug, monitor CSS, HTML, and JavaScript live in any web page, evaluate download speed using the Net tab graphs and much more.

Note : although Firebug will only work as an extension for the Firefox web browser, if you happen to use another browser (like Internet Explorer, Opera, Konqueror or Safari) and want to test your web pages, you still can use it by using “Firebug Lite”, which is a just a small JavaScript file you insert into your pages and that will simply emulate a simplified version of the Firebug console in your web pages. However, as Firefox is free to download and use on any platform, unless you have good reasons not to use a browser of the Mozilla family, we think that the original Firefox extension is less hassle as it’s ready to use.

Firebug is very powerful : click here to get a more complete overview of capabilities or read a good introduction to Firebug here.

You can download Firefox here: Firefox offical website

© 2007 Clifton Web Design