I know the add-on Firebug is not new for Firefox, but I am currently using it to tweak the CSS and design of a web site I working on, in Roxen. The hierarchy of the Roxen CSS design can get a little confusing when you are trying to over write the CSS code in Roxen (and you are not familiar of the layout of the code since you did not write it).

How It Works:

You install Firebug and it’s part of your web browser. You can then open up a website you are working on. You click on the Firebug icon at the bottom right. A pane will open up on the bottom of the browser. It will have the HTML code for the page (which you can hover over and it will highlight the section the code comes from) and the CSS that is associated with that HTML on the page. If you click on the tag in the HTML, it will skip right to that section in the CSS. You now know what exact part you need to tweak in the CSS. Just for that, this add-on is worth installing. Based off the HTML tags and CSS, it can show you how the site is laid out. For example, if you have a content wrapper, then a content main tag, then a content nav, it will show you the nesting of the tags in a diagram if you click on the layout tab.

This add-on has made my life with Roxen a little easier over the past couple of days. If you would like to install the add-on, click on the link below:


This is a screenshot of the FIrefox add-on Firebug
This is a screenshot of the FIrefox add-on Firebug