If you develop and trouble-shoot a lot of web sites that use CSS, then there are two Firefox Add-on plug-ins that you have to use and will ultimately “CANNOT” live without.
Web Developer
by Chris Pederick
Adds a menu and a toolbar with various web developer tools such as finding broken images, resizing browser, colour info, etc.
If you need HTML, CSS, images (broken), or even JavaScript information about a web site, this tool does it all. Play around with it, you will see what I mean.
Firebug
by Joe Hewitt
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
Oh…for all those times where a web site uses multiple, multiple CSS files and you can’t figure out which CSS element is being used and which CSS file it is coming from. Just hover over an element and Firebug will show you which CSS element is being used.
Discover more from thegreenpages
Subscribe to get the latest posts sent to your email.
For debugging/designing in IE, there is a Internet Explorer Developer Toolbar as well:
http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#Instructions
Works in IE7 and has a nifty right-click “Trace Style” when you click on the Current Value under Current Style >Property window.
Instructions
After installing the Developer Toolbar, restart Internet Explorer and click the Developer Toolbar icon in the command bar to display or hide the Developer Toolbar.
You can also open the View menu and then use the Explorer Bar menu. In Internet Explorer 7, open the Tools menu and then use Toolbars->Explorer Bars to display or hide the Developer Toolbar.