FireFox extensions to make styling and designing easier

[Jamie Edwards]

There are two popular FireFox extensions that make page layout design and styling very easy to do:

Web Developer
Adds a toolbar, allows you to 'visualise' the object structure (DOM) of your page by putting boxes around things, allowing you to easily 'hone in' on certain areas and their coresponding CSS elements. You can edit CSS, cookies, and JavaScript on the fly (you can even edit the Google home page!). It will also allow your to resize your browser to simulate certain screen resolutions and sizes. I'd recommend this for novices.



FireBug
A little more technical than Web Developer, and less intuitive yet all the more powerful when it comes to JavaScript, network and page inspection. FireBug provides most of the same features as Web Developer bar (and a few more). I would recommend this if you have handled HTML, CSS and web design in general before.

[craigbrass]

ColorZilla is another handy tool.

[Jamie Edwards]

View Source Chart
https://addons.mozilla.org/en-US/firefox/addon/655

View Source Chart; for those who are beginning to get their heads around HTML and the document object model of websites.

It will turn this:


Into this:

[bear]

"Install script not found" when I try to install this one. Something wrong with the download, it seems. Know any alternate sources?

[EDIT] Disregard. Error on my part.
Great extension.