T and S Web Design

I’m Sean Sanders, one of the relatively new programmers here at T&S. Our former programmer Nick Little blogged previously about tools to help with web development, and one of those tools I find incredibly useful is the Firebug plugin for Firefox. There are some situations when having the ability to look at the CSS in other browsers the way you can in Firefox is helpful.  This is especially true with IE. Because of the way IE chooses to (not) display CSS rules, we often have to create style sheets just for IE to make it display our sites properly. A few days ago I found myself in a situation where I was trying to debug a site in IE7 and wanted to figure out exactly which rules were being applied. I looked into seeing if there was a way to use Firebug in IE.

What I found was a short bit of Javascript the people behind Firebug had written to be able use some of Firebug’s functionality in other browsers. They call it Firebug Lite.  This isn’t the full addon for Firefox, so you can’t change CSS on the fly the way you can in Firefox, but it’s still useful for being able to see how the rules you’ve created are getting applied. The following is the script for adding it to your website:

<script type=”text/javascript”
src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js”></script>

Also, for ease of use I wrote a bit of PHP to quickly turn the Firebug Lite script on and off.

<? if ($_GET['firebug']=="1") { ?>
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<? } ?>

Now all you have to do is view the webpage normally when you don’t want to see the Firebug information, and add the parameter ?firebug=1 to the end of the url if you want to turn on Firebug. (Or, if there are already URL parameters, &firebug=1) I mentioned IE earlier, but if you are having trouble with your website in other browsers, such as Safari or Opera, it works equally well.