Firefox/mozilla UI development tools

Using trusty old "view source" used to be the way to debug bad-looking html. Now there are mozilla/firefox extensions that make html development much more productive. A basic set is listed here to get you up to speed.

Web developer

Web developer adds a web development toolbar to your firefox with almost everything you'd want to do or know. CSS info, validation, resizing to test other screen resolutions, converting POSTs to GETs. An essential.

Aardvark

Aardvark, when enabled for a page, shows you the class/id information when you hover over an element. Pressing v for instance, gives you the source for the item you hover over. Start the demo on their site and experiment with the keystrokes. It is a lightweight and elegant tool.

ColorZilla

ColorZilla is surprisingly handy. It does what the name suggest: providing a color picker that displays the hex code of the pixel you hover over in the status bar. There's more: showing the box size of the current box element; showing the element, class and ID of the current element; distance between two points. All in the status bar.

FireBug

FireBug constantly displays the number of errors it finds in your page. Handy during development for finding that mis-spelled css class or the faulty javascript statement. Also includes some css and source examination, but aardvark tends to be a bit handier for that.

X-ray

The x-ray firefox extension is pretty handy in figuring out the layout of a plone site. It displays the tags, the IDs and the classes inline, giving you a surprisingly good idea of what's happening behind the scenes.

View formatted source

View formatted source gives you a well-rendered view of the page's source. More important, when you hover over an opening tag, it shows you the css that gets used for that tag. And with multiple css files (plone anyone?) it shows them in the order in which they're used (and overwritten).

View source with

View source with allows you to right-click on every textarea or source view and select a program to edit/view it with. A bit like ExternalEditor, but then for every textarea. Not 100% developer oriented, but handy for small changes to test css files in the custom skin folder and so anyway.

Another type of useful gadgets are bookmarklets.

Two sources of these are http://squarefree.com and http://slayeroffice.com See for example:

Web development bookmarklets

The Web development bookmarklets provide the same kind of functionality as the web developer toolbar. The JavaScript Shell and JavaScript Development Environment deserve mention.

Mouse-over DOM Inspector

The Mouseover DOM Inspector , or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document.

Javascript Object Tree Favelet

The Javascript Object Tree Favelet will overlay your current document with a DIV element containing a collapsed list of all the javascript object types currently referenced by the page, from functions to strings to booleans and all else that falls between.

Favelet Suite

This is a favelet that combines most of [the slayeroffice] development favelets . When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets I've included. Simply click the link you want to invoke the favelet.